PDA

View Full Version : CSS Grurus, Help please!


Reece^B
08-22-2013, 05:29 PM
Im trying to replicate the columns here:
http://web.archive.org/web/20050321184209/http://www.corsacrazy.net/forums/

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

Here's the 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!!

tbworld
08-23-2013, 06:12 AM
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.

Lynne
08-23-2013, 03:00 PM
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.

ForceHSS
08-23-2013, 03:26 PM
<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

Reece^B
08-24-2013, 07:18 AM
I apperciate all the replies, I will undertake this. (At least give it a go)
What templates would require editing?

RickyH
08-24-2013, 11:44 AM
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!

Reece^B
08-24-2013, 01:51 PM
Okay then, thank you.

Lynne
08-24-2013, 10:10 PM
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.)

TheLastSuperman
08-25-2013, 02:19 AM
https://vborg.vbsupport.ru/showthread.php?p=2440731#post2440893

:p

Reece^B
08-25-2013, 07:59 AM
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?!

Lynne
08-25-2013, 04:03 PM
Change the height here:
#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):
#cat56 .forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow {
height: 170px;}
Then add something like:
#cat56 .forumbit_post .forumlastpost .lastposttitle {
padding-left: 10px;}

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

Reece^B
08-26-2013, 10:23 AM
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.

Lynne
08-26-2013, 04:01 PM
#cat56 li.rsslink {display: none;}

Reece^B
08-26-2013, 06:37 PM
Super :)

What about the subscribe link?

Lynne
08-26-2013, 08:44 PM
I'll have to guess at that one since I can't see it, but try this:

#cat56 li.subslink {display: none;}

Reece^B
08-27-2013, 06:38 PM
That's the one, thanks Lynn.

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

Lynne
08-27-2013, 10:04 PM
Just add some padding to this:

#cat56 .forumbit_post .forumlastpost .lastpostby {
display: block;
float: left;
padding-left: 5px;
}

Reece^B
08-28-2013, 05:35 PM
Humm, for some reason that didn't work?

Lynne
08-28-2013, 07:54 PM
I don't see it added at all. I just used firebug to add it and it worked.

Reece^B
08-29-2013, 06:09 PM
My Bad! That works a treat! :)