vb.org Archive - [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.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01265 seconds Memory Usage 1,738KB 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 (2)bbcode_code_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)pagenav_pagelinkrel (1)post_thanks_navbar_search (1)printthread (10)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: