vb.org Archive - [vB4] Using Plugins for Template Edits

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'] .   '&amp;langid=' . LANGUAGEID . '&amp;d=' . $style['dateline'] .   '&amp;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;

}

https://vborg.vbsupport.ru/external/2015/07/8.jpg

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
https://vborg.vbsupport.ru/external/2015/07/8.jpg
After on Hover
https://vborg.vbsupport.ru/external/2015/07/8.jpg

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01141 seconds Memory Usage 1,735KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (5)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: