vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=228484

[HOW TO - vB4] Two column forum/sub-forum setup via CSS only
by Lynne
20 Nov 2009 23:22

2 Attachment(s)
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:
https://www.vbulletin.org/forum/external/2011/02/16.jpg

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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):
http://www.vbulletin.org/forum/attac...1&d=1258910170

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.

ragtek 21 Nov 2009 06:57

You're the best!

Allan 21 Nov 2009 07:24

Congrats Lynne, very good article !

baghdad4ever 21 Nov 2009 08:46

thanks Lynne

good and pretty lesson

milsirhc 22 Nov 2009 00:39

Thanks Lynne!! Much appreciated!

thanks
by yaghoub
22 Nov 2009 09:25

very thanks luuny for this article you are the best .:up:

Zaiaku 22 Nov 2009 15:00

CSS only! You are the man!

Lynne 22 Nov 2009 15:17

Quote:

Originally Posted by Zaiaku (Post 1918891)
CSS only! You are the man!

Wo-man. :)


**edit** I added the css needed to make two columns for the Sub-Forums also.

Charlie98902 22 Nov 2009 17:08

I got it now Lynne & thanks. I didn't know that if you click on edit templates the .css files are listed there. :D

my forum
by yaghoub
22 Nov 2009 18:03

1 Attachment(s)
this cod not work well in persian and arabic forum .i modifid Lynnecode for persian and arabic forum and few cheng Lynne cod .show here. thanks big Lynne.
Attachment 106572

Brandon Sheley 22 Nov 2009 18:08

Great article Lynne!
thanks for the time to share it :)

Lynne 22 Nov 2009 18:24

Quote:

Originally Posted by yaghoub (Post 1919016)
this cod not work well in persian and arabic forum .i modifid Lynnecode for persian and arabic forum and few cheng Lynne cod .show here. thanks big Lynne.
Attachment 106572

As I said, you will have to style it yourself. It looks like you may want to change some of my float:right to float:left or vice-versa. You'll have to play with it to get it how you want it to look.

Charlie98902 22 Nov 2009 18:25

1 Attachment(s)
Lynne in this code:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

what needs editing to remove the commas? See pic.

Lynne 22 Nov 2009 19:03

Quote:

Originally Posted by Charlie98902 (Post 1919035)
what needs editing to remove the commas? See pic.

I really don't want to get into CSS in this thread. However, I added this one thing to the article.

Charlie98902 22 Nov 2009 19:52

Thank you figured that would of been an easy one.


All times are GMT. The time now is 19:45.

Powered by vBulletin® Version 3.8.12
Copyright © 2019, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.