Design Tool: Show what Stylevars are used on a Page

[calorie]

This add-on allows you to see what stylevars are used on a particular webpage.

For example, you see this in the HTML source:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


You would then go to this link to see the CSS information:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------




You also see this in the HTML source:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


You would then go to this link to see the CSS information:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------




The information you see depends on what link in the HTML source you visit:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


This add-on adds information to the CSS so you can see what stylevars are used.


The additional information you can see with this add-on is as follows...

The CSS templates and stylevars in use from the link in the HTML source:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


The raw CSS templates where the above stylevars are used:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


The parsed CSS templates with the stylevars replaced with values:


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------





The point of this add-on is to try and display stylevars in a more informative way, so you have a better method of finding what stylevars to edit when making your style customizations. This add-on adds extra information to the CSS as comments, and so it over doubles the size of the CSS, but you only want to use this add-on when you are designing so you can more easily find the stylevars or CSS templates to edit.


Versions:

This add-on should work with vB 4.0.2, vB 4.0.3, and vB 4.0.4
This add-on was only tested on vB 4.0.3 with FF 3.5 and IE 8


Installation:

Import the attached file as a product via the ACP
Hard refresh your front-end page to be rid of cache
View the HTML source and go to a css.php page


Un-installation:

Uninstall the add-on using the menu via the ACP
Hard refresh your front-end page to be rid of cache



This add-on only changes the CSS on the fly. It does nothing to the databased CSS so if you see something, or not see something, the "trick" is to hard refresh (e.g., Crtl-F5) the front-end page to be rid of any cached CSS held by your browser.

[sulasno]

tagged and thanks

waiting for 4.0.5 to be released and will install Mod to it

[fxwoody]

That's an interesting Mod Calorie :) It should be added in Firebug ;)
Tks and tagged

[Rebecca217]

Looks very useful! Thanks for this! Tagged. :)

[Da-Vinci]

What a great tool, well done installed and rated 5.

[mohammad6006]

this show cods for administrators or everybody?

[skol]

Everybody,just like Firebug in Firefox..But this is really useful thanks.

[ProFifaLeagues]

Nice mod and very useful for us guys thanks!

[masonox]

Great mod, has helped out a lot finding the small pesky stuff that eluded me.

[Brandon Sheley]

nice and useful
tagging this for future reference :)

[TheLastSuperman]

Nice! I've added this to http://www.vbulletin.org/forum/showthread.php?p=2142940

[webducknj]

edit: was referred to www.stylevars.com and uninstalled. i'm guessing it isn't compatible with ver 4.1.0
thanks,
bart

[fxwoody]

Not sure if it's only me, but is it fully working with 4.1.2 and .......how is it suppose to work?!? loll

Need a picture maybe ;)

[mitch84]

Hi, this hack work on vb4.1.3? because I don't understand how it works, thank you