[HowTo] Add 2 column support for child boards

Started by Timeless, June 19, 2008, 07:23:56 PM

Previous topic - Next topic

Timeless

So -- a couple of people have asked me to make a guide for them on how they can get a two column effect for child boards on various templates.

I'll be using version 1.1.5 in this guide with the default template which comes with SMF.

Alright, lets get our hands dirty in this mess, quick and easy. All our changes will be conducted in the BoardIndex.template.php file. So let's make a backup of that first in case you screw up.

cp /home/<username>/public_html/forum/Themes/default/BoardIndex.template.php  /home/<username>/public_html/forum/Themes/default/BoardIndex.template.php.bak

You know the drill in Windows... ^^

Good, backup done. Time to modify it. Fire it up in your favourite editor and let's get cooking.

Replace lines 172-176 which contain the following code:
foreach ($board['children'] as $child)
{
$child['link'] = '<a href="' . $child['href'] . '" title="' . ($child['new'] ? $txt[333] : $txt[334]) . ' (' . $txt[330] . ': ' . $child['topics'] . ', ' . $txt[21] . ': ' . $child['posts'] . ')">' . $child['name'] . '</a>';
$children[] = $child['new'] ? '<b>' . $child['link'] . '</b>' : $child['link'];
}

With the following code:
foreach ($board['children'] as $child)
{
$child['link'] = '<a href="' . $child['href'] . '" title="' . ($child['new'] ? $txt[333] : $txt[334]) . ' (' . $txt[330] . ': ' . $child['topics'] . ', ' . $txt[21] . ': ' . $child['posts'] . ')">' . $child['name'] . '</a>';
$children[] = $child['new'] ? '<img style="margin-right:5px;" src="' . $settings['images_url'] . '/onk.gif" alt="' . $txt[333] . '"/><b>' . $child['link'] . '</b>' : '<img style="margin-right:5px;" src="' . $settings['images_url'] . '/offk.gif" alt="' . $txt[334] . '"/>' . $child['link'];
}

Note the images onk.gif and offk.gif -- Please change them to represent New Posts and No New Posts.

OK, that's done too -- good, let's move along...

Replace lines 178-183 which contain the following code:
echo '
<tr>
<td colspan="3" class="windowbg', !empty($settings['seperate_sticky_lock']) ? '3' : '', '">
<span class="smalltext"><b>', $txt['parent_boards'], '</b>: ', implode(', ', $children), '</span>
</td>
</tr>';

With the following code:
echo '
<table class="bordercolor" style="width:100%; border:0 none" cellspacing="1" cellpadding="3">
<tr>
<td align="center" valign="middle" style="width:7%">';

$child_counter = 0;

if(empty($settings['child_boards_rows']))
{
echo '
</td>
<td style="vertical-align:top; width: 30%;">';

for(; $child_counter < ceil(count($children)/2); $child_counter++)
echo $children[$child_counter], '<br/>';
}

echo '
</td>
<td style="vertical-align:top">';
for(; $child_counter < count($children); $child_counter++)
echo $children[$child_counter], '<br/>';
echo '
</td>
</tr>';
echo '
</table>';


Save the file and re-upload it to the correct place, to the folder of the template.

That's all there is to it, you're done and now have a nice two column layout which would make those guy/girls over the 4th Avenue Street jealous of you!

Kalina

Do you happen to have a screenshot so I can see what it does before I attempt it? Thanks. :)

Timeless

You can see a vB demo which uses a mod for this type of effect. Here

Rumbaar

Can this be expanded to include more than 2 columns?
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Antechinus

#4
Yes it can. I've just been playing with this for somebody who wanted to have up to four columns of child boards with a maximum of three child boards per column. After messing with it I found this works wonderfully well,

$child_counter = 0;


if(empty($settings['child_boards_rows']))


{
echo '
</td></tr><tr>

<td class="middletext" valign="top">';


for(; $child_counter < ceil(3); $child_counter++)


echo $children[$child_counter], '<br/>';

}

echo '
</td>

<td class="middletext" valign="top">';

for(; $child_counter < ceil(6); $child_counter++)

echo $children[$child_counter], '<br/>';

echo '
</td>

<td class="middletext" valign="top">';

for(; $child_counter < ceil(9); $child_counter++)

echo $children[$child_counter], '<br/>';

echo '
</td>

<td class="middletext" valign="top">';

