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 14 of 22 « First 41213 14 1516 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
  #132  
Old 09-14-2011, 11:10 PM
Initial Z32 Initial Z32 is offline
 
Join Date: Sep 2011
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
www.bavarianmotorworkz.com the style im using is the default one called "Dark"

This is my forumbit:

Quote:
@charset "UTF-8";
/* CSS Document */

#forums {
clear:both;
}

.forumhead {
background: {vb:stylevar forumhead_background};
_background-image: none;
padding: 0;
font:{vb:stylevar forumhead_font};
color:{vb:stylevar forumhead_color};
clear:both;
margin-top: 8px;
float: {vb:stylevar left};
border: {vb:stylevar forumhead_border};
width: 100%;
-moz-border-radius-top{vb:stylevar right}: {vb:stylevar forumhead_top_corner_radius};
-moz-border-radius-top{vb:stylevar left}: {vb:stylevar forumhead_top_corner_radius};
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
-webkit-border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
}

#forums .L1 .forumhead a {
font: {vb:stylevar forumhead_font};
}

#forums .L1 .forumhead .forumdescription {
display:none;
}

#forums .L1 .L2 {
display:block;
clear: both;
}

#forums a.username {
color: {vb:stylevar link_color};
}

#forums a.username:hover {
color: {vb:stylevar linkhover_color};
}

.forumbit_post .forumrow, .forumbit_nopost .forumhead, .forumbit_nopost .forumrow, .forumbit_post .forumhead, .forumbits .forumhead {
-moz-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
}

.forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow {
background: {vb:stylevar forumrow_background};
_background-image: none;
display:block;
width: 100%;
float: {vb:stylevar left};
min-height: {vb:math {vb:stylevar forumicon_size}+{vb:stylevar padding}}; /* 48px is the icon size */
position:relative;
border-bottom: {vb:stylevar forumbits_border};
border-{vb:stylevar left}: {vb:stylevar forumbits_border};
border-{vb:stylevar right}: {vb:stylevar forumbits_border};
}

.forumbit_nopost .forumbit_nopost .forumrow .forumicon {
position: absolute;
{vb:stylevar left}: {vb:stylevar padding};
top: {vb:math {vb:stylevar padding}/2};
width: {vb:stylevar forumicon_size};
}

.forumbit_nopost .forumbit_nopost .forumrow .forumdata {
display: inline-block;
width:100%;
}

.forumbit_nopost .forumbit_nopost .forumrow .forumdata .datacontainer {
margin-{vb:stylevar left}: {vb:math {vb:stylevar forumicon_size} + {vb:math {vb:stylevar padding}*2}};
}

.forumbit_nopost .forumbit_post .forumrow .forumdata .datacontainer {
margin-{vb:stylevar left}: 0;
}

/* forumbit nopost */
.forumbit_post .foruminfo .forumdata {
padding: {vb:math {vb:stylevar padding}/2-1} 0;
font-size: {vb:math {vb:stylevar font.fontSize}-1}px;
}

.forumbit_nopost .forumhead .forumtitle {
font-size: {vb:stylevar font.fontSize};
min-width: 76%;
}

.forumbit_nopost .forumhead .forumtitle a {
color: {vb:stylevar forumhead_color};
margin-{vb:stylevar left}: {vb:stylevar padding};
}

.forumbit_nopost .forumhead span, .forumbit_post .forumhead span {
font-size: {vb:math {vb:stylevar font.fontSize}-1}px;
}

.forumbit_nopost .forumhead span.forumlastpost, .forumbit_post .forumhead span.forumlastpost {
width: 21%;
}

.forumbit_nopost .forumhead a.collapse img {
/* values are based on the image */
position:absolute;
top: -{vb:math {vb:stylevar padding} * 1.5};
{vb:stylevar right}: -{vb:math {vb:stylevar padding} * 0.6};
display:block;
width:13px;
height:13px;
overflow:hidden;
float: {vb:stylevar right};
clear: {vb:stylevar left};
}

.forumbit_nopost:hover .forumhead a.collapsegadget {
visibility:visible;
}

.forumbit_nopost .forumbit_nopost .forumrow .forumdata, .forumbit_post .forumrow .forumdata {
padding: {vb:math {vb:stylevar padding}/2} {vb:stylevar padding};
padding-{vb:stylevar left}: 0;
font-size: {vb:stylevar small_fontSize};
}

