Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
[HOW TO - VB4] Adding Stylesheets to Your vB4 Mod via Plugins
CarlitoBrigante
Join Date: Nov 2002
Posts: 182

Iceland
by CarlitoBrigante CarlitoBrigante is offline 25 Nov 2009

THIS ARTICLE IS NO LONGER NEEDED FOR vB 4.0.0+: you can now just use the hook in the headinclude_bottom template: headinclude_bottom_css. As I wrote at the beginning of this tutorial, this was to help people working with beta versions.

As many coders have noticed, we still don't have a template hook in headinclude to add our own CSS to the css.php call in the template. Additionally, the simple method I am listing here might still be useful in the future, even when we get that hook.

One of the great things of the new vBulletin, in fact, is that you can manipulate CSS generation as you have been used to in your scripts.

Here you go.

1. First, add a template in Style & Templates, and assign it to your product in development. Let's call this template yourproduct.css.
2. Now, add a plugin for your product for caching this template. Go to Plugin Manager -> Add Plugin, call the plugin as you prefer, then choose the cache_template hook, and finally put the following code in it:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

3. Add another plugin for your product. Choose the css_start hook, then place this code in it:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

The in_array check makes sure that your CSS is added only to the main vbulletin.css call.

That's it - your CSS will be added to the generated CSS file.

Last edited by CarlitoBrigante; 13 Jan 2010 at 19:07.. Reason: Removed bad chrome info.
Views: 4458
Reply With Quote
Comments
  #2  
Old 01 Jan 2010, 12:23
Brother Malachi Brother Malachi is offline
 
Join Date: Jun 2008
Real name: Nick
How do you assign a template to a product?
Reply With Quote
  #3  
Old 01 Jan 2010, 17:07
CarlitoBrigante's Avatar
CarlitoBrigante CarlitoBrigante is offline
 
Join Date: Nov 2002

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Add this to your config file. If you are using it on a live site, I'd recommend putting a conditional to enable debug only for your IP:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Once done, you will see a product selection box in your vBulletin Style manager when adding a template.
__________________
Yes, that's only a nickname! - MagnetiCat.com - Professional development and administration, disaster recovery (also in desperate situations), PHP and Mobile App development.
Reply With Quote
  #4  
Old 03 Jan 2010, 12:09
Shadab's Avatar
Shadab Shadab is offline
 
Join Date: Apr 2007
Location: Bhopal
Real name: Shadab
But you could also do a different check, for example in case you only need the CSS for users using google chrome:
vbulletin-chrome.css has nothing to do with Google Chrome.
vBulletin "chrome" refers to the main Header, Navigation and Footer elements.
Reply With Quote
  #5  
Old 03 Jan 2010, 16:55
CarlitoBrigante's Avatar
CarlitoBrigante CarlitoBrigante is offline
 
Join Date: Nov 2002
Hehe right, changing this. Completely forgot about this tutorial, I wrote it a few days after the beta release to us.
__________________
Yes, that's only a nickname! - MagnetiCat.com - Professional development and administration, disaster recovery (also in desperate situations), PHP and Mobile App development.
Reply With Quote
  #6  
Old 13 Jan 2010, 15:01
NgocTam's Avatar
NgocTam NgocTam is offline
 
Join Date: Apr 2008
Not work with 4.0.1 if choose "Store CSS Stylesheets as Files"

I need other solution. Merge our custom template with additional.css (?). How can I do it?
Reply With Quote
  #7  
Old 13 Jan 2010, 19:04
CarlitoBrigante's Avatar
CarlitoBrigante CarlitoBrigante is offline
 
Join Date: Nov 2002
Hello,

yes, this article is now obsolete. You can now just use the headinclude_bottom_css hook to add your stylesheets. It would probably be even better if there was a hook into additional.css as well. As I wrote above, this was mostly for people working with the beta at the time of this writing.

If you still want to use this method, you can add a conditional to add the call for the static files in the template hook above only in case static CSS is enabled. But this would be really useless, I think.
__________________
Yes, that's only a nickname! - MagnetiCat.com - Professional development and administration, disaster recovery (also in desperate situations), PHP and Mobile App development.

Last edited by CarlitoBrigante; 13 Jan 2010 at 19:21.
Reply With Quote
  #8  
Old 14 Jan 2010, 02:41
NgocTam's Avatar
NgocTam NgocTam is offline
 
Join Date: Apr 2008
includes\adminfunctions_template.php:

function: write_style_css_directory($styleid, $parentlist, $dir = 'ltr')

Query (in line 769):

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

My css template like *.css. But in CSS file I don't see it. Is It a bug?
Reply With Quote
  #9  
Old 14 Jan 2010, 03:03
CarlitoBrigante's Avatar
CarlitoBrigante CarlitoBrigante is offline
 
Join Date: Nov 2002
No, if you read the file further, you will see that the result of the query is used only to generate the css file into the directory. After that, you still have to add the path to the headinclude, as I said above. That is why I said the method in the article is still valid, but you need also to add the link to the CSS file... which makes the whole purpose of this article meaningless

A way of having your custom CSS added to the generated files would be to assign it a template type of "css"; but I think you can do this via XML file only (or query), and I am not sure of consequences as I have not explored the possibility.

In brief, easier to use a simple template hook, even though I can understand that some want to have products self contained in an XML file. This would be possible if the developers added a template hook into additional.css.
__________________
Yes, that's only a nickname! - MagnetiCat.com - Professional development and administration, disaster recovery (also in desperate situations), PHP and Mobile App development.
Reply With Quote
  #10  
Old 15 Jan 2010, 14:08
MARCO1's Avatar
MARCO1 MARCO1 is offline
 
Join Date: Jun 2008
Real name: Marco
Originally Posted by CarlitoBrigante View Post
No, if you read the file further, you will see that the result of the query is used only to generate the css file into the directory. After that, you still have to add the path to the headinclude, as I said above. That is why I said the method in the article is still valid, but you need also to add the link to the CSS file... which makes the whole purpose of this article meaningless

A way of having your custom CSS added to the generated files would be to assign it a template type of "css"; but I think you can do this via XML file only (or query), and I am not sure of consequences as I have not explored the possibility.

In brief, easier to use a simple template hook, even though I can understand that some want to have products self contained in an XML file. This would be possible if the developers added a template hook into additional.css.
What's about open new project for that in vbulletin.com ? I think it will be very nice to use template hooks also we want our products automatically installation.
__________________
Marco Mamdouh Fahem.
OUZMind Lead Developers
vBFoster Lead Developers
vBulletin 5 Alpha Team member.
Reply With Quote
  #11  
Old 22 Jan 2010, 19:56
xman_79's Avatar
xman_79 xman_79 is offline
 
Join Date: Jun 2006
Real name: Suleiman
I had a similar problem , and :

In my php file i add :


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

And in my template :

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

*Rebuild style information .

Now it's work .

Look includes/class_core.php , Line 3994
Reply With Quote
  #12  
Old 02 Mar 2010, 08:39
hayaldunya hayaldunya is offline
 
Join Date: Mar 2008
Originally Posted by xman_79 View Post
I had a similar problem , and :

In my php file i add :


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

And in my template :

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

*Rebuild style information .

Now it's work .

Look includes/class_core.php , Line 3994
I'm its problem
Reply With Quote
  #13  
Old 17 Apr 2010, 22:27
Jaxel Jaxel is offline
 
Join Date: Sep 2005
I dont understand the purpose of all this... I just made a template called "media.css" and added the following to the shell of my mod:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Easy. No plugins required.
Reply With Quote
  #14  
Old 18 Apr 2010, 00:15
CarlitoBrigante's Avatar
CarlitoBrigante CarlitoBrigante is offline
 
Join Date: Nov 2002
There is now a hook for the original purpose of this thread. As I said, this thread can now be considered obsolete. Now it has become as easy as creating a "yourcss.css" template, adding a plugin in the parse_template hook, and then do something like this in the plugin:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This thread was made for product creators that needed a simple way to attach css to their styles with no need for people installing their stuff to edit their templates.
__________________
Yes, that's only a nickname! - MagnetiCat.com - Professional development and administration, disaster recovery (also in desperate situations), PHP and Mobile App development.

Last edited by CarlitoBrigante; 18 Apr 2010 at 20:53. Reason: typo
Reply With Quote
  #15  
Old 02 Aug 2010, 19:55
TheSupportForum TheSupportForum is offline
 
Join Date: Jan 2007
does anyone know how to add a customer template to an existing template for example header

then to insert the code below or above

{vb:raw ad_location.global_header2}
__________________
http://www.multihunters.co.uk - all your coding needs
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

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


New To Site? Need Help?

All times are GMT. The time now is 07:40.

Layout Options | Width: Wide Color: