 |
|
|
Article Options |
|
Customizing Styles via Plugins Part 1: The Basics
 TheLastSuperman
Join Date: Sep 2008
Posts: 5,823
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
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:
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
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:
If we try this version to also snag the title, this is when it changes on all pages:
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:
Change to:
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:
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
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:
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 05:16.. |
||||||||||||||||||||||||||||
|
Views: 6229
|
||||||||||||||||||||||||||||
| Comments |
|
#2
21 Mar 2014, 07:17
|
||||
|
||||
|
Great article ! Can't wait for part 2!
The following members like this post: TheLastSuperman
|
|
#3
21 Mar 2014, 09:59
|
||||
|
||||
|
Nice one
 Your first article on this helped me understand how vb fully worked...
__________________
www.nirc.co.uk The following members like this post: TheLastSuperman
|
|
#4
21 Mar 2014, 19:28
|
||||
|
||||
Originally Posted by CAG CheechDogg
I'll try to make it happen sooner rather than later, already have my example in mind
.
Originally Posted by Disco_Dave
I remember you
and glad it helped out back then its always nice to hear that!
__________________
Daddy Does Dios and Figs! *I no longer provide vBulletin Services (No PM's, please). 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! The following members like this post: CAG CheechDogg
|
|
#5
26 Mar 2014, 18:53
|
|||
|
|||
|
Thanks for the ideas.
I did the same with one of my forums. But I created child theme for each game sections. The following members like this post: TheLastSuperman
|
|
#6
22 Apr 2014, 00:59
|
|||
|
|||
|
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
No members have liked this post.
|
|
#7
22 Apr 2014, 02:31
|
|||
|
|||
|
Great, very useful, informative article!
Thanks
__________________
The following members like this post: CAG CheechDogg
|
|
«
Previous Article
|
Next Article
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Article Options | |
|
|
| New To Site? | Need Help? |
All times are GMT. The time now is 15:04.