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
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. |
#152
|
||||
|
||||
It is possible that something else got altered in our customized styles but this part seemed so simple that I don't really see how.
Here is a link to the site to see what it looks like. http://mb.nawcc.org you do not need to be logged in the see the irregular formatting. |
#153
|
||||
|
||||
The only page I see the subforums listed in columns is on the main page. None of the forumdisplay pages have that, so I am not seeing any problem at all.
|
#154
|
||||
|
||||
I thought we were talking about the listing of subforums on the main page. That is what I was using your css for.
Since the upgrade the right hand columns do not align between categories. Before the upgrade all the right hand columns started on the same column position. I had thought that the ol 100% list followed by the 1i 50% width would control the alignment. The person who set up the styles for that display is no longer available, so maybe I just need to study it some more if you say it is unrelated to this css discussion. |
#155
|
||||
|
||||
Ah, I see what you mean. You said it differed from forum to forum and I thought you meant looking at one forum page (forumdisplay) versus another (cuz if you have subforums on those pages, then the code will align them on those pages also).
If you look at the page using firebug, you'll see that the width given to each of the <li> is different. You need to do something to set those to 100%. You'll have to play with it a bit cuz lists are a bit odd with CSS. |
#156
|
|||
|
|||
Thanks, just used this in one of our forums. Great help!
|
#157
|
|||
|
|||
Lynne - this is perhaps one of the most useful articles in the 10+ years I have been around. I can't tell you how much work it saves so many people trying to accomplish the same and used to do with awful plugins.
|
#158
|
||||
|
||||
I'm glad you found it useful.
|
#159
|
||||
|
||||
Hi Lynne,
Thanks for putting this code up. So i managed to split a specific category. This category has 30 forums in it. So i was thinking this code would split 15 on the left and 15 on the right. Instead it has done 12 on the left and 18 on the right. Any ideas on how to fix this? I've tried fiddling with some percentages, but i'm lost. Help would be appreciated thanks. |
#160
|
||||
|
||||
Quote:
|
#161
|
||||
|
||||
Quote:
The above image is only half of it. But still you see whats happened. This is the code i put in: Code:
#cat18 .forumhead + .childforum .L2:first-child .forumrow, .forumhead + .L2 .forumrow { border-top: 0; } #cat18 .forumrow .table { height: 100px; } #cat18 ol.childforum { float: left; width: 100%; margin: 0; padding: 0; } #cat18 .childforum li.forumbit_post { float: left; width: 50%; margin: 0; padding: 0; clear:none; } #cat18 #forums .L1 .L2 { clear:none; } #cat18 .forumbit_post .forumrow .forumlastpost { clear:both; width:95%; } #cat18 .forumbit_post .forumlastpost .lastpostby { display: block; float: left; } #cat18 .forumbit_post .forumlastpost .lastpostdate { display: block; float: right; } #cat18 .forumbit_post .forumlastpost .lastposttitle { display: block; float: left; } #cat18 .forumbit_post .foruminfo { clear:right; float:left; min-width:50%; width:70%; } #cat18 .forumbit_post .forumstats, .forumbit_post .forumstats_2 { width:20%; } |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|