Style References for vBulletin 4.x

[TheLastSuperman]

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 (http://www.vbulletin.com/forum/forumdisplay.php/95-vBulletin-Style-Packs)
Free styles on vBulletin.org (https://vborg.vbsupport.ru/forumdisplay.php?f=247)
vBulletin Customization forum on vBulletin.com (http://www.vbulletin.com/forum/forumdisplay.php/26-Customizing-vBulletin)
vBulletin 4 Quick Tips and Customizations (http://www.vbulletin.com/forum/forumdisplay.php/156-vBulletin-4-Quick-Tips-and-Customizations)
vBulletin 4 Design and Graphic Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
Articles on vBulletin.org with tons of useful information (https://vborg.vbsupport.ru/forumdisplay.php?f=184)
How to find a stylevar (video version) by Trevor Hannant (http://www.vbulletin.com/forum/content.php/290-How-To-Find-a-StyleVar-(video-version))
Design Tool: Show what Stylevars are used on a Page (https://vborg.vbsupport.ru/showthread.php?t=246232)
vBulletin 4 Template Conditionals (https://vborg.vbsupport.ru/showthread.php?t=231525)
Customizing Styles via Plugins Part 1: The Basics (https://vborg.vbsupport.ru/showthread.php?t=307739)


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:


Header
Navbar
Forumhome
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:


Header
Navbar
Forumhome OR Forumdisplay OR Showthread etc etc.
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:


Header
Headinclude
headinclude_bottom
Navbar
Showthread *this wraps the postbit template and houses controls above and below.
postbit
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

The header houses your logo, upper (toplinks) links for a member i.e. Notifications, Settings, and more.

To change your logo, you have two options:Easy = Overwrite the file /images/misc/vbulletin4_logo.png with the new logo simply name it the same i.e. vbulletin4_logo.png and upload to your images/misc directory.
Best = Edit the style variable (StyleVar) for it, AdminCP > Styles & Templates > Style Manager > *Select "StyleVars" in the drop-down menu. > *Now look for ImagePaths then under hit edit "titleimage" and provide the new URL to your custom logo.

To change the colors and effects of your toplinks:Edit the style variables per the above and find: Header and you'll see the stylevars below it with "toplinks" in front of the variables you edit to change ;).

To edit your header template:AdminCP > Styles & Templates > Style Manager > *Select "Edit Templates" in the drop-down beside the styles name. > *Once the new pages loads scroll down and find header and double-click to edit.

To edit most of the CSS and colors related to the header:AdminCP > Styles & Templates > Style Manager > *Select "StyleVars" in the drop-down beside the styles name. > *Once the new pages loads scroll down and find Header and view each stylevar to see a simple description of what it does - temporarily edit to note changes.


Shown in Red(1) is the header area.
Shown in Blue(2) is the logo or "title Image".
Shown in Orange(3) are the toplinks.



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



Navbar

The navbar houses your navbar tabs, their sub-links and menus, plus the breadcrumbs i.e. top navigation.

To edit your navbar template:AdminCP > Styles & Templates > Style Manager > *Select "Edit Templates" in the drop-down beside the styles name. > *Once the new pages loads scroll down and find Navigation and Breadcrumbs Templates and double-click to expand that "family" of templates, now find "navbar" and double-click to edit.

To edit most of the CSS and colors related to the header:AdminCP > Styles & Templates > Style Manager > *Select "StyleVars" in the drop-down beside the styles name. > *Once the new pages loads scroll down and find Navbar and view each stylevar to see a simple description of what it does - temporarily edit to note changes.


Shown in Red(1) is the navbar area.
Shown in Green(2) is a standard navtab. Some useful articles (guides) related to the navbar on how to add a new navtab, a drop-down navtab, and how to add in sub-menus etc can be found here (https://vborg.vbsupport.ru/forumdisplay.php?f=184).
Shown in Yellow(3) is a "selected" navtab or "navtab-selected" as you can see in the image.
Shown in Blue(4) is the navtab-selected sub-menu/sub-links and any drop-down menus as well.
Shown in Grey(5) is the navbar breadcrumbs or "upper navigation" as some call it. *If you wish to have this navigation duplicated and at the bottom of your site please see here (https://vborg.vbsupport.ru/showthread.php?t=229290).
Shown in Orange(6) is the Global search, you can swap out the vBulletin default search for Sphinx (http://www.vbulletin.com/forum/showthread.php/350427-Sphinx-search-BETA-for-vBulletin-4.0) or even replace it with a Google Custom search (https://vborg.vbsupport.ru/showthread.php?t=229247).



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



Forum Home (Forumhome)

The forumhome template displays your categories, forums, and sub-forums depending on your preferences chosen in AdminCP > Settings > Options.


Shown in Red(1) is the forumhome_forumbit family of templates that make up all you see within the red box, you can customize these via editing templates and through stylevars found in the StyleVars under Forums.
Shown in Purple(2) is the forumhome_markread_script, this allows members to easily mark all the forums as read if desired i.e. they don't interact in a certain forum so to mark them all as read in order to view new posts in their desired forum etc etc.
Shown in Grey(3) is the Whats Going On? area commonly referred to as wgo, this can be customized via the CSS templates and also by editing the FORUMHOME template directly, some modifications can alter and display information differently, show recent visitors, show search "spiders" browsing and much more!
Shown in Yellow(4) is the forum sidebar and each "block" has it's own template that is used to display it within the sidebar area on the forumhome page. You can enable the sidebar by going to AdminCP > Settings > Options > Forum Sidebar and Block Options. After you enable simply create the blocks you desire and don't forget to reload the block types so new sidebar "blocks" display properly. To access them easily at any time after enabling the forum sidebar go to AdminCP > Forums & Moderators > Forum Blocks Manager. *This is not the same as the "sidebar" or "blocks" you see on the CMS i.e. Home page if you have the suite, those are referred to as a Widget and are enabled and implemented in a slightly different way!




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



Threadbit (Showing list of threads etc)

The threadbit template houses the list of all threads within a forum, if there are sub-forums they will be shown in a forumhome "forum" style above the list of threads.


Shown in Red(1) is the main part of the threadbit template.
Shown in Green(2) is the threadbit_alt_background or "stats".
Shown in Orange(3) is the lastpost part of the threadbit template.




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

Showthread/Postbit (Showing list of posts etc)

The showthread template houses the postbit template so basically the postbit or posbit_legacy templates are called from the middle of the showthread template then a thread is viewed with all posts shown. The showthread has controls above and below the postbit within it's own respective template.

There are two distinctive templates to choose from in regards to how your posts display. To access the setting for this and change go to:

AdminCP > Settings > Options > Style & Language Settings

Now look for: Use Legacy (Vertical) Postbit Template and please note the description;
If you prefer the old-style postbit, using two vertical columns rather than the new horizontal layout, you can switch back to using that template with this switch.

Please note that if you enable this option and wish to customize the template, you should edit the 'postbit_legacy' template rather than the 'postbit'.

So using the postbit template your posts will appear as they do on vbulletin.org with the username and info running horizontal along the top of posts where as using the postbit_legacy template will display your posts within a box to the left of each post as you see here currently on vbulletin.com.


Shown in Red(1) are the parts of the postbit template.
Shown in Blue(2) are the parts of showthread and as you can see it also shows a reference of how it's above and below the postbit template.




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



Footer

The template template houses your style and language drop-down's or some call them selectors and your footer links. In addition it also houses the code for the scripts related to each of those functions.


Shown in Red(1) are the parts of the footer template.
Shown in Royal Blue(2) are the footer links or as seen in template and css, footer_links.
Shown in Yellow(3) is the style selector, if you have multiple languages available for your vBulletin forum another drop down will also appear for you to choose the correct language, very similar to the style selector.
Shown in Green(4) is the footer time.
Shown in Purple(5) is the copyright.



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.

[Princeton]

Great article Mike!

[Brandon Sheley]

nice writeup!

[TheLastSuperman]

Great article Mike!

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

nice writeup!

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.

[KevinL]

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

[TheLastSuperman]

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.

[fluidswork]

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

--------------- Added 1294324135 at 1294324135 ---------------

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

[TheLastSuperman]

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

--------------- Added 1294324135 at 1294324135 ---------------

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:

body {
background-image: url(images/myimage.png);
background-repeat: repeat-y;
background-position: top;
}

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.

[fluidswork]

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

[Gn_Snake]

Very Nice Article :up:
Thanks TheLastSuperman

[TheLastSuperman]

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.

[fluidswork]

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

[bearcub]

This is a fantastic article and will help me immensely.

[TheLastSuperman]

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

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

.doc_header {
_background-image:none;
border:{vb:stylevar header_border};
color:{vb:stylevar header_color};
font:{vb:stylevar header_font};
position:relative;
min-height:35px;
/*padding-bottom:{vb:math {vb:stylevar padding}/2};*/
/*margin-bottom:{vb:math 2 * {vb:stylevar navbar_tab_size.height}}px;*/
}

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/showthread.php/347539-How-To-Center-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 1298342223 at 1298342223 ---------------

This is a fantastic article and will help me immensely.

Thanks and glad it's useful :cool:.

[fluidswork]

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

[fxwoody]

As usual, great tut TLSman ;)

[yospeck]

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.

[TheLastSuperman]

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

Great :cool:.

As usual, great tut TLSman ;)

TY TY :D.

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.

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

[bitbender]

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.

[TheLastSuperman]

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.

[bitbender]

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

[doc fluty]

So helpful.

I am going to bookmark this and come back often

thank you

[TheLastSuperman]

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

[Wordplay]

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.

[Divokymuz]

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

[fxwoody]

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

Cheers

[AttalaEA]

Very Informative. Thank You :)

[TheTrust]

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

[Sage Knight]

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.

[TheLastSuperman]

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:

Create a new plugin:

AdminCP > Plugins & Products > Add new plugin

Product = vBulletin
Hook Location = process_templates_complete
Title = Login relocated to Navbar
Execution order = 5
Plugin PHP Code:
vB_Template::preRegister('navbar', array('notification_menubits' => $notification_menubits));
Plugin is active = Yes

Now view your site, it should be there however this was a "Basic How 2 Guide" now you'll notice right off the bat it's to the right a bit too much and depending on your screen resolution and/or max width on your site it could flow under the search so you must adjust CSS and more to make it look right for your site and Lynne supplied one of you plus it's posted above some tricks to adjust the toplinks css ;).

https://vborg.vbsupport.ru/external/2011/07/5.png


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.

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:raw vboptions.bbtitle}" /></a></div><vb:else /><div>&nbsp;</div></vb:if>

<div class="ad_global_header">
{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>
<hr />
</div>


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

body {
background-color: #ffffff;
background-image: url(images/myimagename.png);
background-repeat: no-repeat;
background-position: top;
}

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:

/* BASIC PAGE ELEMENTS */

body {
width:{vb:stylevar doc_width};
min-width:{vb:stylevar doc_minWidth};
max-width:{vb:stylevar doc_maxWidth};
margin: {vb:stylevar doc_margin};
font-size:{vb:stylevar font.fontSize}px;
color:{vb:stylevar body_color};
line-height:{vb:stylevar line_height};
}

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 ;).

[Sage Knight]

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!

[appsfinder]

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%;
}

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

[appsfinder]

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

[TheLastSuperman]

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?

[appsfinder]

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?

[HMBeaty]

sorry no screenshot software
You don't have Paint? GIMP? Photoshop?

[Ahmet Turan]

thaks very good

[TheLastSuperman]

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?

In forumbits.css find:

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

Replace with:

.forumbit_post .foruminfo .forumdata .datacontainer {
float: {vb:stylevar left};
width: 88%;
padding-{vb:stylevar left}: {vb:math {vb:stylevar padding}*2};
}

[appsfinder]

thanks for the help

[flogs]

Hi

On this style below I cant get a simple border around the header or navbar using the style vars any help?


http://www.lostoppos.co.uk/testvb/

[TheLastSuperman]

Hi

On this style below I cant get a simple border around the header or navbar using the style vars any help?


http://www.lostoppos.co.uk/testvb/

Sure you can ;) try this...

Edit vbulletin-chrome.css and find:

.above_body {
background:{vb:stylevar header_background};
_background-image: none;
margin: {vb:stylevar bodyheader_margin};
padding: {vb:stylevar header_padding};
-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}

Replace with :

.above_body {
background:{vb:stylevar header_background};
_background-image: none;
border-{vb:stylevar right}: 1px solid #151515;
border-bottom: 1px solid #151515;
border-{vb:stylevar left}: 1px solid #151515;
margin: {vb:stylevar bodyheader_margin};
padding: {vb:stylevar header_padding};
-moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
}

Change the #151515 to suit :cool:. *We shouldn't simply use border: value etc; because most imo would not want a top border on that area.

[flogs]

Thats perfect.

Thank you for your help.

[20paws4awd]

I have managed to change something that u cant seem to recitify.i have revereted all file taht i can find that have been altered (wasnt much) and it still doing this even after clearning cache.

It only does it to threads that have attachments

https://vborg.vbsupport.ru/external/2012/01/38.png

and it seems to have affected the boxes when i do a "New Posts" search.

https://vborg.vbsupport.ru/external/2012/01/39.png

[TheLastSuperman]

I have managed to change something that u cant seem to recitify.i have revereted all file taht i can find that have been altered (wasnt much) and it still doing this even after clearning cache.

It only does it to threads that have attachments

Image*

and it seems to have affected the boxes when i do a "New Posts" search.

Image*

Post a link to your site and I'll have a look...

[Disco_Dave]

Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave

[TheLastSuperman]

Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave

I'm assuming your speaking about replacing the bottom "dull" image with what's shown at the top i.e. the nicer blue with rounded corners? Of that's the case you will need to modify some templates and css to show it properly but let me know.

[Disco_Dave]

Hi

Thanks for the reply, I would like to add the fish logo plus the rounded corners. I couldn't get the colour to be the same for some reason using the stylevars.

Is it possible to use the original css templates for this? We have no web designer now he's gone AWOL.

Dave

[Disco_Dave]

Hi

Great write up helped a lot, I've found the stylevars to be much easier to use then editing templates, as I know nothing about editing templates or css etc.

I have one last thing to do on our test site before we move, I would like to insert this image below into the forumhome on vb4 like it is on vb3 is this possible?

Regards,
Dave

Can anyone help with this, I'd really like to get vb4 to look like our old forum. Need to learn how to put the image in on the left also.

Regards,
Dave

[TheLastSuperman]

Can anyone help with this, I'd really like to get vb4 to look like our old forum. Need to learn how to put the image in on the left also.

Regards,
Dave

Well you can try something simple i.e.

Edit additional.css and try something along the lines of:

.forumhead {
background: #1a9fda url(images/buttons/home.png) no-repeat;
}

^ Rough Example and that also removes the ability to define a image background for forumhead, meaning that using this method shown above you can't specify a alternate background i.e. a Gradient image as shown in your attachment.


Another method is editing the templates themselves that contain the forumhead <div> tags i.e.

Edit forumhome_forumbit_level1_nopost and find:

<li class="forumbit_nopost {vb:raw forum.statusicon} L1" id="cat{vb:raw forum.forumid}">
<div class="forumhead foruminfo L1 collapse">
<h2>
<span class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></span>
<span class="forumthreadpost">{vb:rawphrase threads_posts}&nbsp;</span>
<span class="forumlastpost">{vb:rawphrase last_post}</span>
<vb:if condition="!$show['collapsable_forums']">

Add the code shown in blue:

<li class="forumbit_nopost {vb:raw forum.statusicon} L1" id="cat{vb:raw forum.forumid}">
<div class="forumhead foruminfo L1 collapse">
<h2>
<span class="forumimage"><img src="images/buttons/home.png" alt="{vb:raw forum.title}" /></span>
<span class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></span>
<span class="forumthreadpost">{vb:rawphrase threads_posts}&nbsp;</span>
<span class="forumlastpost">{vb:rawphrase last_post}</span>
<vb:if condition="!$show['collapsable_forums']">

Now edit additional.css and add:

.forumimage {
padding-left:5px;
}

.forumbit_nopost .forumhead .forumtitle a {
margin-left: 5px;
}

^ And that method allows you to still define a gradient image background on forumhead and also inserts your image (*Adjust the forumhead background/colors via the stylevars system respectively and swap out the filename home.png in the code shown and link directly to your small & cropped white fish image and call it a day!) :cool:.

https://vborg.vbsupport.ru/attachment.php?attachmentid=136968

[Disco_Dave]

First class, this should help us a lot...

Thanks for your time
Dave

[K4GAP]

As of today's date, is this article accurate to include 4.2 ?

[tacklebox joe]

best post i've read so far....great job! Thank you for this informative post! :up:

[TheLastSuperman]

As of today's date, is this article accurate to include 4.2 ?

It *should* be however don't hold me to that if let's say you find one discrepancy lol :p however if you run into something regarding 4.2 that seems different or is not covered here simply ask.

[tacklebox joe]

no probs with vb4.2.0 PL3 regarding these instructions that i've personally encountered so far

[TheLastSuperman]

no probs with vb4.2.0 PL3 regarding these instructions that i've personally encountered so far

Thanks for the feedback Joe :D.

[anagnam]

hi TheLastSuperman,

I tried changing the min-height in the .doc_header of vbulletin-chrome.css but it dos not reflect the changes after saving . any idea as to why?

[darnstrong]

Hey Supes,

your thread has been invaluable and I thank you HUGE for it!, I was wondering thou.. if you take a look at my forum www.autismfamilyforums.com you will notice the crowd in my header, and the space between the bottom of them... I would like to know why that is there?, and how can I get the crowd to sit on the nav bar?

Thanks in advance..

Don

PS: I am a HUGEEEE Superman fan myself... and work in comics... look me up on facebook.

https://www.facebook.com/JediColourist

[darnstrong]

http://i117.photobucket.com/albums/o71/Highlander_2007/Navbar2_zps4ebb1a5d.png (http://s117.photobucket.com/user/Highlander_2007/media/Navbar2_zps4ebb1a5d.png.html)

Where do I change the Text colour I have circled and with happy face, I have looked everywhere and I can't seem to find where it is :)

Thanks

Don

[TheLastSuperman]

https://vborg.vbsupport.ru/external/2014/01/3.png (http://s117.photobucket.com/user/Highlander_2007/media/Navbar2_zps4ebb1a5d.png.html)

Where do I change the Text colour I have circled and with happy face, I have looked everywhere and I can't seem to find where it is :)

Thanks

Don

Well the bottom half can be easily modified via adding this to additional.css:

#welcomemessage {
color:#ff4400 !important;
}

If we try this version to also snag the title, this is when it changes on all pages:

#pagetitle h1, #welcomemessage {
color:#ff4400 !important;
}


It's the top half i.e. the page title that is the issue, if you modify that via css per the bottom example above it changes on all pages not simply forumhome (which we will assume you do not want to do, only make the change on forumhome naturally) so you can at this point either:

1) Modify the template and specify the css via style="css here;" example:

Edit the FORUMHOME template and find:

<div id="pagetitle">
<h1>{vb:raw vboptions.bbtitle}</h1>
<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
</div>


Change to:


<div id="pagetitle" style="color:#ff4400 !important;">
<h1>{vb:raw vboptions.bbtitle}</h1>
<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
</div>


OR

2) Make a plugin for this:

AdminCP > Plugins & Products > Add New Plugin

Product: vBulletin
Hook location: parse_templates
Title: Custom Style Changes
Execution Order: 5
if (STYLEID == 1) {
if (THIS_SCRIPT == 'forumhome') {
$cssfix = '<style type="text/css">
#pagetitle {
color:#ff4400 !important;
}
</style>';
$template_hook[headinclude_bottom_css] .= $cssfix;
}
}


Change the STYLEID == 1 i.e. change the 1 to the styleid # of the style you are changing this in otherwise it will change in all styles not just the one in question you're working on ;).


So it's either option 1 or 2, option one means one less plugin on your site, option two is not technically css correct in a sense i.e. they say its best to use id="cssid" or class="cssclass" instead of style="css code here directly" but imho that's better than a plugin parsing/checking etc but the choice is up to you ;).

[final kaoss]

Thanks, this thread should be stickied.

[JacquiiDesigns]

Wow! Great tutorial. This should prove an invaluable resource in the coming weeks.
Thanks so much for the info share!

J.

[londoner]

wow great post , thanks for all ur effort mate :)

[RichieBoy67]

Really helpful thread! Thanks dude!

[TheLastSuperman]

Well the bottom half can be easily modified via adding this to additional.css:

#welcomemessage {
color:#ff4400 !important;
}

If we try this version to also snag the title, this is when it changes on all pages:

#pagetitle h1, #welcomemessage {
color:#ff4400 !important;
}


It's the top half i.e. the page title that is the issue, if you modify that via css per the bottom example above it changes on all pages not simply forumhome (which we will assume you do not want to do, only make the change on forumhome naturally) so you can at this point either:

1) Modify the template and specify the css via style="css here;" example:

Edit the FORUMHOME template and find:

<div id="pagetitle">
<h1>{vb:raw vboptions.bbtitle}</h1>
<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
</div>


Change to:


<div id="pagetitle" style="color:#ff4400 !important;">
<h1>{vb:raw vboptions.bbtitle}</h1>
<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
</div>


OR

2) Make a plugin for this:

AdminCP > Plugins & Products > Add New Plugin

Product: vBulletin
Hook location: parse_templates
Title: Custom Style Changes
Execution Order: 5
if (STYLEID == 1) {
if (THIS_SCRIPT == 'forumhome') {
$cssfix = '<style type="text/css">
#pagetitle {
color:#ff4400 !important;
}
</style>';
$template_hook[headinclude_bottom_css] .= $cssfix;
}
}


