vb.org Archive - CSS Grurus, Help please!

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - CSS Grurus, Help please! (https://vborg.vbsupport.ru/showthread.php?t=301500)

CSS Grurus, Help please!

Im trying to replicate the columns here:
http://web.archive.org/web/200503211...zy.net/forums/

Heres what it looks like:
http://stang.pitbikeclub.co.uk/?styleid=6

Here's the code:

Code:

#cat56 .forumhead + .childforum .L2:first-child .forumrow, #cat51 .forumhead + .L2 .forumrow {

    border-top: 0 none;

    height:100px;

}

#cat56 .forumrow .table {

    height: 100px;

}

#cat56 ol.childforum {

    float: left;

    margin: 0;

    padding: 0;

    width: 100%;

}

#cat56 .childforum li.forumbit_post {

    clear: none;

    float: left;

    margin: 0;

    padding: 0;

    width: 50%;

}

#cat56 #forums .L1 .L2 {

    clear: none;

}

#cat56 .forumbit_post .forumrow .forumlastpost {

    clear: both;

    width: 95%;

}

#cat56 .forumbit_post .forumlastpost .lastpostby {

    display: block;

    float: left;

}

#cat56 .forumbit_post .forumlastpost .lastpostdate {

    display: block;

    float: right;

}

#cat56 .forumbit_post .forumlastpost .lastposttitle {

    display: block;

    float: left;

}

#cat56 .forumbit_post .foruminfo {

    clear: right;

    float: left;

    min-width: 50%;

    width: 70%;

}

#cat56 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {

    width: 20%;

height:100px;

}

#cat56 .forumbit_post .forumlastpost .lastposttitle {

    display: block;

    float: left;

}

#cat56 .forumbit_post .foruminfo {

    clear: right;

    float: left;

    min-width: 50%;

    width: 70%;

}

#cat56 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {

    width: 20%;

    height:100px;

}

#cat56 .forumthreadpost {display: none;}

#cat56 .forumlastpost 

#cat56 .forumactionlinks {display: none;}

#cat56 .forumbit_post .foruminfo .forumdata .datacontainer {

    padding-left: 140px;

    width: 80%;

}

Can someone help me where im going wrong? (all columns level + images now overlapping text?)

Thank you!!

You may have to adjust your HTML on the template and the CSS to make this happen. Unfortunately, it is not easy to assist you unless someone wants to take on a project.

I applaud you being ambitious, but you may need a bit more HTML and CSS under your belt to handle this project. Sorry I cannot be of more help to you.

But. if you can narrow down your question, I would be happy to give you a hand.

I agree in that it is probably easier to redo the template for that area than try to use CSS to move it around to where you want everything.

<td width="190" valign="top" align="left" id="f2" class="alt1Active">
<div style="width: 190; height: 100">
<a href="/web/20050321184209/http://www.corsacrazy.net/forums/forumdisplay.php?f=2"><img border="0" alt="General modifying" src="/web/20050321184209im_/http://www.corsacrazy.net/forums/images/statusicon/forum_2.jpg" title="General modifying"></a>
</div>
</td>

This is from there first one hope it helps as i see your pictures are messed up

I apperciate all the replies, I will undertake this. (At least give it a go)
What templates would require editing?

The only template that would possibly need editing would be forum display i think? If you go to Styles -> Find in Styles -> body_wrapper -> find -> this will display all available templates with that div tag, then ctrl+f to find body_wrapper and then locate the div c_cat56. Should only be 1 template that needs editing. Of course edit the vBulletin.css to replicate the CSS styling, but this is a big project. Good luck!

Okay then, thank you.

To find the template to modify, do this - vboptions > General Settings > Add Template Name in HTML Comments > set to Yes . Then go back to your page and view the source code and you will see the name of the template called around your part of the code. (Sometimes the template is the one mentioned at the very top of the page source.)

Thanks for the reply above, the only problem is your mod creates all forums into columns, rather than selected forums. But still good none the less.

I've manged to get the right look by using Lynns code and changed the icon sizes so they don't overlap, and now it looks correct.
Opinions?!

Change the height here:

HTML Code:

#cat56 .forumhead + .childforum .L2:first-child .forumrow, #cat51 .forumhead + .L2 .forumrow {

    border-top: 0 none;

    height: 100px;

}

I'd suggest 170px or so. Also add it to here (should be the same height you used above):

HTML Code:

#cat56 .forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow {

    height: 170px;}

Then add something like:

HTML Code:

#cat56 .forumbit_post .forumlastpost .lastposttitle {

padding-left: 10px;}

That should help out a bit. It will still need some tweaking, but that should help.

Ok Lynn I'll make them mods, but how do I hide the RSS box/Tick Box from the columns?
If I hide last post by it removes everything, but I want to see the last post but without them in it.

HTML Code:

#cat56 li.rsslink {display: none;}

Super :)

What about the subscribe link?

I'll have to guess at that one since I can't see it, but try this:

HTML Code:

#cat56 li.subslink {display: none;}

That's the one, thanks Lynn.

Do you happen to know how add a space? (see attached)

Just add some padding to this:

Code:

#cat56 .forumbit_post .forumlastpost .lastpostby {

    display: block;

    float: left;

    padding-left: 5px;

}

Humm, for some reason that didn't work?

I don't see it added at all. I just used firebug to add it and it worked.

My Bad! That works a treat! :)

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (5)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (20)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 bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01062 seconds Memory Usage 1,758KB 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 (2)bbcode_code_printable (5)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (20)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 bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: