[vB4] Using Plugins for Template Edits

		vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
[vB4] Using Plugins for Template Edits

Thread Tools

[vB4] Using Plugins for Template Edits

Black Snow

Join Date: Jul 2012

Posts: 471

Scotland

Black Snow Black Snow is offline

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:

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;
}

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

12-06-2014, 04:10 PM

Princeton

Join Date: Nov 2001

Location: Vineland, NJ

Posts: 6,693

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Thanks for the article! (images not showing)

3 благодарности(ей) от:
Black Snow, CAG CheechDogg, RichieBoy67

12-14-2014, 03:06 AM

gsmlover4u gsmlover4u is offline

Join Date: Jan 2007

Posts: 348

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

sir plz check images and upload again

12-25-2014, 02:17 PM

Alan_SP

Join Date: Nov 2009

Posts: 1,122

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Well, there's TMS that does what you're wanting to achieve with this mod, but at the moment I'm not sure if it works on newer vB versions (it works with 4.2.0, but not sure what's with higher versions).

This is one of the most useful mods for managing forum upgrades.

Anyway, if you made mod that does that, it would be really great. :up:

Благодарность от:
Black Snow

12-29-2014, 06:04 PM

v123shine

Join Date: Sep 2008

Posts: 242

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Oh my God, this really help me to create a addon for my site. Many thanks Black Snow

Благодарность от:
Black Snow

« Previous Thread | Next Thread »

Thread Tools
Show Printable Version Email this Page

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules

Forum Jump

All times are GMT. The time now is 12:59 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04104 seconds Memory Usage 2,243KB Queries Executed 18 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (8)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_article (1)navbar (4)navbar_link (120)option (5)post_thanks_box (12)post_thanks_box_bit (5)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (4)post_thanks_postbit (5)post_thanks_postbit_info (4)postbit (5)postbit_onlinestatus (5)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!