Register Arama Bugünkü Mesajlar Tüm Forumu Okundu Say

Reply
 
Thread Tools
[vB4] Using Plugins for Template Edits
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, yazan vB.Org Poster 10 Jul 2018, 10:09

When I started out editing my own vBulletin forum, everything I changed was done using the additional.css template and manually editing templates. Once I started adding a few more styles/themes to my forum, things became stressful as I would then have to make all those edits again. A pain in the backside! So I decided to start looking into making plugins to do the work for me. One plugin = all styles updated. Simple!

I will say that I knew how to use the addon "Firebug" for Firefox which makes it a lot easier to find the ID's and Class's of each item you want to change on your forum.

It was a long process to learn what to put in the plugin, what hook to use, what template needed selecting. These are some of the threads I read up on to begin with:All of these became the stepping stones to allow me to create plugins then products/addons. I had a lot of questions which I knew would annoy some members, more so coders, as they would have probably been asked multiple times over the years. So I started with the smallest plugin I could use to understand what to do.

Add additional_css.css to all your pages


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

I uploaded the plugin as normal via the AdminCp, added the code below into the additional_css.css template, and voila! The page title background became yellow.

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



So now I had a simple addon installed which allowed me to add custom CSS to the template, which would show on all pages. I then looked at the product to see how it worked.


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

The above line sets the css path, style ID, language ID and date. No need to change anything on this line.


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

This line runs a search in the template to find </head>. The closing identifier for the header template.


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

This line is what we are trying to add before the closing </head> identifier.


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

This line then does the magic!

It finds the variable $find, then replaces it with the variable $add_before.$find. The "." (dot) inbetween $add_before & $find is important as this ensures that the varibale $find is NOT replaced, but rather added after our variable $add_before.


Now that I knew how to achieve this, I then began to create my own plugin, using the same code that was in the product I installed. I created a new template and replaced additional_css.css with the new template name. I then added the page title CSS code into the new template, using the hook location global_complete to see if it worked. And it did!


Custom Plugin & Template

Because I knew how to make the page title background colour change using a simple plugin, I began to make other changes this way. My first future addon, blah, was my initial test making the plugin, the template and getting it to work. I created a new template called "vbm_postbit_avatar_effect.css" and put the following code inside:

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

As mentioned earlier about Firebug, I used this addon to find the identifier I needed (.postbitlegacy .userinfo .postuseravatar) in order to make this plugin work. Once I had done this and saved the template, it was time for the plugin. I created a new plugin with the following:

Product: vBulletin (as I wasn't adding the plugin to any custom products yet)
Hook Location: global_complete (as this was the hook location of the additional_css.css plugin from the addon I used initially)
Title: Render the CSS
Execution Order: 5 (by default)
Plugin PHP Code:
Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

Plugin is Active: Yes


Then I went to view a thread where a member had an avatar, moved my mouse over the avatar and I could see that it had now changed and the plugin had taken affect.
Before

After on Hover
Views: 41
Reply With Quote
Reply

Thread Tools

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

Forum Atla


LD'de Yeni misin? Yardıma mı ihtiyacın var?

All times are GMT +3. The time now is 02:33.

Tasarım Özelliği | Genişlik: Geniş Renk: [vB4] Using Plugins for Template Edits [vB4] Using Plugins for Template Edits [vB4] Using Plugins for Template Edits [vB4] Using Plugins for Template Edits [vB4] Using Plugins for Template Edits