.forumbit_nopost .forumbit_nopost .foruminfo .subforums {
margin-{vb:stylevar left}: {vb:stylevar padding};
position: relative;
top: -{vb:stylevar padding};
}

/* forumbit post */
.forumbit_post {
float: {vb:stylevar left};
position:relative;
width: 100%;
display:block;
}

.forumbit_post .forumhead span {
padding: 0;
}

.forumbit_post .forumhead .forumlastpost {
top: 0;
margin-top: 0;
}

.forumbit_post .foruminfo, .forumbit_post .forumlastpost, .forumbit_post .forumactionlinks, .forumbit_post .forumstats, .forumbit_post .forumstats_2{
padding: {vb:math {vb:stylevar padding}/2} 0;
}

.forumbit_post .forumhead .forumtitle {
width: 76%;
}

.forumbit_post .forumhead .forumtitle span {
padding: 0;
padding-{vb:stylevar left}: {vb:stylevar padding};
}

.forumbit_post .foruminfo {
width: 57%;
min-width: 30%;
float: {vb:stylevar left};
clear: {vb:stylevar right};
min-height: {vb:stylevar forumicon_size};
}

.forumbit_post .foruminfo .forumicon{
position: absolute;
{vb:stylevar left}: {vb:stylevar padding};
width: {vb:stylevar forumicon_size};
}

.forumbit_post .foruminfo .forumdata, .forumbit_post .foruminfo .forumtitle, .forumbit_post .foruminfo .viewing {
float: {vb:stylevar left};
clear: {vb:stylevar right};
color: {vb:stylevar forumbits_text_color};
}

.forumbit_post .foruminfo .viewing {
white-space:nowrap;
}

.forumbit_post .foruminfo .forumdata {
padding: 0;
width: 100%;
_width: 99%;
}

.forumbit_post .foruminfo .forumdata .datacontainer {
float: {vb:stylevar left};
width: 88%;
padding-{vb:stylevar left}: {vb:math {vb:stylevar forumicon_size} + {vb:math {vb:stylevar padding}*2}};
}

.forumbit_post .foruminfo .forumdata .forumtitle, .forumbit_nopost .forumbit_nopost .forumrow .forumtitle {

font-size: {vb:stylevar font.fontSize}px;
margin-{vb:stylevar right}: {vb:stylevar padding};
}

.forumbit_post .foruminfo .forumdata .forumtitle a, .forumbit_nopost .forumbit_nopost .forumrow .forumtitle a {
font-weight:bold;
}

.childsubforum .forumbit_post .foruminfo .forumdata .datacontainer .forumtitle a {
padding-{vb:stylevar left}:1.8em;
background:url('{vb:stylevar imgdir_misc}/child_forum.png') top {vb:stylevar left} no-repeat;
}

.forumbit_post .foruminfo .forumdata .viewing {
font-style: italic;
margin-{vb:stylevar right}:{vb:stylevar padding};
margin-top: 3px;
font-size: {vb:math {vb:stylevar font.fontSize}-2}px;
}

.forumbit_post .forumactionlinks {
width: 5%;
display:block;
float:{vb:stylevar left};
clear:{vb:stylevar right};
}

.forumbit_post .forumactionlinks li {
display: inline;
}

.forumbit_post .forumactionlink {
/* values based on icon size */
display:block;
width:18px;
height:12px;
overflow:hidden;
float: {vb:stylevar right};
clear: {vb:stylevar left};
background:transparent none no-repeat;
position: relative;
margin: 3px {vb:stylevar padding} 0 0;
}

.forumactionlink a {
/* values based on icon size */
display:block;
padding-{vb:stylevar left}:18px;
}

.forumactionlinks .rsslink {
background-image:url({vb:stylevar imgdir_misc}/rss_40b.png);
}

.forumactionlinks .subslink {
background-image:url({vb:stylevar imgdir_misc}/subscribed_40b.png);
}
.forumactionlinks .unsubslink {
background-image:url({vb:stylevar imgdir_misc}/unsubscribed_40b.png);
}
.forumbit_post .forumdescription {
display:block;
clear:both;
padding-{vb:stylevar right}: {vb:stylevar padding};
}

.forumbit_post .unsubscribe {
display:block;
{vb:stylevar right}: 0;
top: 2px;
}

.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
display: block;
float: {vb:stylevar left};
clear: {vb:stylevar right};
width: 12%;
margin-{vb:stylevar right}: 2%;
}

.forumbit_post .forumstats li, .forumbit_post .forumstats_2 li{
font-size: {vb:stylevar mid_fontSize};
text-align: {vb:stylevar right};
padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}*2};
display:block;
}


.forumbit_post .forumlastpost {
display:block;
float: {vb:stylevar left};
clear: {vb:stylevar right};
}

.forumbit_post .forumrow .forumlastpost {
width: 22%;
font-size: {vb:stylevar mid_fontSize};
padding-top: {vb:math {vb:stylevar padding}/2};
}

.forumbit_post .forumlastpost .lastpostdate {
font-size: {vb:stylevar small_fontSize};
}

.lastpostlabel {
display: none;
}

.moderators, .subforums {
display: block;
clear:both;
}

.moderators h4, .subforums h4 {
font-weight: bold;
padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}/2};
}

.moderators h4, .moderators .commalist, .subforums h4, .subforums .commalist {
float:{vb:stylevar left};
clear:{vb:stylevar right};
}

/* Project Tools Forum Display */
.forumstats dt {
display: inline;
margin-{vb:stylevar right}: 0;
}

.forumstats dl {
color: {vb:stylevar body_color};
font-size: {vb:stylevar mid_fontSize};
display: block;
text-align: {vb:stylevar right};
}

.forumstats dd {
display: inline-block;
padding-{vb:stylevar left}: {vb:stylevar padding};
padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}*2};
}

.forumstats dt:after {
content:":";
}
.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:"";
}"
and my additional.css is blank...
Reply With Quote
  #133  
Old 09-15-2011, 02:01 AM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Your sub-forums are going in a single column because of the <br> you have in the template "forumhome_subforumseparator_post"
Reply With Quote
  #134  
Old 09-15-2011, 04:47 AM
Initial Z32 Initial Z32 is offline
 
Join Date: Sep 2011
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Lynne View Post
Your sub-forums are going in a single column because of the <br> you have in the template "forumhome_subforumseparator_post"
I <3 you sooooooooooooooooooooooooooooooooooooooooooo much right now!!!!
Reply With Quote
  #135  
Old 09-22-2011, 08:03 PM
Comp Comp is offline
 
Join Date: Dec 2006
Posts: 16
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
how can I do this with 3.8.x series?
Reply With Quote
  #136  
Old 09-23-2011, 02:25 PM
Buray Savas ANI Buray Savas ANI is offline
 
Join Date: Jul 2011
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Nice, thank you.

--------------- Added [DATE]1316793103[/DATE] at [TIME]1316793103[/TIME] ---------------

Thank you for article.
Reply With Quote
  #137  
Old 12-03-2011, 12:09 PM
my123world's Avatar
my123world my123world is offline
 
Join Date: Aug 2010
Location: -| Heart of vB |-
Posts: 115
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default


How Can I Remove This? Lynne... Please Help!
Reply With Quote
  #138  
Old 12-03-2011, 06:16 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
That is not a CSS question that deals with this thread. You should ask that out in the main forums and also post a link to your page so people can see what you are talking about.
Reply With Quote
  #139  
Old 12-05-2011, 01:20 AM
JMEWLS` JMEWLS` is offline
 
Join Date: Dec 2007
Posts: 362
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Can you do this for specific categories?
Reply With Quote
  #140  
Old 12-05-2011, 03:54 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 JMEWLS` View Post
Can you do this for specific categories?
If you add the category id to the beginning of the class, yes.
Reply With Quote
  #141  
Old 12-05-2011, 04:18 AM
JMEWLS` JMEWLS` is offline
 
Join Date: Dec 2007
Posts: 362
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
How would I go about this, sorry.

--------------- Added [DATE]1323065536[/DATE] at [TIME]1323065536[/TIME] ---------------

Am I able to use conditionals for forums?

So.. for example...
Code:
<vb:if condition="in_array($forum['forumid'], array(1,2,3))">
CSS HERE
</vb:if>
Reply With Quote
Reply
Page 14 of 22 « First 41213 14 1516 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 05:36 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.05070 seconds
  • Memory Usage 2,361KB
  • 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
  • (3)bbcode_code
  • (3)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