vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)
-   -   [HOW TO - vB4] Two column forum/sub-forum setup via CSS only (https://vborg.vbsupport.ru/showthread.php?t=228484)

Initial Z32 09-14-2011 11:10 PM

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

Lynne 09-15-2011 02:01 AM

Your sub-forums are going in a single column because of the <br> you have in the template "forumhome_subforumseparator_post"

Initial Z32 09-15-2011 04:47 AM

Quote:

Originally Posted by Lynne (Post 2246138)
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!!!!

Comp 09-22-2011 08:03 PM

how can I do this with 3.8.x series?

Buray Savas ANI 09-23-2011 02:25 PM

Nice, thank you.

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

Thank you for article.

my123world 12-03-2011 12:09 PM

http://i28.lulzimg.com/fc9d4f335f.png

How Can I Remove This? Lynne... Please Help!

Lynne 12-03-2011 06:16 PM

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.

JMEWLS` 12-05-2011 01:20 AM

Can you do this for specific categories?

Lynne 12-05-2011 03:54 AM

Quote:

Originally Posted by JMEWLS` (Post 2274750)
Can you do this for specific categories?

If you add the category id to the beginning of the class, yes.

JMEWLS` 12-05-2011 04:18 AM

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>



All times are GMT. The time now is 12:36 AM.

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.03995 seconds
  • Memory Usage 1,784KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (3)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (1)pagenav_pagelinkrel
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete