• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

[HOW TO - vB4] Two column forum/sub-forum setup via CSS only

Admin

Well-Known Member
Staff member
Administrator
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):

.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:

.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):
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.
 

Facebook Comments

Similar threads
Thread starter Title Forum Replies Date
Admin Yilmaz - Quote Read More vB4 Add-ons 0
Admin [DBTech] DragonByte Classifieds v1 (vB4) Add-ons 0
Admin ibProArcade Navbar vb4.2 Add-ons 0
Admin [DBTech] Two-Factor Authentication (vB4) Add-ons 0
Admin [DBTech] Twitch.Tv Integration (vB4) Add-ons 0
Admin Mark Threads Unread (vB4) Add-ons 0
Admin Missing Style Chooser In vB4 Styles Vbb tutorial 0
Admin [DBTech] Tweet Poster v1 (vB4) Add-ons 0
Admin [DBTech] vB Optimise v2 (vB4) 2.5.3 Add-ons 0
Admin [DBTech] Original Poster In Postbit v1 (vB4) Add-ons 0
Admin [DBTech] Default Staff Signature v1 (vB4) Add-ons 1
Admin [DBTech] Download Button In Attachments v1 (vB4) Add-ons 0
Admin [DBTech] Username Change v1 (vB4) Add-ons 0
Admin [DBTech] vBSuper PM's - Private Message Manager v1 (vB4) Add-ons 0
Admin [DBTech] Banned From Reporting (vB4) Add-ons 0
Admin [DBTech] Logo Rotation v1 (vB4) Add-ons 0
Admin [DBTech] vBSearch Log v1 (vB4) Add-ons 0
Admin [DBTech] Guest PM Notice (vB4) Add-ons 0
Admin VB4 - Mobile Phone / iPhone / PDA Detection and Style Assignment Add-ons 7
Admin [DBTech] Redirect Banned Users v1 (vB4) Add-ons 0
Admin Alternative Breadcrumbs for your vB4 Add-ons 0
Admin [DBTech] Advanced Censor Options v1 (vB4) Add-ons 0
Admin [DBTech] Member Map (vB4) Add-ons 0
Admin Block Censored Words in Posts by BOP5 VB4 Add-ons 0
V Bring Back "Go" Button for VB4 by BOP5 (ForumJump/Quick Navigation menu) Vbulletin 0
S Automatic thread tagger for vb4 Vbb tutorial 0
Admin Step by Step guide to speed up your VB4 OR VB3 Add-ons 0
Admin ChangUonDyU Advanced Statistics VB4 6.0.1 Add-ons 0
Admin General Forum Info VB4 Add-ons 0
Admin vB4 Live Topic by LancerForHire, LLC. Add-ons 0
Admin VB4.xx floating film strip for the Forum Home Add-ons 0
Admin vB4 Error Pages Add-ons 0
Admin [DBTech] Dragonbyte Gallery v1 (vB4) Add-ons 0
Admin [DBTech] Advanced @User Tagging v3 (vB4) Add-ons 0
Admin [DBTech] DragonByte vBForms v1 (vB4) Add-ons 0
Admin [DBTech] vBArcade (vB4) Add-ons 0
Admin [DBTech] vBNavTabs - Navbar Tabs / Tab Management v1 (vB4) Add-ons 0
Admin IPB3 Style to vB4 Style vbb 1
Admin vB Optimise v2 (vB4) Add-ons 2
Admin [vB4 Admin Style] violet Style vbb 0
Admin Change Threads/Posts Owner/Date for vB4 Add-ons 0
Admin Must Vote in Poll to Post in Thread VB4 Add-ons 2
Admin [DBTech] vBActivity & Awards v3 (vB4) Add-ons 0
Admin Clean 3 Column Custom Field Lists xenforo 2 Xenforo 0
Admin How to error MySQL Error : Unknown column '0Array' in 'where clause' Error Number : 1054 Vbb tutorial 0
Admin Hướng dẫn fix lỗi MySQL Error : Unknown column 'vbcmspermissions' in 'field list' Error Number : 1054 Vbb tutorial 0
hungdanchoi5 Forum Xenforo Thảo luận chung 1
Admin Yilmaz -Tabbed (AJAX) Advanced Forum Stats Add-ons 0
Admin Yilmaz - Channel Description Per Forum Page vB5 Add-ons 0
Admin Convert a suggestion forum to XF 2.2 Suggestion Type Forum Xenforo 0

Similar threads

New posts New threads New resources

Back
Top