Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
[HOW TO - vB4] Two column forum/sub-forum setup via CSS only
Lynne
Join Date: Sep 2004
Posts: 41,180

California/Idaho
by Lynne Lynne is offline 20 Nov 2009
Rating: (4 votes - 4.75 average)

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


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


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.
Attached Images
File Type: png forum_css5.png (48.8 KB, 6791 views)
File Type: png subforum_css1.png (43.9 KB, 6494 views)

Last edited by Lynne; 18 Sep 2010 at 15:40..
Views: 49468
Reply With Quote
Comments
  #2  
Old 21 Nov 2009, 06:57
ragtek's Avatar
ragtek ragtek is offline
 
Join Date: Mar 2006
Location: austria, croatia
You're the best!
__________________
my addons: http://ragtek.github.com
Reply With Quote
  #3  
Old 21 Nov 2009, 07:24
Allan's Avatar
Allan Allan is offline
 
Join Date: Jun 2003
Real name: allan
Congrats Lynne, very good article !
__________________
-------------------------------------------------------------------------------------------
Administrator vBulletin-Ressources.com, French vBulletin Resources.
Reply With Quote
  #4  
Old 21 Nov 2009, 08:46
baghdad4ever baghdad4ever is offline
 
Join Date: May 2007
Real name: husam
thanks Lynne

good and pretty lesson
Reply With Quote
  #5  
Old 22 Nov 2009, 00:39
milsirhc's Avatar
milsirhc milsirhc is offline
 
Join Date: Jan 2007
Thanks Lynne!! Much appreciated!
Reply With Quote
  #6  
Old 22 Nov 2009, 09:25
yaghoub's Avatar
yaghoub yaghoub is offline
 
Join Date: Oct 2008
Real name: yaghoub
thanks

very thanks luuny for this article you are the best .
Reply With Quote
  #7  
Old 22 Nov 2009, 15:00
Zaiaku's Avatar
Zaiaku Zaiaku is offline
 
Join Date: Jul 2007
CSS only! You are the man!
__________________
Live everyday as if it was your last, because one day it just may be.
Reply With Quote
  #8  
Old 22 Nov 2009, 15:17
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Originally Posted by Zaiaku View Post
CSS only! You are the man!
Wo-man.


**edit** I added the css needed to make two columns for the Sub-Forums also.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)

Last edited by Lynne; 22 Nov 2009 at 17:07.
Reply With Quote
  #9  
Old 22 Nov 2009, 17:08
Charlie98902 Charlie98902 is offline
 
Join Date: Dec 2006
I got it now Lynne & thanks. I didn't know that if you click on edit templates the .css files are listed there.
Reply With Quote
  #10  
Old 22 Nov 2009, 18:03
yaghoub's Avatar
yaghoub yaghoub is offline
 
Join Date: Oct 2008
Real name: yaghoub
my forum

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.
screenshot3.jpg

Last edited by yaghoub; 22 Nov 2009 at 18:14.
Reply With Quote
  #11  
Old 22 Nov 2009, 18:08
Brandon Sheley's Avatar
Brandon Sheley Brandon Sheley is offline
 
Join Date: Mar 2005
Real name: Brandon
Great article Lynne!
thanks for the time to share it
__________________

Email me for website help: brandon[at]sheley[dot]org
Reply With Quote
  #12  
Old 22 Nov 2009, 18:24
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Originally Posted by yaghoub View Post
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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #13  
Old 22 Nov 2009, 18:25
Charlie98902 Charlie98902 is offline
 
Join Date: Dec 2006
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.
Attached Images
File Type: png subs.png (10.5 KB, 347 views)
Reply With Quote
  #14  
Old 22 Nov 2009, 19:03
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Originally Posted by Charlie98902 View Post
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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #15  
Old 22 Nov 2009, 19:52
Charlie98902 Charlie98902 is offline
 
Join Date: Dec 2006
Thank you figured that would of been an easy one.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 11:21.

Layout Options | Width: Wide Color: