PDA

View Full Version : Design Tool: Show what Stylevars are used on a Page


calorie
09 Jul 2010, 21:34
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
10 Jul 2010, 01:38
tagged and thanks

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

fxwoody
10 Jul 2010, 09:29
That's an interesting Mod Calorie :) It should be added in Firebug ;)
Tks and tagged

Rebecca217
10 Jul 2010, 12:14
Looks very useful! Thanks for this! Tagged. :)

Da-Vinci
11 Jul 2010, 17:08
What a great tool, well done installed and rated 5.

mohammad6006
14 Dec 2010, 13:01
this show cods for administrators or everybody?

skol
14 Dec 2010, 23:34
Everybody,just like Firebug in Firefox..But this is really useful thanks.

ProFifaLeagues
14 Dec 2010, 23:57
Nice mod and very useful for us guys thanks!

masonox
04 Jan 2011, 15:14
Great mod, has helped out a lot finding the small pesky stuff that eluded me.

Brandon Sheley
04 Jan 2011, 15:32
nice and useful
tagging this for future reference :)

TheLastSuperman
05 Jan 2011, 09:35
Nice! I've added this to http://www.vbulletin.org/forum/showthread.php?p=2142940

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

fxwoody
03 Apr 2011, 11:47
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
10 Apr 2011, 15:55
Hi, this hack work on vb4.1.3? because I don't understand how it works, thank you