Design Tool: Show what Stylevars are used on a Page
 

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

For example, you see this in the HTML source:
You would then go to this link to see the CSS information:

You also see this in the HTML source:
You would then go to this link to see the CSS information:

The information you see depends on what link in the HTML source you visit:
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:

  ---

  /****************************************************************************************************
 Usage count of Stylevars from each CSS template
****************************************************************************************************

 Template :: additional.css
        Stylevar :: bbcode_quote_padding (used 1 time)
        Stylevar :: border_radius (used 1 time)
        Stylevar :: postbit_boxed_background (used 1 time)
        Stylevar :: postbit_boxed_border (used 1 time)
        Stylevar :: postbit_boxed_fontSize (used 1 time)
        Stylevar :: postbit_boxed_padding (used 1 time)

****************************************************************************************************/

  ---

• The raw CSS templates where the above stylevars are used:
  
  Code:

  ---

  /****************************************************************************************************
 Begin Raw Template :: additional.css
****************************************************************************************************
.attachments example {
        border: {vb:stylevar postbit_boxed_border};
        background: {vb:stylevar postbit_boxed_background};
        margin: 20px {vb:math {vb:stylevar bbcode_quote_padding.paddingLeft}+20px};
        -moz-border-radius: {vb:stylevar border_radius};
        padding: {vb:stylevar postbit_boxed_padding};
        font-size: {vb:stylevar postbit_boxed_fontSize};
}
****************************************************************************************************
 End Raw Template :: additional.css
****************************************************************************************************/

  ---

• The parsed CSS templates with the stylevars replaced with values:
  
  Code:

  ---

  /****************************************************************************************************
 Begin Parsed Template :: additional.css
****************************************************************************************************/
.attachments example {
        border: 1px solid #cdcece;
        background: #ececec none;
        margin: 20px 30px;
        -moz-border-radius: 5px;
        padding: 5px 10px 5px 10px;
        font-size: 12px;
}
/****************************************************************************************************
 End Parsed Template :: additional.css
****************************************************************************************************/

  ---

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:

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

Un-installation:

1. Uninstall the add-on using the menu via the ACP
2. 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.

tagged and thanks

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

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

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

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

this show cods for administrators or everybody?

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

Nice mod and very useful for us guys thanks!

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

nice and useful
tagging this for future reference :)