Style References for vBulletin 4.x
 

vBulletin utilizes files and templates to render it's pages. As an administrator of your site you have access to the "Style Manager" which allows you to customize nearly every aspect of your style including the templates, css, and stylevars!

*Please keep in mind not everything related to your style in terms of CSS has a stylevar, you could be required to add in custom css if your going beyond the default style and or functionality of vBulletin.

Some useful links:

• Free styles on vBulletin.com
• Free styles on vBulletin.org
• vBulletin Customization forum on vBulletin.com
• vBulletin 4 Quick Tips and Customizations
• vBulletin 4 Design and Graphic Discussions
• Articles on vBulletin.org with tons of useful information
• How to find a stylevar (video version) by Trevor Hannant
• Design Tool: Show what Stylevars are used on a Page
• vBulletin 4 Template Conditionals
• Customizing Styles via Plugins Part 1: The Basics

Now with all great things come some conditions am I right? Basically here's what you need to know in short... vBulletin comes with a default style, it's nice and subtle... why is it not popping or cutting edge? Well that's your perspective, you may think it's not up to par others love it, some want a light style and others a dark style and so forth. The default style can be customized or you can create your own new styles or even import free or paid styles into your site. One thing to bear in mind as with anything you customize sometimes additional maintenance is required, now what does that mean? It means if you heavily customize your sites style there is a chance when you upgrade that templates will not merge correctly... there's is a comparison tool built in but do not, I repeat do not assume things will always go smoothly - on some occasions they do and some they don't for a number of reasons and/or factors etc however the number one reason would be you chose to customize so don't become upset if your required to work on it every now and then ok? Overall what we need to realize is how it works, how we can customize it and then we have control!

Displaying the forum page, the templates are in this order from top to bottom:

1. Header
2. Navbar
3. Forumhome
4. Footer

Now that's a basic short version, as you can see in the images below there's more but where? Well the black numbered items in the list above are usually the constants meaning they are on all pages, the royal blue colored item is the one that interchanges if you will.

So another way to read it could be:

1. Header
2. Navbar
3. Forumhome OR Forumdisplay OR Showthread etc etc.
4. Footer

Now for those of you that have already delved into the style manager and the new stylevars system in vbulletin 4 you might be more familiar with this more complex breakdown:

1. Header
2. Headinclude
3. headinclude_bottom
4. Navbar
5. Showthread *this wraps the postbit template and houses controls above and below.
6. postbit
7. Footer

Now I did say more complex and as you can see I mentioned the showthread template wraps the postbit template right? Well of course but how? vBulletin can call a template via a variable, so in the showthread template it calls the postbit template with one simple snippet of code... you can also call forth variables that display information and additionally you can also utilize template conditionals to show or hide data and present it in various ways within your sites templates i.e. style.

Now let's do a quick run-through of some of the templates we listed above, please see my notes above each image with color coded references.

Header

https://vborg.vbsupport.ru/external/2011/01/42.png



Navbar

https://vborg.vbsupport.ru/external/2011/01/43.png



Forum Home (Forumhome)


https://vborg.vbsupport.ru/external/2011/05/34.png



Threadbit (Showing list of threads etc)


https://vborg.vbsupport.ru/external/2011/01/44.png

Showthread/Postbit (Showing list of posts etc)


https://vborg.vbsupport.ru/external/2011/01/45.png



Footer

https://vborg.vbsupport.ru/external/2011/01/46.png

Now that you have viewed a few of the templates and corresponding images and labels it should be easier to ask for assistance on the forums. If your ever unsure of the name for something, anything related to the styling of vBulletin refer to this guide and post new questions below, if they are indeed style related and we can offer some tips I'll add them to the guide ;).

*I do plan on expanding this into specific breakdowns for each forum template and how to customize each however in multiple threads as I feel one long post will become confusing over time.

Great article Mike!

nice writeup!

TY and due in part to your great tips before it was published ;).

We all try! Did you see DJ's new article here: https://vborg.vbsupport.ru/showthread.php?t=256394

We're making waves come on in for a swim :D.

This is a very very informative article! I am sure it will help a lot of people out!

Hey KevinL, I know you ;)

I hope it is, remember you can suggest some info and I'll add it in plus very soon I'll have links to articles that will go in-depth for each template :D.

Great article this will help everyone ..............

--------------- Added [DATE]1294324135[/DATE] at [TIME]1294324135[/TIME] ---------------

can anyone tell me how to change the background of the forum .... ??

AdminCP > Styles & Templates > Style Manager > *Select "StyleVars" from the drop-down to the right of your style.

Now look for Common and under that category header you'll see a list of commons stylevars many parts of your site use, scroll down that list and look for "doc_background" and click it, now change the background color OR add in an image as well!

OR

You can also overwrite this entirely by pasting your own body css definitions in the additional.css template if you wish, example:

So in essence you have two ways, the way vBulletin "expects" you to change/update it using stylevars OR by being sneaky with CSS ;) and fyi that was simply example css there are a few different ways you can make it achieve what you want in terms of css :D.

Thanks for help ................

Very Nice Article :up:
Thanks TheLastSuperman

No problem you two and if you have any questions don't be afraid to post :D.

Hello TheLastSuperman,

How are you ? I have some question about the header part here are they ....

- first is there any way to increase header height ?
- how can i bring the logo to middle .....
- how to bring some space above the header as i want to place an advertisement there ....


and last but not the lest can you tell me just the stylevars that are used in this image below to make it look something like that .... as if you can tell me then i will get the complete knowledge about how to edit the header part .....

https://vborg.vbsupport.ru/external/2011/02/16.png

I hope i didn't disturbed you as if you can help me out lil bit ....

Thanks

This is a fantastic article and will help me immensely.

Header height - Edit vbulletin-chrome.css and find:

Change min-height:35px; to the value you want OR add in a height:50px; but imo I would use min-height ;).

Header to the middle - You can find that info here: http://www.vbulletin.com/forum/showt...enter-the-Logo

Space above the header - You can add in a new DIV or simply increase the height I would think should not be too hard once you start tinkering ;).

--------------- Added [DATE]1298342223[/DATE] at [TIME]1298342223[/TIME] ---------------

Thanks and glad it's useful :cool:.

Thanks TheLastSuperman..... it helped me a lot in understanding how to resize the header ....

As usual, great tut TLSman ;)

I'm a complete CSS novice so this is great for me (am working my way through the w3 page on CSS). However, I've looked everywhere I can think of, and as I'm still a novice I dont want to tinker too much just yet, but I can't for the life of me find where to change the default Times New Roman text for the "The Front Page" as the home page title. Really want to turn it into a sans-serif font.

Great :cool:.

TY TY :D.

That default text/font style is in the stylevars if I remember correctly ;). Also did you know? you can create a "Child Style" of your main style used and tinker your heart out? Yes and without interrupting or causing display issues for your members using the "Parent Style".

At the cost of making just another "wow, this is great", post- I want you to know how much this thread is helping me make the journey from years of vb 3.7 bigotry to the world of VB4 :)

I've applied a lot of hacks and skin/template customizations in my 3.7 that it was always going to be a royal pain to get converted. The stylevar redo alone was very difficult for me as the vb is really inadequate on explaining this. Having to use the search process for every last style variable is a stone age approach, and you need a good understanding of CSS so you can determine the correct inheritance. The video is a good one, but it assumes you understand the context, and many do not.

The tools you listed here really, really help. So - Thank you. I hope you have a beverage of choice on me :)

I'm sorry if my opinion on vb stock documentation concerning stylevars offends developers, but it is a sorry piece of work in that respect. Any time we only document 40% of something, it's better off left undone. And being an IT Architect (mainframe thru PC's) for 33+ years and writing white papers for a living, I figure I've got a slight insight on the matter. Maybe it's just too many years of having every last bit (and i do mean a bit as in 8 to a byte) defined in IBM manuals and being able base programming and process off such a foundation has spoiled me.

At any rate, Superman, you did me a good service here.

Thank you so much for the sincere and kind words, I truly do appreciate your sentiment ;) and I know things will become better on the documentation, it has recently so I look forward to it improving however we can't compare apples to oranges nor should we imo :cool:. As for the drink.. I'm not much of a drinker, it's just how things turned out after overdoing it very badly one night, many years ago in a galaxy far, far away :D.

"Beverage of Choice"... Umm, I meant any kind of bev :) I too do not drink, unless it is somehting special, or anesthesia is needed (like an overextended visit of in-laws).

From all the years I have written code, good documentaation is good documentation. Doesn't mtter if it's a good set of comments in the code, or producted ia word doc, or PDF.

I do not accept the notion that doc is different because of what computing platform it represents. I have this "dialouge" all the time with mainframers, midrangers and Nix folks all the time. They too think it's differrent with the genre, but it really isn't. It can be done, just requires the time and effort, and in our leveraged societies, time to endeavors like that is not allowed by upper managment who have a "let them learn on their own dime" mentality. I know that my upper exec' at the large outsourcer I work at has this idea. leads to train wrecks in the technical ranks.

As the pioneers of open source, we can do much better.

So helpful.

I am going to bookmark this and come back often

thank you

Well each time post a question, after a few build up here in the thread I'll edit the article accordingly and add in more information :cool:.

this has been very helpful, the only thing that could make this better would be if you added the stylevars used in each picture/part.

I just want to say thank you for this great article. You made my day TheLastSuperman

Hello again chief! I sent you a small PM for some advise.
Hope you don't mind ?!? ;)

Cheers

Very Informative. Thank You :)

really great work ........ thank you

I have seen you around and I must say you're truly the Superman of vB. This article will go a long way in helping me understand vB's theme & template system.

I have a question, how can I remove the header content (use the background as a replacement) as if the header content was crystal clear and you can whatever image you have in the background.

I hope I made some sense.

Actually that's not as hard as some think and I've done it in a few styles, then using the background image made the style using it... for example here's a style where I did something similar - http://www.8bitfix.com/content/ now see how I've relocated the toplinks(login/welcome username) to the navbar and adjusted?

From another thread I helped in:

Now you can take all the code within the <div id="toplinks"> <div> and paste into the navbar then move around accordingly, review your header template and it should be something very short now i.e.

^ So as you can see once done your header template will be very "short" ;). You've now relocated the toplinks to the navbar and either need to adjust them OR you can still do other little things and achieve the same effect namely tellinlg the toplinks css to be so far from the top i.e. change top:0; to top:200px; or something along those lines and not to mention you can use the plugin and leave the login in the header using a conditional then showcase the userinfo when they are logged in somewhere else as well but both must use the appropriate conditionals.

Now for the background use the stylevars and tell it what images to use or simply overwrite it using additional.css *(You still may want to set some of the header stylevars to transparent so basically if it has in #41f3b7 as the color backspace that and type in transparent (only the word no # or anything else) and save over that stylevar.

Paste into additional.css and adjust to suit:

The true body css info is in vbulletin.css however upon upgrading you would overwrite it so best bet is to add your own definition to additional.css.

Original body css from vbulletin.css:

And there you have it in so many ways and words (lol) so make a *child style of your main style and then test this so your not disturbing your members with style glitches as you tinker along ;).

Thank you so much, your post has saved hours and hours of my time as I'm certainly not the brightest when it comes to customizations =D

Three cheers for TheLastSuperman!

Hi How do i change padding left 68 default template forum home can't seem to find it?

.forumbit_post .foruminfo .forumdata .datacontainer {
float: left;
padding-left: 68px;
width: 88%;
}

Hmm what exactly are you looking to do? That definition is the container, I believe you want to modify a element within it or around etc can you provide a screenshot?

hi i need to change padding-left: 68px width to 10

Screenshot otherwise I'm assuming you've removed the statusicons and want to move the area to the left so there's not a large space before the actual title/description?

yes thats what ive done removed the statusicons forum home page and want to move the area to the left so there's not a large space before the actual title/description?

You don't have Paint? GIMP? Photoshop?

thaks very good

In forumbits.css find:

Replace with:

thanks for the help