Black Snow
12-04-2014, 10:00 PM
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:
[HOW TO - vB4] Rendering templates and registering variables - a short guide (https://vborg.vbsupport.ru/showthread.php?t=228078)
Including External Files (https://www.vbulletin.com/docs/html/main/templates_externalfiles)
[How-To] Using Plugins for Automatic Template Edits (https://vborg.vbsupport.ru/showthread.php?t=151254)
Add additional_css.css to all your pages (https://vborg.vbsupport.ru/showthread.php?t=228628)
Conditional Plugin for additional.css (https://vborg.vbsupport.ru/showthread.php?t=242639)
[How to] Add new/custom hook locations (https://vborg.vbsupport.ru/showthread.php?t=82703)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
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.c ss" />'. 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.
#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.
$vbcsspath = 'css.php?styleid=' . $vbulletin->userinfo['styleid'] . '&langid=' . LANGUAGEID . '&d=' . $style['dateline'] . '&sheet=';The above line sets the css path, style ID, language ID and date. No need to change anything on this line.
$find = '</head>';This line runs a search in the template to find </head>. The closing identifier for the header template.
$add_before = '<link rel="stylesheet" type="text/css" href="'.$vbcsspath.'additional_css.css,additional_css2.c ss" />'. PHP_EOL;This line is what we are trying to add before the closing </head> identifier.
$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:
.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: 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.'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
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:
[HOW TO - vB4] Rendering templates and registering variables - a short guide (https://vborg.vbsupport.ru/showthread.php?t=228078)
Including External Files (https://www.vbulletin.com/docs/html/main/templates_externalfiles)
[How-To] Using Plugins for Automatic Template Edits (https://vborg.vbsupport.ru/showthread.php?t=151254)
Add additional_css.css to all your pages (https://vborg.vbsupport.ru/showthread.php?t=228628)
Conditional Plugin for additional.css (https://vborg.vbsupport.ru/showthread.php?t=242639)
[How to] Add new/custom hook locations (https://vborg.vbsupport.ru/showthread.php?t=82703)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
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.c ss" />'. 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.
#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.
$vbcsspath = 'css.php?styleid=' . $vbulletin->userinfo['styleid'] . '&langid=' . LANGUAGEID . '&d=' . $style['dateline'] . '&sheet=';The above line sets the css path, style ID, language ID and date. No need to change anything on this line.
$find = '</head>';This line runs a search in the template to find </head>. The closing identifier for the header template.
$add_before = '<link rel="stylesheet" type="text/css" href="'.$vbcsspath.'additional_css.css,additional_css2.c ss" />'. PHP_EOL;This line is what we are trying to add before the closing </head> identifier.
$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:
.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: 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.'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