for(; $child_counter < ceil(12); $child_counter++)

echo $children[$child_counter], '<br/>';

echo '
</td>




ETA: Why bother with little bits of code? I might as well attach the BoardIndex.template and be done with it. :)

sombra

QuoteETA: Why bother with little bits of code? I might as well attach the BoardIndex.template and be done with it.

are you trying to say i just need to put your attachment in my page and thats all?

does this modification works on a smf 2.04?

sorry for my dumb questions im newbie at all this but trying to learn from you guys

Rumbaar

I'm sure the template changes with 2.0 will not allow you to just use the attached file, or even the code snippet.
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

sombra


Antechinus

Oh it can be done alright. It just can't be done without some modifications to the 1.1.6 code. I haven't looked at this for 2b4 yet. If you're used to template edits you could probably sort it yourself. If you aren't then it'll probably drive you nuts.

Does the theme you're using have its own copy of BoardIndex.template.php or does it call the file from the default theme?

sombra

i think it dosent have one im using darkbreak theme

and i dont know how to edit last time i tried had to delet all the forum and install again hahaha

sombra

heres the one i found it was the default one didint find non on darkbreak


Antechinus

Yup, I know Darkbreak. I'll have a look at it over the weekend if nobody else sorts it first. How many columns of child boards do you want? I did a version of Mystic Jade that had four columns with three child boards in each one, so it makes no difference to me.

Also if you want drop menus for Darkbreak I've done those too.

sombra

i really dont know :( your talking about lines if you make it of tree if i only use 2 can it make a wrong efect?

if not make it of 3 to go sure hehe and thanks for the help

Antechinus

Well it wont mess anything up. It'll just leave empty spaces. Tell you what: I'll sort it in two columns. If you want three or whatever later on that's an easy thing to change. No big deal.


Rumbaar

The $txt[] strings in 1.1.x are different in 2.x so you'll have to make sure you alter those where applicable if you're going to use the base 1.1.x file in 2.x
"An important reward for a job well done is a personal sense of worthwhile achievement."

[ Themes ]

Antechinus

Yes I'm aware of that. I'll just rip the required lines of code and adapt them to the 2b4 template rather than attempting to use the entire 1.1.x template. Shouldn't be a big drama. I was planning on looking at this for 2b4 anyway so this is an incentive to sort it out.

Antechinus

Ok, all sorted. This will give child boards in two columns. Screenshot is attached.

For SMF 2 beta 4, open BoardIndex.template.php.

Find this:

// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] | $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';sesc=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

$children[] = $child['new'] ? '<strong>' . $child['link'] . '</strong>' : $child['link'];
}
echo '
<tr>
<td class="windowbg3 smalltext largepadding"><strong>', $txt['parent_boards'], '</strong>: ', implode(', ', $children), '</td>
</tr>';



Replace it with this:

// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] | $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';sesc=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

$children[] = $child['new'] ? '<strong>' . $child['link'] . '</strong>' : $child['link'].'<br />';
}
echo '
<tr>
<td class="windowbg3 smalltext" valign="top"><table><tr><td valign="top"><strong>', $txt['parent_boards'], ':&nbsp;</strong>';

$child_counter = 0;

if(empty($settings['child_boards_rows']))

{
echo '
</td>
<td valign="top">';

for(; $child_counter < ceil(count($children)/2); $child_counter++)
echo $children[$child_counter], ' ';
}

echo '
</td>
<td valign="top">';
for(; $child_counter < count($children); $child_counter++)
echo'  &nbsp;&nbsp; ' ,$children[$child_counter], '';
echo '
</td></tr></table></td>
</tr>';

sombra

#18
thanks for the fix now i have a cuestion i was looking if it can look like this

http://i38.tinypic.com/2hwf9s0.jpg

you can see it look organiced

now mines looks like this

http://i33.tinypic.com/2ch50l2.jpg

http://i38.tinypic.com/2ewmqgy.jpg

its suposed to look like this?

some of them have bold letter and some dont did i made ir wrong?


Antechinus

#19
You wanted it in two columns. It's in two columns. You only have three child boards so obviously you'll get one in one column and two in the other column. What did you expect if you have three child boards?

ETA: And in your third screenshot you only have two child boards. Split them into two columns and you'll have one in each, which will just look like two child boards in one row, which is what you have.

If you want it to look like the first shot then make eight child boards and they will stack up in two columns. Isn't this common sense?

Advertisement: