Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Wellwisher on April 06, 2016, 07:28:01 PM

Title: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Wellwisher on April 06, 2016, 07:28:01 PM
What you will achieve in 60 seconds or less:

(http://i.imgur.com/7bChbxq.jpg)

*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)
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Antes on April 09, 2016, 03:03:50 PM
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.
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Wellwisher on April 09, 2016, 04:36:19 PM
@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.
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Wellwisher on April 09, 2016, 08:59:52 PM
@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?  ???
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: 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 ;)
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Wellwisher on April 11, 2016, 07:17:20 PM
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!

Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: paulonmatu on April 21, 2016, 10:24:33 AM
great tips! thanks for this one!
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Biology Forums on April 21, 2016, 11:00:12 AM
Nice...
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Pipee on April 24, 2016, 03:38:14 PM
nice trick :D
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Sir Osis of Liver on April 29, 2016, 11:45:37 PM
That's pretty much what this mod (http://custom.simplemachines.org/mods/index.php?mod=2294) does.
Title: Re: [TRICK] Pretty "Child Boards" On Front Page - A 60 Seconds Fix - By Wellwisher
Post by: Arantor on April 30, 2016, 07:46:27 AM
Yes but he thought the mod was overkill.