vBulletin LTS

← Back to vBulletin 4 Articles

[vB4] Using Plugins for Template Edits
by Black Snow 05 Dec 2014
Rating: (2 votes - 5.00 average)
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

Code:
global $style;
$vbcsspath = 'css.php?styleid=' . $vbulletin->userinfo['styleid'] .   '&langid=' . LANGUAGEID . '&d=' . $style['dateline'] .   '&sheet=';
$find = '</head>';
$add_before = '<link rel="stylesheet" type="text/css"   href="'.$vbcsspath.'additional_css.css,additional_css2.css" />'.   PHP_EOL;
$output = str_replace($find,$add_before.$find, $output);
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.
Code:
#pagetitle {    background: none repeat scroll 0 0 yellow;
    clear: both;
    padding: 5px 0 0;
}


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.

Code:
$vbcsspath = 'css.php?styleid=' .  $vbulletin->userinfo['styleid'] .  '&amp;langid=' . LANGUAGEID .  '&amp;d=' . $style['dateline'] .  '&amp;sheet=';
The above line sets the css path, style ID, language ID and date. No need to change anything on this line.

Code:
$find = '</head>';
This line runs a search in the template to find </head>. The closing identifier for the header template.

Code:
$add_before = '<link rel="stylesheet" type="text/css"    href="'.$vbcsspath.'additional_css.css,additional_css2.css" />'.    PHP_EOL;
This line is what we are trying to add before the closing </head> identifier.

Code:
$output = str_replace($find,$add_before.$find, $output);
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:
Code:
.postbitlegacy .userinfo .postuseravatar {
    opacity:0.5;
    transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
}
.postbitlegacy .userinfo .postuseravatar:hover {
    opacity:1;
}
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:
Code:
global $style;
$vbcsspath = 'css.php?styleid=' . $vbulletin->userinfo['styleid'] .  '&amp;langid=' . LANGUAGEID . '&amp;d=' . $style['dateline'] .  '&amp;sheet=';
$find = '</head>';
$add_before = '<link rel="stylesheet" type="text/css" href="'.$vbcsspath.'vbm_postbit_avatar_effect.css" />'. PHP_EOL;
$output = str_replace($find,$add_before.$find, $output);
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

vblts.ru supports vBulletin®, 2022-2024