Change the STYLEID == 1 i.e. change the 1 to the styleid # of the style you are changing this in otherwise it will change in all styles not just the one in question you're working on ;).


So it's either option 1 or 2, option one means one less plugin on your site, option two is not technically css correct in a sense i.e. they say its best to use id="cssid" or class="cssclass" instead of style="css code here directly" but imho that's better than a plugin parsing/checking etc but the choice is up to you ;).

Finally got around to making this into an article and edited the Useful Links section of this one to include it - https://vborg.vbsupport.ru/showthread.php?t=307739

[Kirkus]

OK, I know this is an old(er) thread. But I had to post a big fat Thank You for the original post and the rest of this thread. It's inclusive and the only thing I could find that had so much information on creating/editing vBulleting Styles. So...

Thank you!!

[belkassem]

After few years I think this article is a reference. Time won't get rid of the content. Still helpful. Thank You.

[nolimitreef]

I am going nuts and losing so much sleep over this issue.

We have 2 logos so rather than using a logo at all we are trying to make the header background image an image map. There are 2 places in this image I'd like to make hot links if you will. How exactly would I go about this and where? Is it even possible? Well actually I know it is because I sort of did it but it covered the toplinks. Your help would be GREATLY appreciated. I have included the locations of each and our url in case you need it.

Thank you!

<AREA SHAPE=rect COORDS="155,126,704,250" HREF="http://www.nolimitreef.com/index.php" ALT="Reef Aquarium Forum">
<AREA SHAPE=rect COORDS="482,4,893,117" HREF="http://www.nolimitreef.com/dbtclassifieds.php" ALT="Reefbay classifieds Buy Sell Trade">

http://www.nolimitreef.com

[TheLastSuperman]

I would use a fluid three part div area... example:

<div class="placeholder">
<div class="firstlogo"><a href="url"><img src="url" alt="blah" /></a></div>
<div class="secondlogo"><a href="url"><img src="url" alt="blah" /></a></div>
</div>

It looks like you're using some program to make an image map, those will work but some get confused making/using them here's a guide by Mozilla to help you grap them better - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map so you can still use your map and insert it into the header template and remove the default logo OR you can tinker around with div classes and use something similar to the snippet I posted above where placeholder is the width+height of the area and first and secondlogo div classes are the two logo div's that hold the logo ahref+image code.

[nolimitreef]

I would use a fluid three part div area... example:

<div class="placeholder">
<div class="firstlogo"><a href="url"><img src="url" alt="blah" /></a></div>
<div class="secondlogo"><a href="url"><img src="url" alt="blah" /></a></div>
</div>

It looks like you're using some program to make an image map, those will work but some get confused making/using them here's a guide by Mozilla to help you grap them better - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map so you can still use your map and insert it into the header template and remove the default logo OR you can tinker around with div classes and use something similar to the snippet I posted above where placeholder is the width+height of the area and first and secondlogo div classes are the two logo div's that hold the logo ahref+image code.

Thank you! I'll give that a shot. :) Yes it is an image map app from Ulead Smart Saver Pro v3.0 (very old but basic). I needed to place absolute positioning to the 2 embedded logos clear image to link them. It did work however. But I don't know if what I did has anything to do with my other header issue or not though.

In Advertising; header1 and header2 locations do not work. The other locations do work for the same code. I used a JS simple banner rotator script in header2 and it didn't show. but when I tried it in other other locations it worked perfect. We'd really like header2 to work for our advertisers. Actually we'd love to have header1 and header2 stacked on the right and have seen it but can't find the code. If you could help with this issue or point me in the right direction I would appreciate it

[TheLastSuperman]

^ Try this - https://vborg.vbsupport.ru/showthread.php?t=228319

I forgot to find that link yesterday and share so here it is today lol! Needless to say.. tinker with that three part header until you get the gist of how it works then you can adjust it to make your logos appear :D. You can position them using css only UNLESS one little part of the banner is clickable OR for example if you had a banner ad... it was for advertising a repair shop and only the wrench in the mechanics hand was clickable then you would use an image map or another way to go about it but if the entire rectangular banner is supposed to be a link to their site or a page in question then its easier to make the entire banner clickable and you can position them where you want using css only and not even mess with all that map stuff or even need to open your program.

*Don't forget, you can make a "child" style of another, then make changes there so the main style is not affected.

[nolimitreef]

Thank you, much appreciated!

[friendlymela]

very very useful thanks for share this all information

[Wmteknik]

Thank you.

[rbc]

Still a fantastic article.
Unfortunately never seen before. Thank you :)

[final kaoss]

I want to expand the width of some elements (to 100%), how would I go about doing this for the following areas?

Also, I want to expand the width of those general locations in the forumhome, showthread & showforum areas. Basically, (almost) everything that is in a table in these areas, should be set to %100 so that they resize to fit when someone zooms in & out on a mobile device.

[chikuru]

I want to expand the width of some elements (to 100%), how would I go about doing this for the following areas?

Also, I want to expand the width of those general locations in the forumhome, showthread & showforum areas. Basically, (almost) everything that is in a table in these areas, should be set to %100 so that they resize to fit when someone zooms in & out on a mobile device.

Have you tried setting 100% in the doc_width style var?

[final kaoss]

Alright I've set

doc_width
doc_midWidth & MaxWidth to %100

Seems alot better with that change.