vBulletin LTS

← Back to vBulletin 4 Articles

Customizing Styles via Plugins Part 1: The Basics
by TheLastSuperman 31 Jan 2014
Rating: (3 votes - 5.00 average)
vBulletin utilizes files and templates to render it's pages and in some cases certain div classes and id's are shared across different pages, if you make a change to the default definition it can affect other pages with undesired results. This guides offers some tips and tricks on how to use plugins to alter your css based on certain conditionals and additionally shows some examples of how to create different logos and background per forum without the need for multiple additional styles to be created and set per forum.

*Please keep in mind not everything related to your style in terms of CSS can be altered by a plugin, in some cases you will be required to write custom definitions and make replacements in templates depending on the level of customization you wish to achieve however as mentioned above a plugin can be used to alter logos and backgrounds per forum plus many other aspects of the site if done properly!

Some useful links:
  • http://www.vbulletin.com/forum/forumdisplay.php/95-vBulletin-Style-Packs
  • http://www.vbulletin.org/forum/forumdisplay.php?f=247
  • http://www.vbulletin.com/forum/forumdisplay.php/26-Customizing-vBulletin
  • http://www.vbulletin.com/forum/forumdisplay.php/156-vBulletin-4-Quick-Tips-and-Customizations
  • http://www.vbulletin.org/forum/forumdisplay.php?f=253
  • http://www.vbulletin.org/forum/forumdisplay.php?f=184
  • 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
  • vBulletin 4 Template Conditionals
  • Style References for vBulletin 4.x

Getting Started:

I've been doing this for quite a while now after running into a few issues when developing extreme custom styles however some are not aware of it and I wanted to share.

Rough Examples:
  • Initially I first mentioned this on the org in my article Style References for vBulletin 4.x in post #60

    Spoiler (click to open)


    Quote by darnstrong
    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:

    Code:
    #welcomemessage {
color:#ff4400 !important;
}
    If we try this version to also snag the title, this is when it changes on all pages:

    Code:
    #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:
    Code:
    	<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:

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

    Close
    . As you can see member Darnstrong wanted to customize a certain area of his site, the issue was however that the css was shared by more than one template/page so I explained how to use this process.
  • Kat-2 installed a style of mine and asked why there was a issue with links colors when using a chatbox mod by Valter so I had a look into the issue and found that changing it via the additional.css template would not do the trick, instead we needed to use a plugin. To read more about her issue and why we used this in her situation reference pages 38 and 39 of my style thread.
  • Finally another example and what prompted me to finish this article was member booble in his thread here. *Please note that he used the information on pages 38 and 39 I hyperlinked to above as a guide to sort his issue.

Overall what we need to realize is how this process works, how we can customize it to suite our needs and then we have control. Lets start with an example, this way you understand why its required on occasion.

Basic Example:

For our basic example I'm going to use an example similar to the one I posted in my Style References for vBulletin 4.x thread because it's a very basic and easy to follow example:

Quote by darnstrong
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
Don was wanting to change the welcome text to a different color. I started to tell him how to modify this via the additional.css template until I realized that definition was shared on other pages and he would more than likely not like the change to occur on the other pages.

We can see that if the css was not shared then the bottom half can be easily modified via adding this to additional.css:

Code:
#welcomemessage {
color:#ff4400 !important;
}

If we try this version to also snag the title, this is when it changes on all pages:
Code:
#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:
Code:
	<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:

Code:
	<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) Recode the template and on the forumhome page use a new/different css definition for the title id in the example we'll use "yourname" as the id name.

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

3) Make a plugin for this:

AdminCP > Plugins & Products > Add New Plugin

Product: vBulletin
Hook location: parse_templates
Title: Custom Style Changes
Execution Order: 5
PHP Code:
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 .

Can it contain more? Sure! Here's an example:

PHP Code:
if (STYLEID == 1) {
if (THIS_SCRIPT == 'forumhome') {
$cssfix = '<style type="text/css">
#pagetitle {
color:#FF4400 !important;
}
</style>';
$template_hook[headinclude_bottom_css] .= $cssfix;
}

if (THIS_SCRIPT == 'forumdisplay') {
$cssfix2 = '<style type="text/css">
#pagetitle {
color:#FF0000 !important;
}
</style>';
$template_hook[headinclude_bottom_css] .= $cssfix2;
}
} 
As you can see now the color changes to orange when on forumhome yet to red when on the forumdisplay page.

The above are very basic examples. You can add in all forms of conditionals to the plugin and literally use it to your advantage when customizing styles. In my next part "Customizing Styles via Plugins Part 2: Advanced Concepts" I'll be sharing how to do custom logos, backgrounds, and very in-depth changes to styles using this plugin method as seen on the http://forums.pocketgems.com/ - try navigating to a few of their different forums, the logos and background change to match a game that forum relates to!

One more http://www.vbulletin.com/forum/forum/vbulletin-4/vbulletin-4-questions-problems-and-troubleshooting/427256-show-permission-name-for-pro-members
Now that you have viewed a few examples of situations where plugins can be effectively used to alter your style to suite, give it a shot! If you have issues with a certain css on a page or from a mod this could be a solution for you. If you're ever unsure about a particular css class or id for something, anything related to the styling of vBulletin refer to this guide and post new questions below, if they are indeed css related and we can offer some tips on how to make the plugin work I'll surely add them to this guide.

vblts.ru supports vBulletin®, 2022-2024