The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
|||||||
|
[HOW TO - vB4] Two column forum/sub-forum setup via CSS only
 Lynne
Join Date: Sep 2004
Posts: 41,180
California/Idaho
11-20-2009, 10:00 PM
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:  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%;
}
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:"";
}
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. 
|
|
#33
12-28-2009, 04:47 PM
|
|||
|
|||
Thank you for the tip Lynne!
Works perfectly now. You are the wo-man  Regards, Haothiencz
|
|
#36
01-18-2010, 06:45 PM
|
||||
|
||||
|
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.
|
|
#39
01-31-2010, 03:08 PM
|
||||
|
||||
|
Quote:
Code:
.forumbit_nopost .forumhead span.forumlastpost, .forumbit_post .forumhead span.forumlastpost {display:none;}
|
|
#40
02-26-2010, 11:55 AM
|
|||
|
|||
|
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.  You can see all areas of concern boxed in with comments so there is no confusion.  Thanks Steve
|
|
#41
02-27-2010, 08:37 PM
|
|||
|
|||
|
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!
|
 |
«
Previous Thread
|
Next Thread
»
|
|
All times are GMT. The time now is 08:43 PM.