vb.org Archive - [HOW TO - vB4] Two column forum/sub-forum setup via CSS only

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)

- - [HOW TO - vB4] Two column forum/sub-forum setup via CSS only (https://vborg.vbsupport.ru/showthread.php?t=228484)

[HOW TO - vB4] Two column forum/sub-forum setup via CSS only

This is just a quick writeup of the very basics to achieve a two column setup for your forums through only the use of CSS - no template modifications or plugins required. (Original thread requesting this infomation is here.)

I am NOT going to be teaching CSS is this article! You WILL need to have some basic understanding of what Cascading Style Sheets are all about in order to further change this since this is only the basics to put stuff in position with no padding or margins or any other styling applied - that is up to you to do.

This was written during the beta3/beta4 testing and may need to be modified for use with other versions since classes may be changed as the style has not been finalized yet. This was written to work with the default style and default stylevars (default at this time, that is). If you have customized your style in any way, you may have to change this a bit to work with your style. These classes also only apply to the forum home page but can easily be modified (by you!) to work on the forumdisplay pages and to work only for certain categories.

Making the browser width small may change things, or if you have long descriptions or sub-forums listed or moderators listed, you may have to change the CSS to accommodate that. As I said, this in ONLY AN OUTLINE of what you need to do. You will have to add styling information yourself.

This is basically what you will end up with:
https://vborg.vbsupport.ru/external/2011/02/16.jpg

The very basics of what to do
Add this to the additional.css template - it must be added *after* any other definitions regarding these sub-forums have been declared - if you don't understand why that is, then please read up on exactly what Cascading Style Sheets are all about):

Code:

.forumhead + .childforum .L2:first-child .forumrow, .forumhead + .L2 .forumrow {

  border-top: 0;

}

.forumrow .table {

  height: 100px;

}

ol.childforum {

  float: left;

  width: 100%;

  margin: 0;

  padding: 0;

}

.childforum li.forumbit_post {

  float: left;

  width: 50%;

  margin: 0;

  padding: 0;

  clear:none;

}

#forums .L1 .L2 {

  clear:none;

}

.forumbit_post .forumrow .forumlastpost {

  clear:both;

  width:95%;

}

.forumbit_post .forumlastpost .lastpostby {

  display: block;

  float: left;

}

.forumbit_post .forumlastpost .lastpostdate {

  display: block;

  float: right;

}

.forumbit_post .forumlastpost .lastposttitle {

  display: block;

  float: left;

}

.forumbit_post .foruminfo {

  clear:right;

  float:left;

  min-width:50%;

  width:70%;

}

.forumbit_post .forumstats, .forumbit_post .forumstats_2 {

  width:20%;

}

This same concept can be applied to any list in the style. For instance, you can change the listing of sub-forums under the Sub-Forums listing on the main page also with just a couple of lines:

Code:

.subforums ol.subforumlist  {

  float: left;

  width: 100%;

  margin: 0;

  padding: 0;

}

.subforumlist li.subforum {

  float: left;

  width: 50%;

  margin: 0;

  padding: 0;

  clear:none;

}

/* to remove the commas */

.commalist li.subforum:after {

    content:"";

}

Those lines will get you this (this shows it with commas, add the code under the "to remove the commas" comment and you will not have commas):
https://vborg.vbsupport.ru/attachmen...1&d=1258910170

Again, this article is NOT about teaching you CSS. You will have to style this yourself and also make any other changes necessarily because of customized styles or changes after beta 4.

Congrats Lynne, very good article !

thanks Lynne

good and pretty lesson

Thanks Lynne!! Much appreciated!

very thanks luuny for this article you are the best .:up:

CSS only! You are the man!

Quote:

Originally Posted by Zaiaku (Post 1918891)

CSS only! You are the man!

Wo-man. :)

**edit** I added the css needed to make two columns for the Sub-Forums also.

I got it now Lynne & thanks. I didn't know that if you click on edit templates the .css files are listed there. :D

this cod not work well in persian and arabic forum .i modifid Lynnecode for persian and arabic forum and few cheng Lynne cod .show here. thanks big Lynne.
Attachment 106572

Great article Lynne!
thanks for the time to share it :)

Quote:

Originally Posted by yaghoub (Post 1919016)

this cod not work well in persian and arabic forum .i modifid Lynnecode for persian and arabic forum and few cheng Lynne cod .show here. thanks big Lynne.
Attachment 106572

As I said, you will have to style it yourself. It looks like you may want to change some of my float:right to float:left or vice-versa. You'll have to play with it to get it how you want it to look.

Lynne in this code:

Code:

.subforums ol.subforumlist  {

  float: left;

  width: 100%;

  margin: 0;

  padding: 0;

}

.subforumlist li.subforum {

  float: left;

  width: 50%;

  margin: 0;

  padding: 0;

  clear:none;

}

what needs editing to remove the commas? See pic.

Quote:

Originally Posted by Charlie98902 (Post 1919035)

what needs editing to remove the commas? See pic.

I really don't want to get into CSS in this thread. However, I added this one thing to the article.

Thank you figured that would of been an easy one.

My Forume White Both Code

I'm sorry, but I don't know what I am supposed to see in those images. It looks like the css worked - you have the two forums side-by-side and the sub-forums lined up in two columns. That is all this article shows you how to do. I do no other styling in here - I said that was up to you to do.

