[HOW TO - vB4] Two column forum/sub-forum setup via CSS only

[Reece^B]

Hi Lynne:

This is in additional.css

PHP Code:

.forumhead + .childforum .L2:first-child .forumrow, .forumhead + .L2 .forumrow {
  border-top: 0;
}
.forumrow .table {
  height: 100px;
}
#cat51 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%;
}
.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%;
} 


[Lynne]

You would need to add the id tag to all the CSS you want to only apply to that id.

And, you didn't post a link so that we can see the problem.

[Reece^B]

It's only the info base I want into columns.

[Lynne]

You didn't change it to put the id in front of all that code.

#cat51 .forumhead + .childforum .L2:first-child .forumrow, #cat51 .forumhead + .L2 .forumrow {
    border-top: 0 none;
}
#cat51 .forumrow .table {
    height: 100px;
}
#cat51 ol.childforum {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
#cat51 .childforum li.forumbit_post {
    clear: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 50%;
}
#cat51 #forums .L1 .L2 {
    clear: none;
}
#cat51 .forumbit_post .forumrow .forumlastpost {
    clear: both;
    width: 95%;
}
#cat51 .forumbit_post .forumlastpost .lastpostby {
    display: block;
    float: left;
}
#cat51 .forumbit_post .forumlastpost .lastpostdate {
    display: block;
    float: right;
}
#cat51 .forumbit_post .forumlastpost .lastposttitle {
    display: block;
    float: left;
}
#cat51 .forumbit_post .foruminfo {
    clear: right;
    float: left;
    min-width: 50%;
    width: 70%;
}
#cat51 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {
    width: 20%;
}
#cat51 .forumbit_post .forumlastpost .lastposttitle {
    display: block;
    float: left;
}
#cat51 .forumbit_post .foruminfo {
    clear: right;
    float: left;
    min-width: 50%;
    width: 70%;
}
#cat51 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {
    width: 20%;
}

[Reece^B]

Thanks Lynne, it works!

Would you happen to know if I can remove the 'Threads / Posts Last Post' from the top bar of the category name?

Also what CSS would I need to use to make that look like the main site.

Thanks again

[Lynne]

Originally Posted by Reece^B

Thanks Lynne, it works!

Would you happen to know if I can remove the 'Threads / Posts Last Post' from the top bar of the category name?

Also what CSS would I need to use to make that look like the main site. pitbikeclub.co.uk

Thanks again

Just add something like #cat51 .forumthreadpost {display: none;} for the stuff you don't want (do similar for Last Post).

As for formating the blocks, you'll just have to trial and error the CSS for that. firebug is a great tool for that because you can add it right there and see if it works.

[Reece^B]

Thanks Lynne, how can I move the titles/subtitles to the right so the image isn't overlapping?

Also is there a way to remove the RSS little logo and the green tick?

[Lynne]

Just something like:

.forumbit_post .foruminfo .forumdata .datacontainer {
    padding-left: 140px;
    width: 80%;
}

Personally, I'd look into redoing the template for that category. And, I'd set the forums to have a min-width so users can't make their browsers small and 'break' the look. It's not going to be a 2 minute job, it's going to take some effort. And you can remove the RSS logo and green tick just by going what I posted above and setting display to none for that category.

Click on the W3Schools link in my sig for a great site for CSS help.

[Easy5s.net]

pls help x columns like this mod: https://vborg.vbsupport.ru/showthread.php?t=99829

[CybertronWizard]

Thanks man..Using on my forum...