Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher

Started by Wellwisher, April 06, 2016, 07:28:01 PM

Previous topic - Next topic


What you will achieve in 60 seconds or less:

*Image shown for demonstrational purposes


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

Open file: Theme/Index.template.php

Find the closing </head> tag.

ADD before:

<link rel="stylesheet" href="">


Open file: Theme/css/index.css

ADD at the End:

/* 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 */


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:

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

Replace with:

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


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

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

Search For:

$txt['parent_boards'] = 'Child Boards';

Replace with:

$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

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)


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.


@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.


@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?  ???


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

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


Quote from: margarett on April 11, 2016, 06:39:32 PM
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!


great tips! thanks for this one!

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters