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 Community Calendar Today's Posts Search

Reply
Page 18 of 22 « First 81617 18 1920 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
  #172  
Old 08-14-2012, 05:08 PM
ArsMagnum ArsMagnum is offline
 
Join Date: Apr 2012
Posts: 35
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I tried with the min-height at 100px and it still looks odd.
I think the problem is always at the final space of the left column, couse I tried to create a new forum so there would be equal forums to divide, but the left one it looks always that way.
Might not be a code problem from the very Columns code?

I could change the large of only one category now, thanks for the help.
Reply With Quote
  #173  
Old 08-14-2012, 09:02 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I think you need to increase the min-height to 110px (at least for firefox). As for the last forum, I think it shows like that because you have borders for your forums. Notice how the right borders don't show for any of the left forums - it's because the right forums hide it.
Reply With Quote
  #174  
Old 08-14-2012, 11:58 PM
ArsMagnum ArsMagnum is offline
 
Join Date: Apr 2012
Posts: 35
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Its all done.
Thanks for the help Lynne. It looks great!
Reply With Quote
  #175  
Old 08-15-2012, 05:59 AM
Dr Aj642's Avatar
Dr Aj642 Dr Aj642 is offline
 
Join Date: Apr 2009
Posts: 49
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by ArsMagnum View Post
Hi Lynne, i had the same problem as Dr Aj but I could fix it with that you said, but another issue came right after that one.

On the left side, the last forum looks like... deeper from the other ones, I dont really know how to describe it.
Here, I leave you the link so you can check it by yourselve:

http://forum.arsmagnum.com/forum.php

it is at the "Anime & Manga" Category.

Plus... Is there anyway that I can change that option of min-heigh only in one category? I've been trying but I dont know how
Quote:
Originally Posted by Lynne View Post
I still see the min-height set at 58px.

When I change it using firebug, the site looks fine.
Quote:
Originally Posted by Lynne View Post
You have your min-height set to 95px, I think it needs to be larger. If you only want it for that one category, then use the category id:

#c_cat18 .forumbit_nopost .forumbit_nopost .forumrow, #c_cat18 .forumbit_post .forumrow {min-height: 105px;}
Had to set it for one category! Fixed now. Cheers Lynne
Reply With Quote
  #176  
Old 08-16-2012, 08:13 PM
ProFifaLeagues's Avatar
ProFifaLeagues ProFifaLeagues is offline
 
Join Date: Aug 2009
Location: Uk
Posts: 1,191
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by ArsMagnum View Post
Hi Lynne, i had the same problem as Dr Aj but I could fix it with that you said, but another issue came right after that one.

On the left side, the last forum looks like... deeper from the other ones, I dont really know how to describe it.
Here, I leave you the link so you can check it by yourselve:

http://forum.arsmagnum.com/forum.php

it is at the "Anime & Manga" Category.

Plus... Is there anyway that I can change that option of min-heigh only in one category? I've been trying but I dont know how

any chance of a step by step write up on how you get the Forums looking that way Sir please?
Looks Superb :up:
Reply With Quote
  #177  
Old 08-22-2012, 08:27 AM
Kirk Fitzgerald's Avatar
Kirk Fitzgerald Kirk Fitzgerald is offline
 
Join Date: Apr 2012
Location: Oxford, UK
Posts: 139
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Lynne View Post
It looks like they just changed the class names from childforum to forumbits. I haven't done much checking, but I changed the name real quick and it seemed to work:
Code:
.forumbits ol {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.forumbits li.forumbit_post {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  clear:none;
}
Exactly what I came here today to ask about, thank you for posting this answer Lynne, most helpful, I tried to like your post but it says I can't like it, guess the post was too old, so thanks and consider it liked.
Reply With Quote
  #178  
Old 09-08-2012, 04:11 PM
HFCloud HFCloud is offline
 
Join Date: Jan 2009
Posts: 58
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hi,

Can someone do this for me? I'm so confused with this!
Reply With Quote
  #179  
Old 09-14-2012, 04:34 AM
nezr's Avatar
nezr nezr is offline
 
Join Date: Jun 2011
Posts: 52
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Is it possible to have 4 forum/subforum in a row?
Reply With Quote
  #180  
Old 11-16-2012, 10:20 PM
Reece^B Reece^B is offline
 
Join Date: Jan 2006
Location: Essex
Posts: 406
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Lynne View Post
It looks like they just changed the class names from childforum to forumbits. I haven't done much checking, but I changed the name real quick and it seemed to work:
Code:
.forumbits ol {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.forumbits li.forumbit_post {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  clear:none;
}
I used the childforum (post 1) and that worked, when I used this update it stopped?

However my problem is when I added cat51 it didn't change just that category, but all. Am I right in thinking it goes in just 1 place?
Reply With Quote
  #181  
Old 11-16-2012, 11:54 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Could have been you wrote the CSS incorrectly. It's hard to tell without you post the exact CSS you wrote, tell us where you added it, and give us a link to the page that should use it.
Reply With Quote
Reply
Page 18 of 22 « First 81617 18 1920 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 Jump


All times are GMT. The time now is 07:56 AM.

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.05759 seconds
  • Memory Usage 2,353KB
  • 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
  • (4)bbcode_code
  • (6)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
  • (2)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