Register Arama Bugünkü Mesajlar Mark Forums Read

Reply
 
Thread Tools
Customizing Styles via Plugins Part 1: The Basics
vB.Org Poster
vB.Org Poster has disabled reputation
Kayıt Tarihi: Jul 2018
Mesajlar: 298

Show Printable Version Email this Page
Makale: vBulletin 4 Makaleleri, yazar vB.Org Poster 10 Jul 2018, 09:59

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:



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:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.


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

Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

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:

Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.


Change to:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.


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:

Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

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

Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.


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:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

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.
Views: 15
Reply With Quote
Reply

Thread Tools

Şunları Yapabilirsin
Yeni Konu Açmak
Konuya Cevap Yazmak
Eklenti Eklemek
Düzenleme Yapabilmek

Forum Atla


New To Site? Need Help?

All times are GMT +3. The time now is 15:34.

Tasarım Özelliği | Genişlik: Geniş Renk: Customizing Styles via Plugins Part 1: The Basics Customizing Styles via Plugins Part 1: The Basics Customizing Styles via Plugins Part 1: The Basics Customizing Styles via Plugins Part 1: The Basics Customizing Styles via Plugins Part 1: The Basics