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

[Lynne]

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

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



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

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:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

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]

You're the best!

[Allan]

Congrats Lynne, very good article !

[baghdad4ever]

thanks Lynne

good and pretty lesson

[milsirhc]

Thanks Lynne!! Much appreciated!

[yaghoub]

very thanks luuny for this article you are the best .:up:

[Zaiaku]

CSS only! You are the man!

[Lynne]

CSS only! You are the man!
Wo-man. :)


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

[Charlie98902]

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]

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]

Great article Lynne!
thanks for the time to share it :)

[Lynne]

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]

Lynne in this code:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



what needs editing to remove the commas? See pic.

[Lynne]

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]

Thank you figured that would of been an easy one.

[yaghoub]

My Forume White Both Code

[Lynne]

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]

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]

Is it also possible to have only some forums with 2 columns and some with 1?

[milsirhc]

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]

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]

I think I love you!!

The best ever, you are!

[yaghoub]

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]

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]

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:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



You would do:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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]

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]

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]

that's a great thing

how i can make 3 columns? any idea?

[Lynne]

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]

Once again,

I couldnt find any css relating to make



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

wider in forumhome, it looks like template edit but I cant find it anywhere..

Can you help me with this Lynne ?

Thank you

[Lynne]

Did you try just giving some left padding or margin to .lastpostby?

[haothiencz]

Thank you for the tip Lynne!

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

Regards,
Haothiencz

[masonox]

Thank you so much!!

[NgocTam]

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]

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]

wow Lynne, thank you very much :up:

[peril]

Nice mod. Thanks. Is there a way to remove Last Post appearing on horizontal category bar?

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

[Lynne]

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:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[Steve M]

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

[elenh]

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]

How do i apply this to the sub forums on forumdisplay.php? Where put i wich code?

[Lynne]

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.

[Steve M]

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

Thanks

[Lynne]

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)

[Steve M]

Thanks a bunch, now you got me staying up longer tonight. LOL Guess I asked for it. hehe

[elenh]

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]

Try adding the code to the additional.css file (that template didn't exist when I wrote this).

[elenh]

again works not on forumdisplay.php (subforums)

[Lynne]

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:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[bsdvn]

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]

Yes lynne. Thanks its worked fine.

[Lynne]

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]

Adding clear:both; to the subforum listing 2-column css for this class .subforums ol.subforumlist fixes a display problem in IE7.

[ChangeFive]

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]

great i did my best and the result were fabulous all thanx for you

[Cedric_FP]

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]

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]

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]

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

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

?
And what is the name of file ?
where i need to put thse codes ?

[ever-fresh]

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]

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]

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


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


-----------------------------------
i don't need sub-forums neither who posted the last post
is it possible and how
thankx

[Lynne]

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


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

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

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]

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]

Help not work 4.0.3 pl1
it skewed
demo:

[Vesir04]

Good Post :)

[Lynne]

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]

can you say more clearly ?

[Lynne]

can you say more clearly ?
Try changing the 50% to something like 49.5%. Or, remove the borders.

[buiquockhanh]

I have tried but not been

[grecostimpy]

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]

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]

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]

Does this work on forumdisplay.php ?

[Lynne]

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]

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]

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



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[AliceHoward]

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]

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]

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]

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:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



IN-LINE FIND:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



REPLACE WITH:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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

[Lynne]

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]

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]

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]

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]

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

[Lynne]

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]

I am sorry. I thought that since this was about layout on the forum page, I put my query here.

[iBaker]

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]

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]

Thanks Lynne...worked perfectly

[Bram H]

Can you apply this setting on only one category also? And can somebody post a link to a working demo?

[Lynne]

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]

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]

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]

a very good modification. but I would like to know how to make the forum with only two columns in FORUMHOME (index).

[anupam_luv]

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]

I added the css to additional.css but still not displaying properly...

See the screenshot attached.... plz help

[Lynne]

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]

You could try just setting the display to none:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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]

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]

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]

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]

How can I practice the css codes to the vbullet 3.8 system ?

[Lynne]

How can I practice the css codes to the vbullet 3.8 system ?
Sorry, I don't understand the question.

[DePReM11]

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?

[Lynne]

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]

thanks for the code css you're woman

thanks

[Wonksta]

Lynne will this work for 3.8.6?

Thanks

[Lynne]

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]

Thanks for the article enjoyed it... Make sure you have a great day.

[LeventX]

Thank you...Installed.

[masterross]

Thx Lynne!

For those who wants to remove "Sub-forums:" text just add:

Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[lostpro9het]

Making the subforum name bold when a new post is made to it? Also, adding the thread/postcounts to each subforum title?

[Lynne]

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]

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]

edit

[hps5001]

http://imageshack.us/photo/my-images/508/bwtb.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]

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]

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]

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]

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]

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]

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]

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]

Using this CSS, can I replicate my existing look?

[Lynne]

Using this CSS, can I replicate my existing look?
Using just CSS? No. You will need to do template edits also.

[Initial Z32]

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]

You would need to post a link to your forum/style so we can see what is going on.

[Initial Z32]

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]

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

[Initial Z32]

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]

how can I do this with 3.8.x series?

[Buray Savas ANI]

Nice, thank you.

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

Thank you for article.

[my123world]

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

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

[Lynne]

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`]

Can you do this for specific categories?

[Lynne]

Can you do this for specific categories?
If you add the category id to the beginning of the class, yes.

[JMEWLS`]

How would I go about this, sorry.

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

Am I able to use conditionals for forums?

So.. for example...


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[Lynne]

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]

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]

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]

Ok So, I Have set my ".childforum li.forumbit_post {" to 50%.... My 3rd category always looks ugly. Please See This -

http://i.imgur.com/7XOX8.png

How do i Center it?

[Lynne]

I don't think you can center that without writing some code to do it (a plugin).

[GhostHunter2010]

i like this but it confuses me lol

[davio33]

Is there a way to make this three columns?

[Reece^B]

Ok So, I Have set my ".childforum li.forumbit_post {" to 50%.... My 3rd category always looks ugly. Please See This -

http://i.imgur.com/7XOX8.png

How do i Center it?

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

[tommythejoat]

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.


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------

[Lynne]

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]

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]

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]

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]

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.