PDA

View Full Version : [HOW TO - vB4] Two column forum/sub-forum setup via CSS only


Lynne
21 Nov 2009, 00:22
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 (http://www.vbulletin.org/forum/showthread.php?t=228330).)

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:
https://www.vbulletin.org/forum/external/2011/02/16.jpg

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):


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


.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):
http://www.vbulletin.org/forum/attachment.php?attachmentid=106563&stc=1&d=1258910170

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.

ragtek
21 Nov 2009, 07:57
You're the best!

Allan
21 Nov 2009, 08:24
Congrats Lynne, very good article !

baghdad4ever
21 Nov 2009, 09:46
thanks Lynne

good and pretty lesson

milsirhc
22 Nov 2009, 01:39
Thanks Lynne!! Much appreciated!

yaghoub
22 Nov 2009, 10:25
very thanks luuny for this article you are the best .:up:

Zaiaku
22 Nov 2009, 16:00
CSS only! You are the man!

Lynne
22 Nov 2009, 16:17
CSS only! You are the man!
Wo-man. :)


**edit** I added the css needed to make two columns for the Sub-Forums also.

Charlie98902
22 Nov 2009, 18:08
I got it now Lynne & thanks. I didn't know that if you click on edit templates the .css files are listed there. :D

yaghoub
22 Nov 2009, 19:03
this cod not work well in persian and arabic forum .i modifid Lynnecode for persian and arabic forum and few cheng Lynne cod .show here. thanks big Lynne.
106572

Brandon Sheley
22 Nov 2009, 19:08
Great article Lynne!
thanks for the time to share it :)

Lynne
22 Nov 2009, 19:24
this cod not work well in persian and arabic forum .i modifid Lynnecode for persian and arabic forum and few cheng Lynne cod .show here. thanks big Lynne.
106572
As I said, you will have to style it yourself. It looks like you may want to change some of my float:right to float:left or vice-versa. You'll have to play with it to get it how you want it to look.

Charlie98902
22 Nov 2009, 19:25
Lynne in this 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;
}

what needs editing to remove the commas? See pic.

Lynne
22 Nov 2009, 20:03
what needs editing to remove the commas? See pic.
I really don't want to get into CSS in this thread. However, I added this one thing to the article.

Charlie98902
22 Nov 2009, 20:52
Thank you figured that would of been an easy one.

yaghoub
23 Nov 2009, 14:23
My Forume White Both Code

Lynne
23 Nov 2009, 16:22
I'm sorry, but I don't know what I am supposed to see in those images. It looks like the css worked - you have the two forums side-by-side and the sub-forums lined up in two columns. That is all this article shows you how to do. I do no other styling in here - I said that was up to you to do.

yaghoub
23 Nov 2009, 21:04
heloo lynne . Now I can not tell you how this done because I'm traveling. Two days later the write article . and i can remove (,) the end of sub forum .screnshot . . excuseme my master. ;):up:

ragtek
24 Nov 2009, 07:05
Is it also possible to have only some forums with 2 columns and some with 1?

milsirhc
24 Nov 2009, 12:11
Thanks for the CSS!

I tried on my forum and I'm still struggling to get it right.

Some of the forums look OK but some are way out, like the screenshot I attached below.

Lynne
24 Nov 2009, 15:44
Thanks for the CSS!

I tried on my forum and I'm still struggling to get it right.

Some of the forums look OK but some are way out, like the screenshot I attached below.
Perhaps the height of the .forumrow? I really don't know. As I said, my css works fine on a default style. If you have already tweaked yours, then you may have to tweak the css I posted also.

Is it also possible to have only some forums with 2 columns and some with 1?
Of course. You can use the ids in there to only apply it to some forums. CSS is very flexible and vB did a great job with ids for all major sections/divs.

plubius
25 Nov 2009, 03:41
I think I love you!!

The best ever, you are!

yaghoub
25 Nov 2009, 05:59
Thanks for the CSS!

I tried on my forum and I'm still struggling to get it right.

Some of the forums look OK but some are way out, like the screenshot I attached below.
i am master in css and php .for this problem you must creat the forume similar for exampel in the movies forum You have given Description forum and for other forums did not have Description . so you must remove Description or you have given for other forum to solved this problem . your subforum should be matches of Number of rows

--------------- Added 1259129620 at 1259129620 ---------------

If you have any problem in css and php and disigne your templat contact me as I value the right to solve it

Alien
09 Dec 2009, 04:46
This is terrific. I'll have use for this.

I wonder if you would consider going into more detail on this just working for a particular category or specified group of forums. I haven't yet figured this out.

Lynne
09 Dec 2009, 05:21
This is terrific. I'll have use for this.

I wonder if you would consider going into more detail on this just working for a particular category or specified group of forums. I haven't yet figured this out.
If you look at your page source, you'll see that all the different categories/forums have their own ids (id="xxx"). So, you can append that to the front of the css and have it only apply to those categories/forums. So, for instance, if you just want it applied to stuff in category 3, or cat3 is the id, then instead of:
ol.childforum {
.....
}

You would do:
#cat3 ol.childforum {
.....
}

Then that particular CSS isn't applied to every ol.childforum, but only to those that also have the id cat3.

The best thing to do to understand how it works is to take some time to read up on it.

haothiencz
27 Dec 2009, 17:36
Thank you for sharing Lynne!

Can you have me with two question below?

http://img9.imageshack.us/img9/5776/lyn.png

PS: the space betwwen "icon go to the last post" and the thread starter

Thank you for your help

Lynne
27 Dec 2009, 19:27
You just need to play with the css to get the spacing how your want it. Different forums have different values set in their stylevars, thus you can't just post a generic answer for that (and thus why I didn't address it at all in my sample css code). Play with it in firebug.

halino
28 Dec 2009, 17:56
that's a great thing

how i can make 3 columns? any idea?

Lynne
28 Dec 2009, 18:21
that's a great thing

how i can make 3 columns? any idea?
Just change the width in .childforum li.forumbit_post to 33%.

haothiencz
28 Dec 2009, 18:25
Once again,

I couldnt find any css relating to make

the space betwwen "icon go to the last post" and the thread starter wider in forumhome, it looks like template edit but I cant find it anywhere..

Can you help me with this Lynne ?

Thank you

Lynne
28 Dec 2009, 18:37
Did you try just giving some left padding or margin to .lastpostby?

haothiencz
28 Dec 2009, 18:47
Thank you for the tip Lynne!

Works perfectly now. You are the wo-man :D

Regards,
Haothiencz

masonox
31 Dec 2009, 18:46
Thank you so much!!

NgocTam
18 Jan 2010, 20:09
Not work with IE7 (IE8 not tested) :(
Default style

width column 50%:
FF work fine

http://www.vbulletin.org/forum/attachment.php?attachmentid=110364&stc=1&d=1263846228

IE error
http://www.vbulletin.org/forum/attachment.php?attachmentid=110365&stc=1&d=1263846228

49%
FF
http://www.vbulletin.org/forum/attachment.php?attachmentid=110366&stc=1&d=1263846228
IE
http://www.vbulletin.org/forum/attachment.php?attachmentid=110367&stc=1&d=1263846228

49.9%: Not is the best and I don't like this number :(
http://www.vbulletin.org/forum/attachment.php?attachmentid=110368&stc=1&d=1263847115

Lynne
18 Jan 2010, 20:45
It actually shows up fine on my IE7 setup (I run parallels on my mac). However, I do notice that as you widen/shorten the width of the browser, it will blink back and forth between working and not working. I don't know what's up with that. I set it to 49.99% and it looked fine then, so try that.

RL714
20 Jan 2010, 02:36
wow Lynne, thank you very much :up:

peril
31 Jan 2010, 16:57
Nice mod. Thanks. Is there a way to remove Last Post appearing on horizontal category bar?

http://i49.tinypic.com/rcox8x.jpg

Lynne
31 Jan 2010, 17:08
Nice mod. Thanks. Is there a way to remove Last Post appearing on horizontal category bar?

You could try just setting the display to none:
.forumbit_nopost .forumhead span.forumlastpost, .forumbit_post .forumhead span.forumlastpost {display:none;}

Mythotical
26 Feb 2010, 13:55
Lynne:

Got a few problems as well I can't figure out how to move the Threads and Posts part up at the end of the forum title line.

Anyway, here you go.

I have altered the layout to be 2 columns, but the problem I have ran into is spacing issues in a few spots. I'm not sure what to check to change it or see if something is causing it.

Currently the category header has the category title centered but not immediately centered like it should be. So I am wondering which template controls that aspect. (View screenshot)

Spacing for subscribe image is wrong and not sure how that is when it is ready the same thing and the description is dropped to a new line for the left forum early enough but not for the right forum.

Spacing after my last post box to the right is a huge margin, I want it to only be 10px margin to the right but I have no idea what is defining the space there.

https://www.vbulletin.org/forum/external/2010/02/1.jpg

You can see all areas of concern boxed in with comments so there is no confusion. :)

Thanks
Steve

elenh
27 Feb 2010, 22:37
Hi lynne!
That i find very nice for my forum but there is a problem more:
To many people in the world still using 15' monitors and in the resolution of 1024x768 the forum with your css editlooks not fine if the side bar is enabled.
The subcribe and rss images and the forum title going all together and looks very bad.If you fix that it will be very nice edit and i will use.

Thanks for sharing!

elenh
01 Mar 2010, 00:59
How do i apply this to the sub forums on forumdisplay.php? Where put i wich code?

Lynne
01 Mar 2010, 04:58
How do i apply this to the sub forums on forumdisplay.php? Where put i wich code?

Same code works for the forumdisplay page also.

Mythotical
01 Mar 2010, 05:18
Hey Lynne, can I get a response to my post? http://www.vbulletin.org/forum/showpost.php?p=1991938&postcount=39

Thanks

Lynne
01 Mar 2010, 05:30
Lynne:

Got a few problems as well I can't figure out how to move the Threads and Posts part up at the end of the forum title line.

Anyway, here you go.

I have altered the layout to be 2 columns, but the problem I have ran into is spacing issues in a few spots. I'm not sure what to check to change it or see if something is causing it.

Currently the category header has the category title centered but not immediately centered like it should be. So I am wondering which template controls that aspect. (View screenshot)

Spacing for subscribe image is wrong and not sure how that is when it is ready the same thing and the description is dropped to a new line for the left forum early enough but not for the right forum.

Spacing after my last post box to the right is a huge margin, I want it to only be 10px margin to the right but I have no idea what is defining the space there.

http://www.vbulletin.org/forum/attachment.php?attachmentid=113104&stc=1&d=1267192419

You can see all areas of concern boxed in with comments so there is no confusion. :)

Thanks
Steve
You can find the template for the (non) centered title by doing 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. One of the forumhome_forumbit_* ones, I would guess.

All the other issues are CSS issues. I would use firebug to play around with the css and see exactly what controls what so you can change it. This is a good article to help you find classes - then just modify it right there on the page and see what happens - HOW TO Find what Stylevar you need to edit (http://www.vbulletin.org/forum/showthread.php?t=230309)

Mythotical
01 Mar 2010, 05:48
Thanks a bunch, now you got me staying up longer tonight. LOL Guess I asked for it. hehe

elenh
01 Mar 2010, 13:07
I try with both codes but works not correct by me.
I added both codes to forumbits.css and after on forumdisplay.css but haven't worked.
Take a look on the screenshot if you have the time to see how the forumdisplay subforum looking.

Should i change the values of forums depth in the vb settings?
Can you tell me what do i wrong? I test the code in the default vb style.

Lynne
02 Mar 2010, 05:12
Try adding the code to the additional.css file (that template didn't exist when I wrote this).

elenh
02 Mar 2010, 07:48
again works not on forumdisplay.php (subforums)

Lynne
02 Mar 2010, 16:15
It looks like they just changed the class names from childforum to forumbits. I haven't done much checking, but I changed the name real quick and it seemed to work:
.forumbits ol {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.forumbits li.forumbit_post {
float: left;
width: 50%;
margin: 0;
padding: 0;
clear:none;
}

bsdvn
02 Mar 2010, 23:49
hi Lynne

In my site, it is correct on Firefox, but it is only 1 collumn on IE - You can see this information at my site at here (http://www.bsdvn.com/forum)

elenh
03 Mar 2010, 10:00
Yes lynne. Thanks its worked fine.

Lynne
04 Mar 2010, 05:44
hi Lynne

In my site, it is correct on Firefox, but it is only 1 collumn on IE - You can see this information at my site at here (http://www.bsdvn.com/forum)
Sorry, but I don't have IE to view it.

viarun
06 Mar 2010, 15:54
Adding clear:both; to the subforum listing 2-column css for this class .subforums ol.subforumlist fixes a display problem in IE7.

ChangeFive
17 Mar 2010, 18:00
Thank you! Thank you! Thank you! Been trying to figure out how to do this for sub forum display for a while. This worked perfectly.

kmohamed
22 Apr 2010, 18:26
great i did my best and the result were fabulous all thanx for you

Cedric_FP
26 Apr 2010, 01:54
Hi,

Is it possible to do this with forumhead as well?

So that instead of there being two forums in columns that belong to the same category, there are two categories that exist in columns.

Lynne
26 Apr 2010, 05:22
Hi,

Is it possible to do this with forumhead as well?

So that instead of there being two forums in columns that belong to the same category, there are two categories that exist in columns.
Sure. As I said in the article:
This same concept can be applied to any list in the style.

Cedric_FP
27 Apr 2010, 06:20
I can barely even comprehend the CSS to do it for forums let alone for forumhead.

All I can gather is that something needs to happen with .forumbits_post L1

ever-fresh
08 May 2010, 00:39
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:


is there any modification for this please ?
i really need this.

--------------- Added 1273277243 at 1273277243 ---------------

what is the location of file from root http://domain.com/forum/.... ?
And what is the name of file ?
where i need to put thse codes ?

ever-fresh
08 May 2010, 03:27
hi.
i got it now.

thankyou very much laynn. good job.

here i can see somewhere extra space.
and in some places less space.

Please see image:

Lynne
08 May 2010, 06:21
It looks like you removed the Last Post and other columns in the last forum there and so the columns are spreading out more. You'll have to limit the space (width) in the parent div.

kmohamed
12 May 2010, 23:16
you may notice my previous i am happy with result but my user aren't maybe because of their screen size. anyway i decided to remove it but i have a question is it possible to make it look like this
------------------------------------
forum name
last post
threads:# post:#
rss - subscribe
-----------------------------------
i don't need sub-forums neither who posted the last post
is it possible and how
thankx

Lynne
13 May 2010, 00:19
you may notice my previous i am happy with result but my user aren't maybe because of their screen size. anyway i decided to remove it but i have a question is it possible to make it look like this
------------------------------------
forum name
last post
threads:# post:#
rss - subscribe -----------------------------------
i don't need sub-forums neither who posted the last post
is it possible and how
thankx
I'm sure you could make it like that, but this isn't the thread to get help with template mods. You should post in the main forums for help doing that.

mokujin
14 May 2010, 22:39
Hi Lynne,
I am new to vb4, I dont know how to make my table to two column?
Can you help me? Thank you

Lynne
15 May 2010, 01:19
Hi Lynne,
I am new to vb4, I dont know how to make my table to two column?
Can you help me? Thank you
I posted some CSS to try in the first post.

buiquockhanh
16 May 2010, 10:34
Help not work 4.0.3 pl1
it skewed
demo:

Vesir04
16 May 2010, 13:21
Good Post :)

Lynne
16 May 2010, 16:47
Help not work 4.0.3 pl1
it skewed
demo:
You probably have a border making it just a bit too wide. Reduce the width to something like 49.5% or so.

buiquockhanh
17 May 2010, 13:19
can you say more clearly ?

Lynne
17 May 2010, 16:20
can you say more clearly ?
Try changing the 50% to something like 49.5%. Or, remove the borders.

buiquockhanh
17 May 2010, 18:24
I have tried but not been

grecostimpy
25 May 2010, 02:05
Lynne has been extremely helpful in this thread with CSS debugging, but please realize that each forum is different based on what specific styles you are using, so small edits to Lynne's CSS that work for one forum may not work as well for another.

I do recommend that you follow her advice and download either Firebug (http://getfirebug.com/) or the Web Developer plugin (https://addons.mozilla.org/en-US/firefox/addon/60/) for Firefox. Using the Web Developer plugin, you can edit CSS "on-the-fly" to see what certain CSS changes look like instantly on your website without changing any code in the admincp.

Once you find the CSS combination you like, just copy the code from Web Developer and apply it to your CSS files.

Besides being an excellent tool (that does much, much more then just edit CSS) it helps you learn by doing. You see instantly what your file edits do and how fun it can be to style your website on your own.

Again, thank you for this great tutorial Lynne.

penmai.com
18 Sep 2010, 15:08
hi.. its working fine with firefox but in internet explorer it is displaying in only one columns. I had pasted the code in forumbits-ie.css also. www.penmai.com/forums (http://www.penmai.com/forums)

Lynne
18 Sep 2010, 16:38
I jsut looked at your site and don't see any of this CSS being used. Make sure you put it in the additional.css template.

Alfa1
18 Sep 2010, 16:52
Does this work on forumdisplay.php ?

Lynne
18 Sep 2010, 17:07
Does this work on forumdisplay.php ?
The basic CSS will work on the forumdisplay, yes. However, you may need to change some class or id names. (There is also a modification that will do this.)

penmai.com
22 Sep 2010, 13:45
I jsut looked at your site and don't see any of this CSS being used. Make sure you put it in the additional.css template.

Thanks Lynne, it worked perfectly.

AliceHoward
26 Sep 2010, 01:09
Brilliant little top-tip this article of yours, thanks for sharing it. :)
I hope you don't mind me posting a possible solution Lynne.

Does this work on forumdisplay.php ?
This seems to be working for my site, I added this to the additional.css

div.forumbit_post {
float: left;
width: 100%;
margin: 0;
padding: 0;
clear:none;
}
.forumbit_post {
float: left;
width: 50%;
margin: 0;
padding: 0;
clear:none;
}

AliceHoward
27 Sep 2010, 06:33
Hmmm, something is wrong with the snippet I posted above, every now and then one of the sub-forums gets moved over somehow so an empty space appears. You can see it occurring here: http://styleorigin.com/community/forumdisplay.php?18-Mental-Health

It's only every now and then, if I refresh the page a few times it seems to right itself, obviously there's something wrong or it wouldn't dropdown.

Alfa1
27 Sep 2010, 11:00
Yes, I was just browsing your site, before I read your last post. I noticed that.

Does anyone know what's causing Alice's bug with sub-forums display?

What would the code be to display 3 columns? Same but 0%, 33% and 66% ?

Lynne
27 Sep 2010, 16:52
Hmmm, something is wrong with the snippet I posted above, every now and then one of the sub-forums gets moved over somehow so an empty space appears. You can see it occurring here: http://styleorigin.com/community/forumdisplay.php?18-Mental-Health

It's only every now and then, if I refresh the page a few times it seems to right itself, obviously there's something wrong or it wouldn't dropdown.
I can't see the glitch in firefox on my mac. What is happening? Usually the issue is a border width that is throwing it off, so you can change the width to be just slightly less (there were some examples earlier in the thread) and it will be fine.
Yes, I was just browsing your site, before I read your last post. I noticed that.

Does anyone know what's causing Alice's bug with sub-forums display?

What would the code be to display 3 columns? Same but 0%, 33% and 66% ?
Again, I think someone might have already posted it in here. But yeah, you wouldn't use 50%, but instead go for 33.3% or so.

AliceHoward
27 Sep 2010, 18:24
Hi Lynne, I found the problem and fixed it, this is why you are not seeing it any more, I was fixing tea for my children so haven't had time to get on until just now.

I fixed it by doing the following.

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

IN-LINE FIND:
padding-{vb:stylevar right}: {vb:math {vb:stylevar padding}*2};

REPLACE WITH:
padding-{vb:stylevar right}: 5px;

Thank you again for this brilliant article, very helpful. :)

Lynne
27 Sep 2010, 20:03
Hi Lynne, I found the problem and fixed it, this is why you are not seeing it any more, I was fixing tea for my children so haven't had time to get on until just now.

I'm glad you got it fixed and thanks for posting what you did. (I'd rep you if they had rep here. :) )

slinky
28 Oct 2010, 20:37
Lynne -

Thanks for the help in getting two subforums, side by side. Is there any easy way to get three to work? In my experience, that seems to be the optimal number you can use in order to condense all the vertical scrolling if you require a good number of forums and subforums. I used to have three but the subforum manager that did it now destroys validation and creates other problems when used. Having a third forum on a horizontal line would be indispensable - if you can help lead this old horse to water. :)

Bummer - I just saw what you wrote above, LOL!!!! I will try out the code now!

Confirmed... 33% works like a charm!

everfresh2
06 Nov 2010, 21:13
in 4.0.8 i did the same.

it is showing correctly. but above the footer area is not OK due to this CSS edits.

Please someone guide me how to fix this ?

screen shot is attached.

Lynne
06 Nov 2010, 22:15
in 4.0.8 i did the same.

it is showing correctly. but above the footer area is not OK due to this CSS edits.

Please someone guide me how to fix this ?

screen shot is attached.
That isn't from the CSS here. It's from something else (you didn't update your templates after upgrading). Remove the CSS I wrote in the first post from your style and you'll see you still have that issue.

vinayak
18 Nov 2010, 15:23
Hi

Is there any way to add a sidebar on the threads page - showthread.php?

Also, can a 3-column layout be created for the forum home page? I need the page to look like this:

https://www.vbulletin.org/forum/

Thanks & Regards,
Vinayak

Lynne
18 Nov 2010, 15:37
Hi

Is there any way to add a sidebar on the threads page - showthread.php?

Also, can a 3-column layout be created for the forum home page? I need the page to look like this:

http://img413.imageshack.us/img413/818/mylayout.jpg

Thanks & Regards,
Vinayak
Sure, but none of that has anything to do with what this thread is about.

vinayak
18 Nov 2010, 15:43
I am sorry. I thought that since this was about layout on the forum page, I put my query here.

iBaker
02 Dec 2010, 05:28
Hi Lynne
Great edits to the css...thanks.

I have 3 questions:
1. How do I remove the text "Sub-forums"...is removing it from the template the only way?
2. Everyone says "it's ok, just add it to the "additional.css" template...do you know if this just builds up the final css making it bigger or is it always better to try and change the existing css templates?
3. Can you think of anyway that I can keep the "Threads/Posts" and "Last Post" but have the sub forums spread across the page...like this:?

124074

Thanks!

Lynne
02 Dec 2010, 05:58
1. I think it's a phrase. So, just edit the phrase to have nothing in it.
2. I think it really depends on how much you put into the additional.css. If it's just a normal sized template like the others, then it shouldn't be a problem.
3. I think you'd have to edit that template and put the sub-forums in their own div that doesn't include the forum title and threads/posts number. And make that div clear:both and it should go all the way across.

iBaker
02 Dec 2010, 07:29
Thanks Lynne...worked perfectly

Bram H
03 Dec 2010, 12:51
Can you apply this setting on only one category also? And can somebody post a link to a working demo?

Lynne
03 Dec 2010, 16:01
Can you apply this setting on only one category also? And can somebody post a link to a working demo?
I think I already answered that at the beginning by saying you can add in an id there or another class to get more specific.

Sorry, but my test site is password protected, so I can only post images.

DaRK mAN306
06 Dec 2010, 18:22
Thanks Lynne ..
I like what you've done to the sub forums using css ..
I'll try to do that to the sub forums of one forum only if it works ..

Thanks again ..

Lynne
06 Dec 2010, 18:55
Thanks Lynne ..
I like what you've done to the sub forums using css ..
I'll try to do that to the sub forums of one forum only if it works ..

Thanks again ..
If you can't get it to work, post a link to the site and let me know which specific forum you are trying to arrange the sub forums for.

drlovelless
16 Dec 2010, 04:06
a very good modification. but I would like to know how to make the forum with only two columns in FORUMHOME (index).

anupam_luv
25 Jan 2011, 18:44
Doesnt seem to be working for me... Is there any mod to perform the same function? (with the options to choose no. of columns)

--------------- Added 1295981446 at 1295981446 ---------------

Help not work 4.0.3 pl1
it skewed
demo:

Im gettin exactly same problem...

anupam_luv
25 Jan 2011, 19:05
I added the css to additional.css but still not displaying properly...

See the screenshot attached.... plz help

Lynne
25 Jan 2011, 19:22
As I said at the beginning, this will work on a Default Style. If you changed anything like padding or margins, you will need to edit the CSS to work for you. This works just fine on my default test site. And yes, there is a mod to do it. I don't know the link or name though.

Taurus1
28 Jan 2011, 14:45
You could try just setting the display to none:
.forumbit_nopost .forumhead span.forumlastpost, .forumbit_post .forumhead span.forumlastpost {display:none;}

This is awesome! Thank you so much.

Can you please tell me how to just have this not display in one category? If I add this, the "Last Post" part is gone in every category. I just want it gone in, well on my forum, cat73.

Thank you very much.

EDIT: Sorry, I got it working on the default skin, but on one of my other skins not. If you look at the screenshot attached, how can I get rid of the 'title' and the 'last post' there?

126186

Lynne
28 Jan 2011, 17:15
I don't know what you would do on your custom skin. You'll have to ask the skin designer for help with that.

Taurus1
29 Jan 2011, 09:48
I figured that out too. Is it perhaps possible, and can you please help me just to move the bottom text part up, to where I indicate on the attached screen.

Thank you very much.

126216

Lynne
29 Jan 2011, 16:47
Sorry, but I cannot write CSS from an image. It could be you have clear:both applied to that div, so remove it. I really don't know what is going on. Get firebug for firefox and you'll be able to see the CSS for that line.

DePReM11
21 Feb 2011, 10:49
How can I practice the css codes to the vbullet 3.8 system ?

Lynne
21 Feb 2011, 17:06
How can I practice the css codes to the vbullet 3.8 system ?
Sorry, I don't understand the question.

DePReM11
21 Feb 2011, 17:45
https://www.vbulletin.org/forum/external/2011/02/16.jpg
can I do that in image/photo in vbullet 3,8 demand?

Lynne
21 Feb 2011, 19:32
http://www.vbulletin.org/forum/attachment.php?attachmentid=106466&stc=1&d=1258762752
can I do that in image/photo in vbullet 3,8 demand?
I think there is a mod to do that. You can't do it with just CSS since it is in a table.

ErnestO999
11 Mar 2011, 00:22
thanks for the code css you're woman

thanks

Wonksta
23 Apr 2011, 13:11
Lynne will this work for 3.8.6?

Thanks

Lynne
23 Apr 2011, 18:25
Lynne will this work for 3.8.6?

Thanks
CSS will work on any html page. You would have to adjust the class names though for 3.8.6 and I have not looked into how that would be.

BigDog007
28 Apr 2011, 01:32
Thanks for the article enjoyed it... Make sure you have a great day.

LeventX
12 May 2011, 09:16
Thank you...Installed.

masterross
21 May 2011, 08:53
Thx Lynne!

For those who wants to remove "Sub-forums:" text just add:.subforums h4 {
display:none;
}

lostpro9het
23 May 2011, 01:53
Making the subforum name bold when a new post is made to it? Also, adding the thread/postcounts to each subforum title?

Lynne
23 May 2011, 03:43
Making the subforum name bold when a new post is made to it? Also, adding the thread/postcounts to each subforum title?
You'll need to ask about this in the main forums as it has nothing to do with writing CSS to make a two column layout.

davio33
25 Jun 2011, 10:24
Adding clear:both; to the subforum listing 2-column css for this class .subforums ol.subforumlist fixes a display problem in IE7.

Im having the same issue on ie7. Im sorry but i dont understand your fix. Can someone explian this to me?

Thanks

Noerenberg
14 Jul 2011, 21:39
edit

hps5001
04 Aug 2011, 20:04
https://www.vbulletin.org/forum/external/2011/08/74.jpg


http://imageshack.us/photo/my-images/508/bwtb.jpg << Demo Link what i really want...


Hey Guys I been trying to do this on my site.. I am having really hard time making my forums display like this... Is there anyway I can display 5 side to side forums... and also its depends upon the size of monitor the person has....

So if u have 13 inch monitor u will see 3 columns and if u have 15 inch monitor u will see 5 columns.. Please help me out asap waiting for response

Lynne
05 Aug 2011, 03:50
http://imageshack.us/photo/my-images/508/bwtb.jpg

So if u have 13 inch monitor u will see 3 columns and if u have 15 inch monitor u will see 5 columns.. Please help me out asap waiting for response
That will require some code, not just css.

setishock
07 Aug 2011, 17:56
Darlin' you rock! I found that code on another forum of dubious content. Now I know where they got it.
Is it possible to make the thread list in to 2 columns?

Lynne
07 Aug 2011, 18:33
Darlin' you rock! I found that code on another forum of dubious content. Now I know where they got it.
Is it possible to make the thread list in to 2 columns?
Sure, you could apply the same technique to the thread list on the forumdisplay pages.

jmp51483
30 Aug 2011, 18:11
Is this known to be working still in 4.1.5? I applied the sub forum listing to the default template and saw no change. I added this to the additional.css file and the forumbits.css file...

Thanks!

Lynne
30 Aug 2011, 18:46
Is this known to be working still in 4.1.5? I applied the sub forum listing to the default template and saw no change. I added this to the additional.css file and the forumbits.css file...

Thanks!
I just added the subforum css to the additional.css template in one of my 4.1.5 default styles and it worked just fine.

techdeals07
11 Sep 2011, 01:21
Is this known to be working still in 4.1.5? I applied the sub forum listing to the default template and saw no change. I added this to the additional.css file and the forumbits.css file...

Thanks!

Doesn't seem to work for me either on my 4.1.5 test site....

techdeals07
12 Sep 2011, 20:22
Doesn't seem to work for me either on my 4.1.5 test site....

Edit: Still works as intended on 4.1.5, I just didn't with the way my forums and sections were configured.

Reece^B
13 Sep 2011, 20:57
Using this CSS, can I replicate my existing look?

Lynne
14 Sep 2011, 03:55
Using this CSS, can I replicate my existing look?
Using just CSS? No. You will need to do template edits also.

Initial Z32
14 Sep 2011, 22:55
Hello Lynne, I'm still new to CSS and have read through this entire thread and tried messing with the codes but cannot achieve the end result I am looking for.

This is how my forum looks now (default 4.1.5 and there are child forums within here):

http://i24.photobucket.com/albums/c39/InitialZ32/current.png

This is how I want it to look (your second image in original post):

http://i24.photobucket.com/albums/c39/InitialZ32/goal.png

And this is what I get when I post the code in my additional css. window:

http://i24.photobucket.com/albums/c39/InitialZ32/aftercodewithout1.png

Could you please help me identify what I am doing wrong??

Thanks in advance, I really appreciate your time and help




ok so I read the original thread that this one derives from and got this code from Charlie's post:

.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:"";
}"

I punched it into my forumbit.css and got a result similar to what I want:


http://i24.photobucket.com/albums/c39/InitialZ32/singlecolumn.png

But I would very much rather have two columns instead of one, hopefully this is an easier question to answer??


Side note, I have the Forum Listing Display Options > Depth of Sub-Forums set to "1" so that they will appear, it defaults to 0 so nothing will show unless I change it to 1...

Lynne
15 Sep 2011, 01:03
You would need to post a link to your forum/style so we can see what is going on.

Initial Z32
15 Sep 2011, 01:10
www.bavarianmotorworkz.com the style im using is the default one called "Dark"

This is my forumbit:

@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
15 Sep 2011, 04:01
Your sub-forums are going in a single column because of the <br> you have in the template "forumhome_subforumseparator_post"

Initial Z32
15 Sep 2011, 06:47
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
22 Sep 2011, 22:03
how can I do this with 3.8.x series?

Buray Savas ANI
23 Sep 2011, 16:25
Nice, thank you.

--------------- Added 1316793103 at 1316793103 ---------------

Thank you for article.

my123world
03 Dec 2011, 13:09
http://i28.lulzimg.com/fc9d4f335f.png

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

Lynne
03 Dec 2011, 19:16
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`
05 Dec 2011, 02:20
Can you do this for specific categories?

Lynne
05 Dec 2011, 04:54
Can you do this for specific categories?
If you add the category id to the beginning of the class, yes.

JMEWLS`
05 Dec 2011, 05:18
How would I go about this, sorry.

--------------- Added 1323065536 at 1323065536 ---------------

Am I able to use conditionals for forums?

So.. for example...

<vb:if condition="in_array($forum['forumid'], array(1,2,3))">
CSS HERE
</vb:if>

Lynne
05 Dec 2011, 18:37
If you look at the page source, you'll see this at the start of categories:
<li id="cat48" class="forumbit_nopost old L1">

So you could add #cat48 in front of the class. Example, instead of:
.subforums ol.subforumlist
You could put:
#cat48 .subforums ol.subforumlist

LuDawgs
19 Dec 2011, 18:28
Really good stuff, as usual. Is there a way to increase the width between subforums? So that they aren't so stacked/crammed on top of one another?

http://awesomescreenshot.com/0a0qfy939

Lynne
19 Dec 2011, 20:02
Really good stuff, as usual. Is there a way to increase the width between subforums? So that they aren't so stacked/crammed on top of one another?

http://awesomescreenshot.com/0a0qfy939
Just add some top-padding:

.subforumlist li.subforum {
padding-top: 5px;
}

my123world
23 Dec 2011, 09:14
Ok So, I Have set my ".childforum li.forumbit_post {" to 50%.... My 3rd category always looks ugly. Please See This -

https://www.vbulletin.org/forum/external/2012/01/32.png

How do i Center it?

Lynne
23 Dec 2011, 17:52
I don't think you can center that without writing some code to do it (a plugin).

GhostHunter2010
18 Jan 2012, 15:56
i like this but it confuses me lol

davio33
21 Jan 2012, 23:49
Is there a way to make this three columns?

Reece^B
22 Jan 2012, 08:20
Ok So, I Have set my ".childforum li.forumbit_post {" to 50%.... My 3rd category always looks ugly. Please See This -

https://www.vbulletin.org/forum/external/2012/01/32.png

How do i Center it?

Can you hep us out by posting where your code is and what you've used?

tommythejoat
29 Apr 2012, 04:45
I just installed 4.1.12pl1 and this stopped working. I still get two columns, but the spacing differs from forum to forum with 3 different spacings. It is behaving like a tab stop overflow instead of just dividing the area into two pieces as it was last week with 4.1.10.

Did 4.1.12pl1 change the name of the class for subforum?

Here is what I have in additional css.

.subforums ol.subforumlist {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.subforumlist li.subforum {
float: left;
width: 50%;
margin: 0;
padding: 0;
clear:none;
}

Lynne
29 Apr 2012, 05:03
I'm not sure what you mean. I just tested that on my default 4.1.12 site and it looks the same on the forum.php page as on the forumdisplay.php page.

tommythejoat
29 Apr 2012, 05:17
It is possible that something else got altered in our customized styles but this part seemed so simple that I don't really see how.

Here is a link to the site to see what it looks like. http://mb.nawcc.org you do not need to be logged in the see the irregular formatting.

Lynne
29 Apr 2012, 17:15
The only page I see the subforums listed in columns is on the main page. None of the forumdisplay pages have that, so I am not seeing any problem at all.

tommythejoat
29 Apr 2012, 18:42
I thought we were talking about the listing of subforums on the main page. That is what I was using your css for.

Since the upgrade the right hand columns do not align between categories. Before the upgrade all the right hand columns started on the same column position. I had thought that the ol 100% list followed by the 1i 50% width would control the alignment.

The person who set up the styles for that display is no longer available, so maybe I just need to study it some more if you say it is unrelated to this css discussion.

Lynne
30 Apr 2012, 00:39
Ah, I see what you mean. You said it differed from forum to forum and I thought you meant looking at one forum page (forumdisplay) versus another (cuz if you have subforums on those pages, then the code will align them on those pages also).

If you look at the page using firebug, you'll see that the width given to each of the <li> is different. You need to do something to set those to 100%. You'll have to play with it a bit cuz lists are a bit odd with CSS.

nextdayonline
29 May 2012, 19:28
Thanks, just used this in one of our forums. Great help!

slinky
14 Jul 2012, 02:39
I'm not sure what you mean. I just tested that on my default 4.1.12 site and it looks the same on the forum.php page as on the forumdisplay.php page.
Lynne - this is perhaps one of the most useful articles in the 10+ years I have been around. I can't tell you how much work it saves so many people trying to accomplish the same and used to do with awful plugins.

Lynne
14 Jul 2012, 03:00
I'm glad you found it useful. :)

Dr Aj642
21 Jul 2012, 05:48
Hi Lynne,

Thanks for putting this code up. So i managed to split a specific category. This category has 30 forums in it. So i was thinking this code would split 15 on the left and 15 on the right. Instead it has done 12 on the left and 18 on the right. Any ideas on how to fix this? I've tried fiddling with some percentages, but i'm lost.

Help would be appreciated thanks.

Lynne
21 Jul 2012, 18:21
Hi Lynne,

Thanks for putting this code up. So i managed to split a specific category. This category has 30 forums in it. So i was thinking this code would split 15 on the left and 15 on the right. Instead it has done 12 on the left and 18 on the right. Any ideas on how to fix this? I've tried fiddling with some percentages, but i'm lost.

Help would be appreciated thanks.
How about a link to view the problem? (If a forum name is really long, then it may 'push' another forum to be listed underneath it instead of beside it.)

Dr Aj642
22 Jul 2012, 06:45
How about a link to view the problem? (If a forum name is really long, then it may 'push' another forum to be listed underneath it instead of beside it.)

Here is what it looks like http://abasketballjones.com/wp-content/uploads/2012/07/forum-column.png

The above image is only half of it. But still you see whats happened.

This is the code i put in:

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

Dr Aj642
25 Jul 2012, 05:53
any ideas lynne?

Lynne
25 Jul 2012, 17:37
As I said, I need a link to the site/style in order to view the problem. I like to use firebug for CSS issues and I can't do that without a link to the site/style.

tommythejoat
30 Jul 2012, 19:40
Ah, I see what you mean. You said it differed from forum to forum and I thought you meant looking at one forum page (forumdisplay) versus another (cuz if you have subforums on those pages, then the code will align them on those pages also).

If you look at the page using firebug, you'll see that the width given to each of the <li> is different. You need to do something to set those to 100%. You'll have to play with it a bit cuz lists are a bit odd with CSS.

This response sf from a while ago, but I had some time today to look at it again and I remain confused about what is going on. I examined several of the li tags with FireBug and they all are pretty much the same. Where would I find the width you are referring to above?

Here is what the code looks like.

html:
<li class="subforum">
<img id="forum_statusicon_291" class="inlineimg" border="0" alt="" src="images/statusicon/subforum_old-48.png">
<a href="forumdisplay.php?291-Moderator-Procedures-and-Training-Project">Moderator Procedures and Training Project</a>
</li>

css:
.subforums ol.subforumlist {
float: left;
margin: 0;
padding: 0;
width: 100%;
}
.subforumlist li.subforum {
clear: none;
float: left;
margin: 0;
padding: 0;
width: 50%;
}

The css looks just like your example to me but there does not seem to be any width control. I suppose it is possible that the containers have different widths, but visibly they are the same for each of the categories.:confused:

Dr Aj642
06 Aug 2012, 09:54
As I said, I need a link to the site/style in order to view the problem. I like to use firebug for CSS issues and I can't do that without a link to the site/style.

Ok, here it is.

http://abasketballjones.com/forum/forum.php?styleid=3

Hope that helps.

Cheers Lynne

Lynne
06 Aug 2012, 18:03
Ok, here it is.

http://abasketballjones.com/forum/forum.php?styleid=3

Hope that helps.

Cheers Lynne
You should increase the min-height for ".forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow" to something like 100px or so and see if that fixes it.

Dr Aj642
07 Aug 2012, 07:40
You should increase the min-height for ".forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow" to something like 100px or so and see if that fixes it.

Still the same :(

Strange how it hasn't evenly split them 15 on the left and 15 on the right...

Someone has created a mod that splits categories which is exactly what i want, but bad thing is, the mod hasn't been updated so you can't choose which one you want split...

dammit

ArsMagnum
14 Aug 2012, 02:36
I'm on the same situation, so i'm trying to play with the codes to see if it fixes. And the problem is in the same side of the category, so there must be something on it or... something.
If I get to fix it earlier I'll let you know :P

Lynne
14 Aug 2012, 03:03
Still the same :(

Strange how it hasn't evenly split them 15 on the left and 15 on the right...

Someone has created a mod that splits categories which is exactly what i want, but bad thing is, the mod hasn't been updated so you can't choose which one you want split...

dammit
I still see the min-height set at 58px.

When I change it using firebug, the site looks fine.

ArsMagnum
14 Aug 2012, 04:26
Hi Lynne, i had the same problem as Dr Aj but I could fix it with that you said, but another issue came right after that one.

On the left side, the last forum looks like... deeper from the other ones, I dont really know how to describe it.
Here, I leave you the link so you can check it by yourselve:

http://forum.arsmagnum.com/forum.php

it is at the "Anime & Manga" Category.

Plus... Is there anyway that I can change that option of min-heigh only in one category? I've been trying but I dont know how

Lynne
14 Aug 2012, 17:58
Hi Lynne, i had the same problem as Dr Aj but I could fix it with that you said, but another issue came right after that one.

On the left side, the last forum looks like... deeper from the other ones, I dont really know how to describe it.
Here, I leave you the link so you can check it by yourselve:

http://forum.arsmagnum.com/forum.php

it is at the "Anime & Manga" Category.

Plus... Is there anyway that I can change that option of min-heigh only in one category? I've been trying but I dont know how
You have your min-height set to 95px, I think it needs to be larger. If you only want it for that one category, then use the category id:

#c_cat18 .forumbit_nopost .forumbit_nopost .forumrow, #c_cat18 .forumbit_post .forumrow {min-height: 105px;}

ArsMagnum
14 Aug 2012, 19:08
I tried with the min-height at 100px and it still looks odd.
I think the problem is always at the final space of the left column, couse I tried to create a new forum so there would be equal forums to divide, but the left one it looks always that way.
Might not be a code problem from the very Columns code?

I could change the large of only one category now, thanks for the help.

Lynne
14 Aug 2012, 23:02
I think you need to increase the min-height to 110px (at least for firefox). As for the last forum, I think it shows like that because you have borders for your forums. Notice how the right borders don't show for any of the left forums - it's because the right forums hide it.

ArsMagnum
15 Aug 2012, 01:58
Its all done.
Thanks for the help Lynne. It looks great!

Dr Aj642
15 Aug 2012, 07:59
Hi Lynne, i had the same problem as Dr Aj but I could fix it with that you said, but another issue came right after that one.

On the left side, the last forum looks like... deeper from the other ones, I dont really know how to describe it.
Here, I leave you the link so you can check it by yourselve:

http://forum.arsmagnum.com/forum.php

it is at the "Anime & Manga" Category.

Plus... Is there anyway that I can change that option of min-heigh only in one category? I've been trying but I dont know how

I still see the min-height set at 58px.

When I change it using firebug, the site looks fine.

You have your min-height set to 95px, I think it needs to be larger. If you only want it for that one category, then use the category id:

#c_cat18 .forumbit_nopost .forumbit_nopost .forumrow, #c_cat18 .forumbit_post .forumrow {min-height: 105px;}

Had to set it for one category! Fixed now. Cheers Lynne

ProFifaLeagues
16 Aug 2012, 22:13
Hi Lynne, i had the same problem as Dr Aj but I could fix it with that you said, but another issue came right after that one.

On the left side, the last forum looks like... deeper from the other ones, I dont really know how to describe it.
Here, I leave you the link so you can check it by yourselve:

http://forum.arsmagnum.com/forum.php

it is at the "Anime & Manga" Category.

Plus... Is there anyway that I can change that option of min-heigh only in one category? I've been trying but I dont know how


any chance of a step by step write up on how you get the Forums looking that way Sir please?
Looks Superb :up:

Kirk Fitzgerald
22 Aug 2012, 10:27
It looks like they just changed the class names from childforum to forumbits. I haven't done much checking, but I changed the name real quick and it seemed to work:
.forumbits ol {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.forumbits li.forumbit_post {
float: left;
width: 50%;
margin: 0;
padding: 0;
clear:none;
}

Exactly what I came here today to ask about, thank you for posting this answer Lynne, most helpful, I tried to like your post but it says I can't like it, guess the post was too old, so thanks and consider it liked. :)

HFCloud
08 Sep 2012, 18:11
Hi,

Can someone do this for me? I'm so confused with this!

nezr
14 Sep 2012, 06:34
Is it possible to have 4 forum/subforum in a row?

Reece^B
16 Nov 2012, 23:20
It looks like they just changed the class names from childforum to forumbits. I haven't done much checking, but I changed the name real quick and it seemed to work:
.forumbits ol {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.forumbits li.forumbit_post {
float: left;
width: 50%;
margin: 0;
padding: 0;
clear:none;
}

I used the childforum (post 1) and that worked, when I used this update it stopped?

However my problem is when I added cat51 it didn't change just that category, but all. Am I right in thinking it goes in just 1 place?

Lynne
17 Nov 2012, 00:54
Could have been you wrote the CSS incorrectly. It's hard to tell without you post the exact CSS you wrote, tell us where you added it, and give us a link to the page that should use it.

Reece^B
17 Nov 2012, 08:52
Hi Lynne:

This is in additional.css


.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
18 Nov 2012, 16:41
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
18 Nov 2012, 17:16
It's only the info base I want into columns.

Lynne
18 Nov 2012, 18:05
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
18 Nov 2012, 19:30
Thanks Lynne, it works! :D

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
19 Nov 2012, 16:36
Thanks Lynne, it works! :D

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
20 Nov 2012, 20:14
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
20 Nov 2012, 22:30
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
30 Nov 2012, 14:37
pls help x columns like this mod: http://www.vbulletin.org/forum/showthread.php?t=99829

CybertronWizard
02 Dec 2012, 00:26
Thanks man..Using on my forum...

felixR
08 Dec 2012, 04:42
Awesome Lynne!

I still get the comma in my subforum list (http://forum.clubitr.com.au) though even after I added in:

.commalist li.subforum:after {
content:"";
}

Edit:

Nevermind (https://www.vbulletin.com/forum/showthread.php/391856-Sub-Forums-two-columns-wide) :) Thanks again.

setishock
18 Apr 2013, 17:37
I stuffed in the code in the additional css and it works better than last time I try it. I was on 4.1.2 now on 4.1.2 pl8.

So to make the double column affect just one category just add the line with the cat number edited in? Just that simple?

Lynne
18 Apr 2013, 18:13
I stuffed in the code in the additional css and it works better than last time I try it. I was on 4.1.2 now on 4.1.2 pl8.

So to make the double column affect just one category just add the line with the cat number edited in? Just that simple?
Yep, just add the catid.

Reece^B
12 Jun 2013, 07:50
Does anyone know how to adjust height?

Lynne
12 Jun 2013, 18:02
You would use the height property (which is shown in many of the CSS rules).

Reece^B
12 Jun 2013, 21:05
My current code is:
#cat51 .forumhead + .childforum .L2:first-child .forumrow, #cat51 .forumhead + .L2 .forumrow {
border-top: 0 none;
height:100px;
}
#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%;
height:100px;
}
#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%;
height:100px;
}
#cat51 .forumthreadpost {display: none;}
#cat51 .forumlastpost {display: none;}
#cat51 .forumactionlinks {display: none;}
#cat51 .forumbit_post .foruminfo .forumdata .datacontainer {
padding-left: 140px;
width: 80%;
}

The code in red is the height i've added, which has given me the correct height. (I don't know if this is in the right location?)

However if you see the screen attached the columns aren't evenly spaced. How do I do this?! I keep trying to no avil.

Lynne
12 Jun 2013, 21:55
You have some which naturally want to be taller than 100px. So, you need to pick something larger, like 120px to make them all the same height. Or, you need to set the overflow to hidden, but then some text may disappear.

Reece^B
28 Jun 2013, 20:52
How can I move that text so it's not over lapping?

K4GAP
29 Jun 2013, 05:28
Is anyone using this on 4.2.1 ?

Reece^B
29 Jun 2013, 07:37
yes

Lynne
29 Jun 2013, 18:17
How can I move that text so it's not over lapping?
How is it that you want to change things in that image (I don't see anything wrong in it). And, can we get a link to the actual page so we can play around with it using firebug.

Reece^B
30 Jun 2013, 12:09
As you can see the text overlaps slightly. If I'm honest it'll probably be easier just to shortern.

However, how can I get the last post by down the bottom.

Lynne
30 Jun 2013, 17:33
As you can see the text overlaps slightly. If I'm honest it'll probably be easier just to shortern.

However, how can I get the last post by down the bottom.
The site is very slow and I can't really play with it using firebug. But, if you want to move it down, add a margin-top to the CSS. If you want it moved down, then put it in it's own div and clear:both and it should move down.

Reece^B
01 Jul 2013, 21:14
Im surprised by it being slow, perhaps just a busy time.

I've removed #cat51 .forumlastpost {display: none;} from the CSS to display the last post, but it's shifted the left cell down. Why is that? What code needs to be rectified?

Thanks in advance.

Lynne
02 Jul 2013, 00:22
It would help to have an image of what you want it to look like.

The cell was shifted down because of the height. You may want to set the height to 150px or so and set a background-color and bottom border for "#cat51 .childforum li.forumbit_post"

Reece^B
03 Jul 2013, 20:50
Im after how it currently looks on the main site.

tommyxv
31 Aug 2013, 05:27
Any idea how to fix this problem?

Errors found while checking this document as XHTML 1.0 Transitional!


end tag for "ul" which is not finished
</ul>

Lynne
01 Sep 2013, 04:34
Any idea how to fix this problem?
This is an article that includes only adding CSS, not changing any template code, so I don't see how your question relates to this article.

tbworld
01 Sep 2013, 08:20
Any idea how to fix this problem?

@Lynne is absolutely right, your questions exceeds the How_to Article and is very confusing being part of this thread. As a moderator she needed to point this out -- not that you were arguing the point.

People spend too much time worrying about exact validation. I could spend half a day lecturing about it. It is only a another tool for developers.

Depending on the browser and how they implement the doc type you will find that missing an end tag might have no affect to that browser even though "XHTML 1.0 Transitional" is considered an application of "XML" which is more strict on the way end tags are done.

Load your HTML in a good IDE or Notepad++, spend a little time, you can find the missing tag -- "Warning", if it is not dynamically added. Depending on how you use the validator, it will not always report the correct answer.

If no one is complaining... move on, life is too short.

Hope this helps.

tommyxv
02 Sep 2013, 21:43
This is an article that includes only adding CSS, not changing any template code, so I don't see how your question relates to this article.

When I remove the the CSS for the style mod, those validation error goes away. I assume it is causing it somehow.

No biggie. ;) Have a wonderful day!

smirkley
24 Sep 2013, 00:04
Like this article,... and applied it to my forum, plus or minus some enhancements.
http://www.ignorancedenied.com/forum.php

Still have a problem with the forum cells slightly overlapping and the background forum cell image is overlapping the border. Hopefully can get it figured out.

Thank you Lynne !!

Lynne
24 Sep 2013, 20:09
You have a 2px shadow and so it makes the boxes overlapby 2px. shadows and borders will cause that.

Easy5s.net
19 Feb 2015, 12:52
error with style default, pls help
https://www.vbulletin.org/forum/external/2015/02/11.png

Lynne
19 Feb 2015, 19:43
We would need a link to the style in order to see what is wrong.

Easy5s.net
20 Feb 2015, 02:06
I'm no link, i test in localhost with style default and add css first post this thread to temp additional.css

Lynne
20 Feb 2015, 23:52
Well, you may need to play with the width %. Also, just an FYI, but I think after I wrote this article, someone cam up with a modification to do this. So, that may be easier for you.

em_dai_kho
28 Feb 2015, 00:22
Who can update 4.2.2 pl, thanks

setishock
31 Oct 2015, 05:18
I'm using this in 4.2.3 and it works great. Still tinkering around with it though. This is on the top of my CSS goodies list. Thanks again Lynne.

http://multirotorplatforms.com/forum.php?styleid=28

matthew1211
24 Mar 2016, 00:39
Commas do not remove