Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
Reload this Page [HOW TO - vB4] Two column forum/sub-forum setup via CSS only
FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 13 of 22 « First 31112 13 1415 Last »
 
Thread Tools
[HOW TO - vB4] Two column forum/sub-forum setup via CSS only
Lynne's Avatar
Lynne
Join Date: Sep 2004
Posts: 41,180

 

California/Idaho
Show Printable Version Email this Page Subscription
Lynne Lynne is offline 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
File Type: png forum_css5.png (48.8 KB, 0 views)
File Type: png subforum_css1.png (43.9 KB, 0 views)
Reply With Quote
  #122  
Old 08-07-2011, 03:56 PM
setishock setishock is offline
 
Join Date: Feb 2008
Location: Houma, La.
Posts: 1,177
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Darlin' you rock! I found that code on another forum of dubious content. Now I know where they got it.
Is it possible to make the thread list in to 2 columns?
Reply With Quote
  #123  
Old 08-07-2011, 04:33 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by setishock View Post
Darlin' you rock! I found that code on another forum of dubious content. Now I know where they got it.
Is it possible to make the thread list in to 2 columns?
Sure, you could apply the same technique to the thread list on the forumdisplay pages.
Reply With Quote
  #124  
Old 08-30-2011, 04:11 PM
jmp51483 jmp51483 is offline
 
Join Date: Aug 2011
Posts: 5
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Is this known to be working still in 4.1.5? I applied the sub forum listing to the default template and saw no change. I added this to the additional.css file and the forumbits.css file...

Thanks!
Reply With Quote
  #125  
Old 08-30-2011, 04:46 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by jmp51483 View Post
Is this known to be working still in 4.1.5? I applied the sub forum listing to the default template and saw no change. I added this to the additional.css file and the forumbits.css file...

Thanks!
I just added the subforum css to the additional.css template in one of my 4.1.5 default styles and it worked just fine.
Reply With Quote
  #126  
Old 09-10-2011, 11:21 PM
techdeals07 techdeals07 is offline
 
Join Date: Aug 2008
Posts: 27
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by jmp51483 View Post
Is this known to be working still in 4.1.5? I applied the sub forum listing to the default template and saw no change. I added this to the additional.css file and the forumbits.css file...

Thanks!
Doesn't seem to work for me either on my 4.1.5 test site....
Reply With Quote
  #127  
Old 09-12-2011, 06:22 PM
techdeals07 techdeals07 is offline
 
Join Date: Aug 2008
Posts: 27
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by techdeals07 View Post
Doesn't seem to work for me either on my 4.1.5 test site....
Edit: Still works as intended on 4.1.5, I just didn't with the way my forums and sections were configured.
Reply With Quote
  #128  
Old 09-13-2011, 06:57 PM
Reece^B Reece^B is offline
 
Join Date: Jan 2006
Location: Essex
Posts: 406
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Using this CSS, can I replicate my existing look?
Attached Images
File Type: png Picture 12.png (79.8 KB, 0 views)
Reply With Quote
  #129  
Old 09-14-2011, 01:55 AM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Reece^B View Post
Using this CSS, can I replicate my existing look?
Using just CSS? No. You will need to do template edits also.
Reply With Quote
  #130  
Old 09-14-2011, 08:55 PM
Initial Z32 Initial Z32 is offline
 
Join Date: Sep 2011
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hello Lynne, I'm still new to CSS and have read through this entire thread and tried messing with the codes but cannot achieve the end result I am looking for.

This is how my forum looks now (default 4.1.5 and there are child forums within here):



This is how I want it to look (your second image in original post):



And this is what I get when I post the code in my additional css. window:



Could you please help me identify what I am doing wrong??

Thanks in advance, I really appreciate your time and help




ok so I read the original thread that this one derives from and got this code from Charlie's post:

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

I punched it into my forumbit.css and got a result similar to what I want:




But I would very much rather have two columns instead of one, hopefully this is an easier question to answer??


Side note, I have the Forum Listing Display Options > Depth of Sub-Forums set to "1" so that they will appear, it defaults to 0 so nothing will show unless I change it to 1...
Reply With Quote
  #131  
Old 09-14-2011, 11:03 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
You would need to post a link to your forum/style so we can see what is going on.
Reply With Quote
Reply
Page 13 of 22 « First 31112 13 1415 Last »

« Previous Thread | Next Thread »
Thread Tools

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 Jump


All times are GMT. The time now is 03:50 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05651 seconds
  • Memory Usage 2,344KB
  • Queries Executed 26 (?)
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
  • (5)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
  • (4)pagenav_pagelink
  • (1)pagenav_pagelinkrel
  • (11)post_thanks_box
  • (13)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (3)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)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