Simple Machines Community Forum

What you will achieve in 60 seconds or less:



*Image shown for demonstrational purposes

---

STEP: 1

Note: If you already have Font-Awesome (https://fortawesome.github.io/Font-Awesome/) installed, skip this step.

Open file: Theme/Index.template.php

Find the closing </head> tag.

ADD before:



<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:



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



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



Replace with:



<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:

$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 (http://stackoverflow.com/questions/36534069/trying-to-target-each-a-link-with-a-unique-font-awesome-icon) 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)

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 ;)

Zitat von: margarett in April 11, 2016, 06:39:32 NACHMITTAGS
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!

Nice...

nice trick :D

That's pretty much what this mod (http://custom.simplemachines.org/mods/index.php?mod=2294) does.

Yes but he thought the mod was overkill.