Customizing Styles via Plugins Part 1: The Basics

		vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
Customizing Styles via Plugins Part 1: The Basics

Thread Tools

Customizing Styles via Plugins Part 1: The Basics

TheLastSuperman

Senior Member

Join Date: Sep 2008

Posts: 5,844

Hey vb.org members and coders! Not much to say except I have a beautiful wife, three fantastic kids

North Carolina

TheLastSuperman TheLastSuperman is offline

01-30-2014, 11:00 PM

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:

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

Originally Posted by darnstrong

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 PocketGems forum - try navigating to a few of their different forums, the logos and background change to match a game that forum relates to!

One more rough example.

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.

03-21-2014, 06:17 AM

CAG CheechDogg CAG CheechDogg is offline

Join Date: Feb 2012

Location: Riverside, California USA

Posts: 1,080

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Great article ! Can't wait for part 2!

Благодарность от:
TheLastSuperman

03-21-2014, 08:59 AM

Disco_Dave Disco_Dave is offline

Join Date: May 2011

Location: Belfast

Posts: 586

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Nice one

Your first article on this helped me understand how vb fully worked...

Благодарность от:
TheLastSuperman

03-21-2014, 06:28 PM

TheLastSuperman TheLastSuperman is offline

Senior Member

Join Date: Sep 2008

Location: North Carolina

Posts: 5,844

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Quote:

Originally Posted by CAG CheechDogg

Great article ! Can't wait for part 2!

I'll try to make it happen sooner rather than later, already have my example in mind

Quote:

Originally Posted by Disco_Dave

Nice one

Your first article on this helped me understand how vb fully worked...

I remember you

and glad it helped out back then its always nice to hear that!

Благодарность от:
CAG CheechDogg

03-26-2014, 05:53 PM

chikuru

Join Date: Nov 2011

Posts: 228

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Thanks for the ideas.
I did the same with one of my forums. But I created child theme for each game sections.

Благодарность от:
TheLastSuperman

04-21-2014, 10:59 PM

fxdigi-cash fxdigi-cash is offline

Join Date: Jul 2012

Posts: 674

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

great article.

I wish though if there is a way how to use custom style with custom language on a custom vb page,

04-22-2014, 12:31 AM

K4GAP

Join Date: Mar 2008

Posts: 1,255

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Great, very useful, informative article!

Thanks

Благодарность от:
CAG CheechDogg

« Previous Thread | Next Thread »

Thread Tools
Show Printable Version Email this Page

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules

Forum Jump

All times are GMT. The time now is 04:17 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04159 seconds Memory Usage 2,290KB Queries Executed 22 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (5)bbcode_code (2)bbcode_php (3)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_article (1)navbar (4)navbar_link (120)option (7)post_thanks_box (10)post_thanks_box_bit (7)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (6)post_thanks_postbit (7)post_thanks_postbit_info (6)postbit (7)postbit_onlinestatus (7)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!