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

		vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
[HOW TO - vB4] Two column forum/sub-forum setup via CSS only

Page 1 of 22

Last »

Thread Tools

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

Lynne

Join Date: Sep 2004

Posts: 41,180

California/Idaho

Lynne

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%;
}

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:

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:"";
}

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

	forum_css5.png (48.8 KB, 0 views)
	subforum_css1.png (43.9 KB, 0 views)

11-21-2009, 05:57 AM

ragtek

Join Date: Mar 2006

Location: austria, croatia

Posts: 1,630

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

You're the best!

11-21-2009, 06:24 AM

Allan

Join Date: Jun 2003

Location: France

Posts: 1,513

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Congrats Lynne, very good article !

11-21-2009, 07:46 AM

baghdad4ever baghdad4ever is offline

Join Date: Apr 2007

Location: baghdad

Posts: 443

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

thanks Lynne

good and pretty lesson

11-21-2009, 11:39 PM

milsirhc

Join Date: Jan 2007

Posts: 206

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Thanks Lynne!! Much appreciated!

11-22-2009, 08:25 AM

yaghoub

Join Date: Oct 2008

Posts: 61

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

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

11-22-2009, 02:00 PM

Zaiaku

Join Date: Jul 2007

Location: 3rd Level of Hell

Posts: 502

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

CSS only! You are the man!

11-22-2009, 02:17 PM

Lynne

Join Date: Sep 2004

Location: California/Idaho

Posts: 41,180

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Quote:

Originally Posted by Zaiaku

CSS only! You are the man!

Wo-man.

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

11-22-2009, 04:08 PM

Charlie98902 Charlie98902 is offline

Join Date: Dec 2006

Posts: 1,156

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

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

#10

11-22-2009, 05:03 PM

yaghoub

Join Date: Oct 2008

Posts: 61

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

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

Page 1 of 22

Last »

« Previous Thread | Next Thread »

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 Forum Rules

Forum Jump

All times are GMT. The time now is 04:13 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04705 seconds Memory Usage 2,322KB Queries Executed 24 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (2)bbcode_code (1)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_article (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)pagenav_pagelinkrel (10)post_thanks_box (13)post_thanks_box_bit (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (10)post_thanks_postbit_info (9)postbit (2)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!