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. 
|
|
#82
09-27-2010, 02:52 PM
|
||||
|
||||
Quote:
Quote:
|
|
#83
09-27-2010, 04:24 PM
|
|||
|
|||
|
Hi Lynne, I found the problem and fixed it, this is why you are not seeing it any more, I was fixing tea for my children so haven't had time to get on until just now.
I fixed it by doing the following. forumbits.css FIND: Code:
.forumbit_post .forumstats li, .forumbit_post .forumstats_2 li{
font-size: {vb:stylevar mid_fontSize}{vb:stylevar font.units};
text-align: {vb:stylevar right};
padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}*2};
display:block;
}
Code:
padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}*2};
Code:
padding-{vb:stylevar right}: 5px;
|
|
#84
09-27-2010, 06:03 PM
|
||||
|
||||
|
Quote:
)
|
|
#85
10-28-2010, 06:37 PM
|
|||
|
|||
|
Lynne -
Thanks for the help in getting two subforums, side by side. Is there any easy way to get three to work? In my experience, that seems to be the optimal number you can use in order to condense all the vertical scrolling if you require a good number of forums and subforums. I used to have three but the subforum manager that did it now destroys validation and creates other problems when used. Having a third forum on a horizontal line would be indispensable - if you can help lead this old horse to water. Bummer - I just saw what you wrote above, LOL!!!! I will try out the code now! Confirmed... 33% works like a charm!
|
|
#86
11-06-2010, 07:13 PM
|
|||
|
|||
|
in 4.0.8 i did the same.
it is showing correctly. but above the footer area is not OK due to this CSS edits. Please someone guide me how to fix this ? screen shot is attached.
|
|
#87
11-06-2010, 08:15 PM
|
||||
|
||||
|
Quote:
|
|
#88
11-18-2010, 01:23 PM
|
|||
|
|||
|
Hi
Is there any way to add a sidebar on the threads page - showthread.php? Also, can a 3-column layout be created for the forum home page? I need the page to look like this: Thanks & Regards, Vinayak
|
|
#89
11-18-2010, 01:37 PM
|
||||
|
||||
|
Quote:
|
|
#91
12-02-2010, 03:28 AM
|
||||
|
||||
|
Hi Lynne
Great edits to the css...thanks. I have 3 questions: 1. How do I remove the text "Sub-forums"...is removing it from the template the only way? 2. Everyone says "it's ok, just add it to the "additional.css" template...do you know if this just builds up the final css making it bigger or is it always better to try and change the existing css templates? 3. Can you think of anyway that I can keep the "Threads/Posts" and "Last Post" but have the sub forums spread across the page...like this:? Attachment 124074 Thanks!
|
 |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
|
|
All times are GMT. The time now is 09:38 PM.