PDA

View Full Version : Miscellaneous Hacks - 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:

<link rel="stylesheet" type="text/css" href="css.php?styleid=1&amp;langid=1&amp;d=1278694674&amp;td=ltr&amp;sheet=bbcode.css,editor.css,popup menu.css,reset-fonts.css,vbulletin.css,vbulletin-chrome.css,vbulletin-formcontrols.css" />

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

http://www.domain.com/forum/css.php?styleid=1&langid=1&d=1278694674&td=ltr&sheet=bbcode.css,editor.css,popupmenu.css,reset-fonts.css,vbulletin.css,vbulletin-chrome.css,vbulletin-formcontrols.css



You also see this in the HTML source:

<link rel="stylesheet" type="text/css" href="css.php?styleid=1&amp;langid=1&amp;d=1278694120&amp;td=ltr&amp;sheet=additional.css" />

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

http://www.domain.com/forum/css.php?styleid=1&langid=1&d=1278694120&td=ltr&sheet=additional.css



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

http://www.domain.com/forum/css.php?sheet=foobar.css,etc.css

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:

/******************************************************************************** ********************
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:

/******************************************************************************** ********************
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:

/******************************************************************************** ********************
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:

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