heloo lynne . Now I can not tell you how this done because I'm traveling. Two days later the write article . and i can remove (,) the end of sub forum .screnshot . . excuseme my master. ;):up:

Is it also possible to have only some forums with 2 columns and some with 1?

Thanks for the CSS!

I tried on my forum and I'm still struggling to get it right.

Some of the forums look OK but some are way out, like the screenshot I attached below.

Quote:

Originally Posted by milsirhc (Post 1920048)

Thanks for the CSS!

I tried on my forum and I'm still struggling to get it right.

Some of the forums look OK but some are way out, like the screenshot I attached below.

Perhaps the height of the .forumrow? I really don't know. As I said, my css works fine on a default style. If you have already tweaked yours, then you may have to tweak the css I posted also.

Quote:

Originally Posted by ragtek (Post 1919939)

Is it also possible to have only some forums with 2 columns and some with 1?

Of course. You can use the ids in there to only apply it to some forums. CSS is very flexible and vB did a great job with ids for all major sections/divs.

I think I love you!!

The best ever, you are!

Quote:

Originally Posted by milsirhc (Post 1920048)

Thanks for the CSS!

I tried on my forum and I'm still struggling to get it right.

Some of the forums look OK but some are way out, like the screenshot I attached below.

i am master in css and php .for this problem you must creat the forume similar for exampel in the movies forum You have given Description forum and for other forums did not have Description . so you must remove Description or you have given for other forum to solved this problem . your subforum should be matches of Number of rows

--------------- Added [DATE]1259129620[/DATE] at [TIME]1259129620[/TIME] ---------------

If you have any problem in css and php and disigne your templat contact me as I value the right to solve it

This is terrific. I'll have use for this.

I wonder if you would consider going into more detail on this just working for a particular category or specified group of forums. I haven't yet figured this out.

Quote:

Originally Posted by Alien (Post 1927572)

If you look at your page source, you'll see that all the different categories/forums have their own ids (id="xxx"). So, you can append that to the front of the css and have it only apply to those categories/forums. So, for instance, if you just want it applied to stuff in category 3, or cat3 is the id, then instead of:

HTML Code:

ol.childforum {

 .....

}

You would do:

HTML Code:

#cat3 ol.childforum  {

 .....

}

Then that particular CSS isn't applied to every ol.childforum, but only to those that also have the id cat3.

The best thing to do to understand how it works is to take some time to read up on it.

Thank you for sharing Lynne!

Can you have me with two question below?

http://img9.imageshack.us/img9/5776/lyn.png

PS: the space betwwen "icon go to the last post" and the thread starter

Thank you for your help

You just need to play with the css to get the spacing how your want it. Different forums have different values set in their stylevars, thus you can't just post a generic answer for that (and thus why I didn't address it at all in my sample css code). Play with it in firebug.

that's a great thing

how i can make 3 columns? any idea?

Quote:

Originally Posted by halino (Post 1940530)

that's a great thing

how i can make 3 columns? any idea?

Just change the width in .childforum li.forumbit_post to 33%.

Once again,

I couldnt find any css relating to make

Code:

the space betwwen "icon go to the last post" and the thread starter

wider in forumhome, it looks like template edit but I cant find it anywhere..

Can you help me with this Lynne ?

Thank you

Did you try just giving some left padding or margin to .lastpostby?

Thank you for the tip Lynne!

Works perfectly now. You are the wo-man :D

Regards,
Haothiencz

It actually shows up fine on my IE7 setup (I run parallels on my mac). However, I do notice that as you widen/shorten the width of the browser, it will blink back and forth between working and not working. I don't know what's up with that. I set it to 49.99% and it looked fine then, so try that.

wow Lynne, thank you very much :up:

Nice mod. Thanks. Is there a way to remove Last Post appearing on horizontal category bar?

http://i49.tinypic.com/rcox8x.jpg

Quote:

Originally Posted by peril (Post 1971327)

Nice mod. Thanks. Is there a way to remove Last Post appearing on horizontal category bar?

You could try just setting the display to none:

Code:

.forumbit_nopost .forumhead span.forumlastpost, .forumbit_post .forumhead span.forumlastpost {display:none;}

Lynne:

Got a few problems as well I can't figure out how to move the Threads and Posts part up at the end of the forum title line.

Anyway, here you go.

I have altered the layout to be 2 columns, but the problem I have ran into is spacing issues in a few spots. I'm not sure what to check to change it or see if something is causing it.

Currently the category header has the category title centered but not immediately centered like it should be. So I am wondering which template controls that aspect. (View screenshot)

Spacing for subscribe image is wrong and not sure how that is when it is ready the same thing and the description is dropped to a new line for the left forum early enough but not for the right forum.

Spacing after my last post box to the right is a huge margin, I want it to only be 10px margin to the right but I have no idea what is defining the space there.

https://vborg.vbsupport.ru/external/2010/02/1.jpg

You can see all areas of concern boxed in with comments so there is no confusion. :)

Thanks
Steve

Hi lynne!
That i find very nice for my forum but there is a problem more:
To many people in the world still using 15' monitors and in the resolution of 1024x768 the forum with your css editlooks not fine if the side bar is enabled.
The subcribe and rss images and the forum title going all together and looks very bad.If you fix that it will be very nice edit and i will use.

Thanks for sharing!

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.03664 seconds Memory Usage 1,833KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (2)bbcode_html_printable (9)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: