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. 
|
|
#163
07-25-2012, 03:37 PM
|
||||
|
||||
As I said, I need a link to the site/style in order to view the problem. I like to use firebug for CSS issues and I can't do that without a link to the site/style.
|
|
#164
07-30-2012, 05:40 PM
|
||||
|
||||
|
Quote:
Here is what the code looks like. html: HTML Code:
<li class="subforum"> <img id="forum_statusicon_291" class="inlineimg" border="0" alt="" src="images/statusicon/subforum_old-48.png"> <a href="forumdisplay.php?291-Moderator-Procedures-and-Training-Project">Moderator Procedures and Training Project</a> </li> Code:
.subforums ol.subforumlist {
float: left;
margin: 0;
padding: 0;
width: 100%;
}
.subforumlist li.subforum {
clear: none;
float: left;
margin: 0;
padding: 0;
width: 50%;
}
|
|
#165
08-06-2012, 07:54 AM
|
||||
|
||||
|
Quote:
http://abasketballjones.com/forum/forum.php?styleid=3 Hope that helps. Cheers Lynne
|
|
#166
08-06-2012, 04:03 PM
|
||||
|
||||
|
Quote:
|
|
#167
08-07-2012, 05:40 AM
|
||||
|
||||
|
Quote:
 Strange how it hasn't evenly split them 15 on the left and 15 on the right... Someone has created a mod that splits categories which is exactly what i want, but bad thing is, the mod hasn't been updated so you can't choose which one you want split... dammit
|
|
#168
08-14-2012, 12:36 AM
|
|||
|
|||
|
I'm on the same situation, so i'm trying to play with the codes to see if it fixes. And the problem is in the same side of the category, so there must be something on it or... something.
If I get to fix it earlier I'll let you know :P
|
|
#169
08-14-2012, 01:03 AM
|
||||
|
||||
|
Quote:
When I change it using firebug, the site looks fine.
|
|
#170
08-14-2012, 02:26 AM
|
|||
|
|||
|
Hi Lynne, i had the same problem as Dr Aj but I could fix it with that you said, but another issue came right after that one.
On the left side, the last forum looks like... deeper from the other ones, I dont really know how to describe it. Here, I leave you the link so you can check it by yourselve: http://forum.arsmagnum.com/forum.php it is at the "Anime & Manga" Category. Plus... Is there anyway that I can change that option of min-heigh only in one category? I've been trying but I dont know how
|
|
#171
08-14-2012, 03:58 PM
|
||||
|
||||
|
Quote:
#c_cat18 .forumbit_nopost .forumbit_nopost .forumrow, #c_cat18 .forumbit_post .forumrow {min-height: 105px;}
|
 |
«
Previous Thread
|
Next Thread
»
|
|
All times are GMT. The time now is 08:01 PM.