News:

Wondering if this will always be free?  See why free is better.

Main Menu

2 column board

Started by Neverhurry, January 10, 2010, 03:53:30 PM

Previous topic - Next topic

Neverhurry

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:

QuoteCat1
board1
board2
board3
board4

Cat2
board5
board6
board7
board8

to
QuoteCat1
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!
I am using SMF 2.0.1, curve themes.

Antechinus


Neverhurry

Quote from: 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.
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?
I am using SMF 2.0.1, curve themes.

Jerry

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.


- Jerry
Find me on:
Facebook
Twitter
PlanetSMF

"If all you look for is the negative in things, you will never see the positive."

forsakenlad

Well actually you can do this with CSS pretty easily. I'll post it after I have dinner.
Eren "forsakenlad" Yaşarkurt
SMF Friend & Former Team Member

Jerry

Quote from: 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.
oh nice :) Will be waiting for you to post then.


- Jerry
Find me on:
Facebook
Twitter
PlanetSMF

"If all you look for is the negative in things, you will never see the positive."

Neverhurry

Quote from: 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.

Gosh, you rock! it must be logically very beautiful, can not wait to see your post.
I am using SMF 2.0.1, curve themes.

Antechinus

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.

forsakenlad

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

#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.
Eren "forsakenlad" Yaşarkurt
SMF Friend & Former Team Member

Antechinus

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.

forsakenlad

Well maybe not but instead having them in seperate tbody's would ease customization a lot.
Eren "forsakenlad" Yaşarkurt
SMF Friend & Former Team Member

Antechinus


forsakenlad

No I meant not every cat but everyboard inludong that boards children.


Eren "forsakenlad" Yaşarkurt
SMF Friend & Former Team Member

Neverhurry

Quote from: 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):

#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.
I am using SMF 2.0.1, curve themes.

Antechinus

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.

Neverhurry

in IE6 there is no change, it doesn't show 2 column boards.
I am using SMF 2.0.1, curve themes.

Neverhurry

Quote from: 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):

#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!
I am using SMF 2.0.1, curve themes.

BaghdadGhost

Quote from: Neverhurry on January 12, 2010, 10:07:55 AM
Quote from: 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):

#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


Hj Ahmad Rasyid Hj Ismail

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.

BaghdadGhost

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.

Advertisement: