Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
Customizing Styles via Plugins Part 1: The Basics
TheLastSuperman
Join Date: Sep 2008
Posts: 5,464

Hey vb.org members and coders! Not much to say except I have a beautiful wife, three fantastic kids, and I develop Websites and Forums for a living 40+ hours a week.

North Carolina
by TheLastSuperman TheLastSuperman is offline 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:

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:

Originally Posted by darnstrong View Post


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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Change to:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.

Last edited by TheLastSuperman; 13 Nov 2014 at 04:16..
Views: 4984
Reply With Quote
Comments
  #2  
Old 21 Mar 2014, 06:17
CAG CheechDogg's Avatar
CAG CheechDogg CAG CheechDogg is offline
 
Join Date: Feb 2012
Great article ! Can't wait for part 2!
Reply With Quote
  #3  
Old 21 Mar 2014, 08:59
Disco_Dave's Avatar
Disco_Dave Disco_Dave is offline
 
Join Date: May 2011
Nice one Your first article on this helped me understand how vb fully worked...
__________________
www.nirc.co.uk
Reply With Quote
  #4  
Old 21 Mar 2014, 18:28
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
 
Join Date: Sep 2008
Real name: Michael Miller Jr
Cool

Originally Posted by CAG CheechDogg View Post
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 .

Originally Posted by Disco_Dave View Post
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!
__________________
Daddy Does Dios and Figs!
https://www.linkedin.com/in/thelastsuperman - Custom vBulletin Modifications, Styles, and Services.
Need a Host? I recommend URLJet.

Search - Use the search feature to find similar issues/answers.
Information - Include screenshots, copy/pasted error codes, url etc.
Fixed - Please return to your thread/post and let us know how it was fixed!
Thanks - For participating! Click the "Like" on a post if someone helped you!
Reply With Quote
  #5  
Old 26 Mar 2014, 17:53
chikuru chikuru is offline
 
Join Date: Nov 2011
Thanks for the ideas.
I did the same with one of my forums. But I created child theme for each game sections.
Reply With Quote
  #6  
Old 21 Apr 2014, 23:59
fxdigi-cash fxdigi-cash is offline
 
Join Date: Jul 2012
great article.

I wish though if there is a way how to use custom style with custom language on a custom vb page,
__________________
Shoot me a PM if I didn't reply in your post when you needed help. I can't remember things easily
Reply With Quote
  #7  
Old 22 Apr 2014, 01:31
K4GAP K4GAP is offline
 
Join Date: Mar 2008
Great, very useful, informative article!

Thanks
__________________

Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

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 Jump


New To Site? Need Help?

All times are GMT. The time now is 12:21.

Layout Options | Width: Wide Color: