Advertisement:

Author Topic: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher  (Read 12564 times)

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
What you will achieve in 60 seconds or less:



*Image shown for demonstrational purposes


STEP: 1

Note: If you already have Font-Awesome installed, skip this step.

Open file: Theme/Index.template.php

Find the closing </head> tag.

ADD before:

Code: [Select]

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


STEP: 2

Open file: Theme/css/index.css

ADD at the End:

Code: [Select]

/* Enter Pretty Sub Boards */
.children.windowbg > a,.children.windowbg > strong {float: left;width: 30%;}
.subtxt {display: block;font-weight: bold;padding-bottom: 5px;}
.subtxt::before {content: "\f115";}
.children.windowbg > a::before, .children.windowbg > strong::before {content: "\f114";}
.children.windowbg > a::before, .children.windowbg > strong::before,.subtxt::before {
  font-family: fontawesome !important; font-weight: 100; padding-right: 5px; display: inline-block;}
.children.windowbg {padding: 0.8em 0.7em;}
/* End Pretty Sub Boards */


STEP: 3

Open file: Theme/BoardIndex.template.php

Note: If you don't have this file in your custom theme folder go to default/BoardIndex.template.php and copy and paste BoardIndex.template.php into your custom theme folder and then apply this step.

Search For: "children windowbg"

You will find:

Code: [Select]

<tr id="board_', $board['id'], '_children">
<td colspan="3" class="children windowbg">
<strong>', $txt['parent_boards'], '</strong> ', implode(', ', $children), '
</td>
</tr>';


Replace with:

Code: [Select]

<tr id="board_', $board['id'], '_children">
<td colspan="3" class="children windowbg">
<span class="subtxt">', $txt['parent_boards'], '</span> ', implode($children), '
</td>
</tr>';


STEP: 4 (OPTIONAL)

For those people interested in changing "Child Boards" to "Sub Boards":

Open file: /Themes/default/languages/index.english.php

Search For:

Code: [Select]
$txt['parent_boards'] = 'Child Boards';
Replace with:

Code: [Select]
$txt['parent_boards'] = 'Sub Boards:';


Additional Notes:

If you want a 2 column Sub Boards layout: In Step 2 edit css to replace "width: 30%;" with "width: 50%;". If you want more columns, decrease the percentage until you get the number of columns you're after.

Adding custom font-awesome icons to different sub boards!  8)

To push this tutorial EVEN further, I wanted to see if it was possible to add custom sub board icons using css but ran into problems structuring the code but I had good help from the Stackoverflow community.

Here's my jsfiddle mock-up https://jsfiddle.net/20t1x0eh/

What does this mean? This means *potentially* you could add an incrementing number/variable (via php) at the end of html class "children windowbg" which enable you to target different sub boards links with their very own unique font-awesome icons:

"children windowbg"
"children windowbg 2"
"children windowbg 3"
"children windowbg 4" etc

Now simply turn those sub-boards into <li> list-items via css (display:list;) and you can now target sub-board list items using ".windowbg  li:nth-of-type(1):before" CSS3 and little hard-coding in the BoardIndex.template.php (I am no php expert otherwise I'd disclose a how-to on this). But if you have a suggestion or a work-around for this, please add your code/ comments below.

Much respect - Wellwisher.  8)
« Last Edit: April 10, 2016, 06:29:23 PM by Wellwisher »

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,646
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Custom CSS code would be better if they are added to end of the file, so they'll load in prio. I don't see any other problem, you may consider using :before instead ::before.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
@Antes edited to put the css at the top. For some reason single colan doesn't trigger font-awesome on my iphone browser so I used that method'o. Also the double ::before colan method is a newer standard but people are free to edit according to method that works for them.

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
@Antes Fixed* to add css snippet at the end, also introduced an inline-block which resolves font-awesome icons being underlined on a mouse hover event.

Do web-browsers load CSS-files backwards?  ???

Offline margarett

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 19,761
  • Gender: Male
No, it's the other way around. The file loads from the beginning and whatever is declared last gets priority. That's why content at the end of the file has priority ;)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

Quote
Over 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 369
  • Gender: Male
No, it's the other way around. The file loads from the beginning and whatever is declared last gets priority. That's why content at the end of the file has priority ;)

@margarett That literally sends shivers down my spine - looks like I will need to re-order my css. ;D So it's worth sticking any Layout, media queries at the end of the CSS file? Especially any css containing large image URLs & css "data:image/png;base64" codes.  Again, thank you for this VERY important lesson too Margarett. :P Much respect tbh!


Offline paulonmatu

  • Newbie
  • *
  • Posts: 1
great tips! thanks for this one!
« Last Edit: April 21, 2016, 10:29:29 AM by Antes »

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,101
    • @studyforceps on Twitter
    • Study Force
Nice...

Offline Pipee

  • Semi-Newbie
  • *
  • Posts: 93
  • Gender: Male
  • Learn from your mistakes.
    • @PipeeV on Twitter
    • SMF Tricks
nice trick :D

█Free & Premium Responsive Themes for SMF.
█ Free Themes and Mods
█ Premium Themes
█ My last theme Yorky

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 7,096
  • 'Tis the gift to be simple
That's pretty much what this mod does.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 68,042
    • Arantor on GitHub
Yes but he thought the mod was overkill.
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.