Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Neverhurry on January 10, 2010, 03:53:30 PM

Title: 2 column board
Post by: Neverhurry on January 10, 2010, 03:53:30 PM
Hi,

I am using SMF 2.0 RC2 default theme, and because my forum has too many boards I am trying to make a 2 column board layout, that is, change the layout from:

Quote
Cat1
board1
board2
board3
board4

Cat2
board5
board6
board7
board8

to
Quote
Cat1
board1 board3
board2 board4

Cat2
board5 board7
board6 board8

I searched related info a lot but had no luck (i did find a related thread http://www.simplemachines.org/community/index.php?topic=245358.20 but that is about child board).

Can anybody give me some advise, how to make it?

I found out that in the index page, the board table is controlled by a class called "windowbg2", but when I changed the width of this class to 50%, it didn't work.

.windowbg2
{
   color: #000000;
   background-color: #f0f4f7;
   width: 50%;
}

Can anybody give me some advise, how to make it? Thank you!
Title: Re: 2 column board
Post by: Antechinus on January 10, 2010, 04:58:46 PM
There is a two column theme here: http://custom.simplemachines.org/themes/index.php?action=search;basic_search=kahnefan

That should give you a starting point.
Title: Re: 2 column board
Post by: Neverhurry on January 11, 2010, 08:57:04 AM
There is a two column theme here: http://custom.simplemachines.org/themes/index.php?action=search;basic_search=kahnefan

That should give you a starting point.
Antechinus, thank you very much, but it is still too difficult for me to handle.
I checked http://custom.simplemachines.org/themes/index.php?lemma=1289 but in its BoardIndex.template i didn't find any clue. The theme owner changed too many things there. What I want is simply to display boards in 2 columns with minimum change of the default theme code. Can anybody tell me which CSS class should I edit to make this possible?
Title: Re: 2 column board
Post by: Jerry on January 11, 2010, 11:24:53 AM
You won't be able to achieve this with just CSS. In the end you will have to modify BoardIndex.template.php like they did in the linked theme.
Title: Re: 2 column board
Post by: forsakenlad on January 11, 2010, 12:32:42 PM
Well actually you can do this with CSS pretty easily. I'll post it after I have dinner.
Title: Re: 2 column board
Post by: Jerry on January 11, 2010, 12:33:26 PM
Well actually you can do this with CSS pretty easily. I'll post it after I have dinner.
oh nice :) Will be waiting for you to post then.
Title: Re: 2 column board
Post by: Neverhurry on January 11, 2010, 03:17:58 PM
Well actually you can do this with CSS pretty easily. I'll post it after I have dinner.

Gosh, you rock! it must be logically very beautiful, can not wait to see your post.
Title: Re: 2 column board
Post by: Antechinus on January 11, 2010, 03:25:20 PM
float :left; FTW. I know what he's thinking. If you set each category to 50% width (or maybe 49%) and float them they will stack up in rows of two. Should work.
Title: Re: 2 column board
Post by: forsakenlad on January 11, 2010, 04:51:12 PM
Because the childboards is a td itself I couldn't make it float, wouldn't it be more semantically correct to move it into another tbody or something?

Here add this to your css (it removes the childboards):

Code: [Select]
#boardindex_table tbody.content tr
{
display: none;
}

#boardindex_table tbody.content tr.windowbg2
{
width: 49.5%;
float: left;
margin-right: 0.5%;
margin-bottom: 0.5%;
display: block;
}

And if you want to show the child boards as well let me know and I'll send you another few template edits.
Title: Re: 2 column board
Post by: Antechinus on January 11, 2010, 04:56:02 PM
Yeah I forgot that Curve has the entire board index in one table. That is quite restrictive in some ways even though it does reduce the markup. I already know that for some custom themes it will be necessary to go back to a separate table for each category.
Title: Re: 2 column board
Post by: forsakenlad on January 11, 2010, 04:56:43 PM
Well maybe not but instead having them in seperate tbody's would ease customization a lot.
Title: Re: 2 column board
Post by: Antechinus on January 11, 2010, 05:04:37 PM
They already are.
Title: Re: 2 column board
Post by: forsakenlad on January 11, 2010, 05:56:25 PM
No I meant not every cat but everyboard inludong that boards children.


Title: Re: 2 column board
Post by: Neverhurry on January 12, 2010, 10:07:55 AM
Because the childboards is a td itself I couldn't make it float, wouldn't it be more semantically correct to move it into another tbody or something?

Here add this to your css (it removes the childboards):

Code: [Select]
#boardindex_table tbody.content tr
{
display: none;
}

#boardindex_table tbody.content tr.windowbg2
{
width: 49.5%;
float: left;
margin-right: 0.5%;
margin-bottom: 0.5%;
display: block;
}

And if you want to show the child boards as well let me know and I'll send you another few template edits.

Wow! I tried it and it is beautiful!
Yes, I would like to show the child boards, so pls help! thank you so much.
Title: Re: 2 column board
Post by: Antechinus on January 12, 2010, 02:52:46 PM
Just be aware that it will probably break in IE6 and IE7 as they double horizontal margins. You would have to use and override in ie6.css and ie7.css to sort that.
Title: Re: 2 column board
Post by: Neverhurry on January 12, 2010, 04:05:34 PM
in IE6 there is no change, it doesn't show 2 column boards.
Title: Re: 2 column board
Post by: Neverhurry on January 15, 2010, 04:16:55 PM
Because the childboards is a td itself I couldn't make it float, wouldn't it be more semantically correct to move it into another tbody or something?

Here add this to your css (it removes the childboards):

Code: [Select]
#boardindex_table tbody.content tr
{
display: none;
}

#boardindex_table tbody.content tr.windowbg2
{
width: 49.5%;
float: left;
margin-right: 0.5%;
margin-bottom: 0.5%;
display: block;
}

And if you want to show the child boards as well let me know and I'll send you another few template edits.

Yes, i want the child boards show, please help! Thanks!
Title: Re: 2 column board
Post by: BaghdadGhost on November 20, 2012, 08:42:05 PM
Because the childboards is a td itself I couldn't make it float, wouldn't it be more semantically correct to move it into another tbody or something?

Here add this to your css (it removes the childboards):

Code: [Select]
#boardindex_table tbody.content tr
{
display: none;
}

#boardindex_table tbody.content tr.windowbg2
{
width: 49.5%;
float: left;
margin-right: 0.5%;
margin-bottom: 0.5%;
display: block;
}

And if you want to show the child boards as well let me know and I'll send you another few template edits.

Wow! I tried it and it is beautiful!
Yes, I would like to show the child boards, so pls help! thank you so much.

this is great. thanks

I also would like to see the edit for child boards on message index


thanks

Title: Re: 2 column board
Post by: Hj Ahmad Rasyid Hj Ismail on November 20, 2012, 10:07:19 PM
Thanks BaghdadGhost. I won't find this if you didn't post. Very insteresting. This is what I am looking for for my next SimpleRevamp Version #2 theme BoardIndex & MessageIndex.
Title: Re: 2 column board
Post by: BaghdadGhost on November 20, 2012, 10:25:02 PM
Hey Ahmed,

It took me forever to find it  :P

I have been thinking of an idea similar to your website except to have 2 column sub-boards on top of a daily topics  :) as a home page. I think members will like it so much and it will make the forum more active.

hope someone could do the 2 column sub-boards in message index for us.