vB4: CMS StyleVars a visual dictionary identifying key StyleVars and what they control  12/02/2009InternetBrandsFeiLeung

vB4:CMSStyleVarDictionary 2009

2

Contents 

Introduction ............................................................................................................................ 4

General ................................................................................................................................... 5vbcms_content_separator.......................................................................................................................................7vbcms_error_color .....................................................................................Error! Bookmark not defined.vbcms_wysiwyg_table_borderColor...................................................................................................................7vbcms_wysiwyg_table_borderSize......................................................................................................................7

NavigationWidgets ................................................................................................................. 8vbcms_navwidget_header_background............................................................................................................8vbcms_navwidget_header_color ..........................................................................................................................8vbcms_navwidget_header_font ............................................................................................................................8vbcms_navwidget_header_padding....................................................................................................................8vbcms_navwidget_margin ......................................................................................................................................9vbcms_navwidget_menuitem_background .....................................................................................................9vbcms_navwidget_menuitem_bevel...................................................................................................................9vbcms_navwidget_menuitem_border................................................................................................................9vbcms_navwidget_menuitem_color ................................................................................................................10vbcms_navwidget_menuitem_font...................................................................................................................10vbcms_navwidget_menuitem_hover_background ....................................................................................10vbcms_navwidget_menuitem_hover_bevel..................................................................................................10vbcms_navwidget_menuitem_hover_border...............................................................................................10vbcms_navwidget_menuitem_hover_color ..................................................................................................10

GeneralWidget ......................................................................................................................11vbcms_widget_avatar_maxwidth......................................................................................................................11vbcms_widget_block_background....................................................................................................................12vbcms_widget_block_padding............................................................................................................................12vbcms_widget_border ...........................................................................................................................................13vbcms_widget_color ...............................................................................................................................................13vbcms_widget_comment_lines ..........................................................................................................................13vbcms_widget_content_background ...............................................................................................................14vbcms_widget_content_bevel.............................................................................................................................14vbcms_widget_content_border..........................................................................................................................14vbcms_widget_content_padding .......................................................................................................................14vbcms_widget_header_font.................................................................................................................................15vbcms_widget_header_padding ........................................................................................................................15

vB4:CMSStyleVarDictionary 2009

3

vbcms_widget_lighter_color ..................................................................Error! Bookmark not defined.vbcms_widget_margin...........................................................................................................................................15vbcms_widget_postbit_border...........................................................................................................................16vbcms_widget_postbit_fontSize ........................................................................................................................16vbcms_widget_postbit_header_font ................................................................................................................16vbcms_widget_shadow_color.............................................................................................................................16

Article ....................................................................................................................................17vbcms_article_font ..................................................................................................................................................17vbcms_article_header_color................................................................................................................................17vbcms_article_header_font..................................................................................................................................17vbcms_article_image_caption_color ................................................................................................................17vbcms_article_image_caption_font ..................................................................................................................17vbcms_article_image_large_maxSize..................................................Error! Bookmark not defined.vbcms_article_image_medium_maxSize ...........................................Error! Bookmark not defined.vbcms_article_image_thumbnail_maxSize....................................................................................................18vbcms_article_mid_fontSize ...................................................................Error! Bookmark not defined.vbcms_article_small_fontSize................................................................Error! Bookmark not defined.vbcms_article_subheader_font .............................................................Error! Bookmark not defined.

PreviewofArticle .................................................................................................................... 6vbcms_article_preview_header_font ..................................................................................................................6vbcms_article_preview_image_border ..............................................................................................................6vbcms_article_preview_image_margin .............................................................................................................6vbcms_article_preview_image_maxSize ...........................................................................................................6vbcms_article_preview_image_outline..............................................Error! Bookmark not defined.vbcms_article_preview_object_size ....................................................Error! Bookmark not defined.

Editor ............................................................................................Error!Bookmarknotdefined.vbcms_editor_border................................................................................Error! Bookmark not defined.vbcms_editor_small_fontSize ................................................................Error! Bookmark not defined.vbcms_editor_tiny_fontSize ...................................................................Error! Bookmark not defined.

Header .................................................................................................................................... 5vbcms_header_borderBottom ..............................................................................................................................5vbcms_header_borderTop......................................................................................................................................5vbcms_header_color..................................................................................................................................................5vbcms_header_font ....................................................................................................................................................5vbcms_header_margin .............................................................................................................................................5vbcms_header_padding ...........................................................................................................................................5

vB4:CMSStyleVarDictionary 2009

4

Introduction Stylevarsareusedasaquickandeasymeanstochangetheappearanceofyour

vBulletinsuite.Theycontrolthelooksandappearanceoffonts,backgroundsandtables.

vB4:CMSStyleVarDictionary 2009

5

Header 

 

vbcms_header_borderBottom  Thevbcms_header_borderBottomstylevarcontrolsthecolorandwidthofthebottomborderoftheheader.

vbcms_header_borderTop  Thevbcms_header_borderTopstylevarcontrolsthecolorandwidthofthetopborder

oftheheader.

vbcms_header_color  Thevbcms_header_colorstylevarcontrolsthefontcoloroftheheader.

vbcms_header_font  Thevbcms_header_fontstylevarcontrolsthefontsizeandstyleoftheheader.

vbcms_header_margin  Thevbcms_header_marginstylevarcontrolsthewidthofthemarginssurroundingtheheader.

vbcms_header_padding  Thevbcms_header_paddingstylevarcontrolstheamoungofpaddingbetweentheheader.

vB4:CMSStyleVarDictionary 2009

6

Preview of Article 

vbcms_article_preview_header_font  Thevbcms_article_preview_header_fontstylevarcontrolsthefontsizeandstyleofthearticlepreview.

vbcms_article_preview_image_border  Thevbcms_article_image_borderstylevarcontrolsthewidthandcoloroftheimage

border.

vbcms_article_preview_image_margin  Thevbcms_article_image_marginstylevarcontrolsthewidthofthemarginbetweenanimageanditssurroundingtext.

vbcms_article_preview_image_maxSize  Thevbcms_article_image_maxSizestylevarcontrolsthemaximumsizeofanimageinthearticlepreview.

vB4:CMSStyleVarDictionary 2009

7

General

General StyleVars covers anything that the other CMS styleVars don’t specifically address. 

vbcms_content_separator  Thevbcms_content_separatorstylevar

 

vbcms_wysiwyg_table_borderColor  Thevbcms_wysiwyg_table_borderColorstylevarcontrolsthecoloroftheborderaroundthewysiwygbox.

vbcms_wysiwyg_table_borderSize  Thevbcms_wysiwyg_table_borderSizestylevarcontrolsthesizeoftheborderaroundthewysiwygbox.

 

vB4:CMSStyleVarDictionary 2009

8

Navigation Widgets 

 

Navigation widgets are widgets that allow a user to navigate the CMS suite. This includes both section and category navigation. Each Navigation Widget contains three parts, the header, the menu item, and the hovered over menu item. With StyleVars, you can change the 

appearance of the font size, font color, border color, border size and even the background.    

 

vbcms_navwidget_header_background  Thevbcms_navwidget_header_backgroundstylevarcontrolsthebackgroundcolororimagefortheheader.

vbcms_navwidget_header_color  Thevbcms_navwidget_header_colorstylevarcontrolsthefontcoloroftheheader

vbcms_navwidget_header_font  Thevbcms_navwidget_header_fontstylevarcontrolsthefontstyleandfontsizeofthe

header.

vbcms_navwidget_header_padding  Thevbcms_navwidget_header_paddingstylevarcontrolstheamountofpaddingandspacearoundtheheader.

vB4:CMSStyleVarDictionary 2009

9

vbcms_navwidget_margin  Thevbcms_navwidget_marginstylevarcontrolstheamountofspacebetweenanavigationwidgetandtheotherelementsonthepage.

 

vbcms_navwidget_menuitem_background  Thevbcms_navwidget_menuitem_backgroundstylevarcontrolsthebackgroundimage

andcolorofthemenuitem.

vbcms_navwidget_menuitem_bevel  Thevbcms_navwidget_menuitem_bevelstylevarcontrolsthebevelingaroundthemenuitem.

vbcms_navwidget_menuitem_border  Thevbcms_navwidget_menuitem_borderstylevarcontrolsthecolorandthicknessof

theborderaroundamenuitem.

vB4:CMSStyleVarDictionary 2009

10

vbcms_navwidget_menuitem_color  Thevbcms_navwdiget_menuitem_colorstylevarcontrolsthefontcolorofthelinkin

themenuitem.

vbcms_navwidget_menuitem_font  Thevbcms_navwidget_menuitem_fontstylevarcontroltsthefontsizeandfontstyleofamenutitem.

vbcms_navwidget_menuitem_hover_background  Thevbcms_navwidget_menuitem_hover_backgroundstylevarcontrolsthebackground

imageandcolorofthemenuitemwhenauserhoversoverit.

vbcms_navwidget_menuitem_hover_bevel  Thevbcms_navwidget_menuitem_hover_bevelstylevarcontrolsthebevelingaroundamenuitemthat’sbeinghoveredover.

vbcms_navwidget_menuitem_hover_border  Thevbcms_navwidget_menuitem_hover_borderstylevarcontrolstheborderwidth

andcoloraroundamenuitemthat’sbeinghoveredover.

vbcms_navwidget_menuitem_hover_color  Thevbcms_navwidget_menuitem_hover_colorstylevarcontrolsthefontcolorforamenuitemthat’sbeinghoveredover.

vB4:CMSStyleVarDictionary 2009

11

General Widget 

 

General Widget StyleVars controls the appearance of all widgets that aren’t navigation 

widgets. They usually consist of four portions: the header, the content section and the post bit (each indivdiual entry within the content) and the block which is everything that isn’t the other three. 

 

 

vbcms_widget_avatar_maxwidth  Thevbcms_widget_avatar_maxwidthstylevarcontrolsthemaximumwidthofanyavatarthatappearsinawidget.

vB4:CMSStyleVarDictionary 2009

12

 

vbcms_widget_block_background  Thevbcms_widget_block_backgroundstylevarcontrolsthebackgroundcolorandimageoftheareacontainingtheheaderbutnotincludingthecontent.

vbcms_widget_block_padding  Thevbcms_widget_block_paddingstylevarcontrolsthepaddingbetweenthecontent

andtheoverallborderofthewidget.

vB4:CMSStyleVarDictionary 2009

13

 

vbcms_widget_border  Thevbcms_widget_borderstylevarcontrolsthebordercolorandwidthofthewidget.

vbcms_widget_color  Thevbcms_widget_colorstylevarcontrolsthecolorofthefont’sheader.

 

vbcms_widget_comment_lines  Thevbcms_widget_comment_linesstylevarcontrolsthenumberoflinesacomment

takesupinawidget.

vB4:CMSStyleVarDictionary 2009

14

 

vbcms_widget_content_background  Thevbcms_widget_content_backgroundstylevarcontrolsthebackgroundcolororimageofawidget’scontentsection.

vbcms_widget_content_bevel  Thevbcms_widget_content_bevelstylevarcontrolsthebevellingaroundthecontentsectionofawidget.

vbcms_widget_content_border  Thevbcms_wdiget_content_borderstylevarcontrolsthewidthandcoloroftheborderaroundthecontentsectionofawidget.

vbcms_widget_content_padding  Thevbcms_widget_content_paddingstylevarcontrolsthewidthofpaddingbetweenacontentsectioiniandthewidget’souterborder.

vB4:CMSStyleVarDictionary 2009

15

 

vbcms_widget_header_font  Thevbcms_widget_header_fontstylevarcontrolsthefontsizeandstyleofthewidget

header.

vbcms_widget_header_padding  Thevbcms_widget_header_paddingstylevarcontrolstheamoungofpaddingbetweenaheaderandthecontentsectionofawidget.

 

vbcms_widget_margin  Thevbcms_widget_marginstylevarcontrolstheamoungofspacingbetweenawidgetanditssurroundingelements.

vB4:CMSStyleVarDictionary 2009

16

vbcms_widget_postbit_border  Thevbcms_widget_postbit_borderstylevarcontrolstheborderaroundtheindividual

elementswithinacontentlist.

vbcms_widget_postbit_fontSize  Thevbcms_widget_postbit_fontSizestylevarcontrolsthefontsizeoftheindivdiualelementswithinacontentlist.

vbcms_widget_postbit_header_font  Thevbcms_widget_postbit_header_fontstylevarcontrolsthefontsizeandstyleoftheheaderoftheindividualelementswihtinacontentlist.

vbcms_widget_shadow_color  Thevbcms_widget_shadow_colorstylevarcontrolsthecolorofthewidgetsdropshadow.

 

vB4:CMSStyleVarDictionary 2009

17

Article 

vbcms_article_font  Thevbcms_article_fontstylevarcontrolsthefontsizeandstyleofanarticleview.

vbcms_article_header_color  Thevbcms_article_header_colorstylevarcontrolsthefontcolorofanarticle’sheader.

vbcms_article_header_font  Thevbcms_article_header_fontstylevarcontrolsthefontsizeandstyleofanarticle’sheader.

vbcms_article_image_caption_color  Thevbcms_article_image_caption_colorstylevarcontrolsthefontcolorofapicture’scaptiontext.

vbcms_article_image_caption_font   Thevbcms_article_fontstylevarcontrolsthefontsizeandstyleofanimagecaption.

vB4:CMSStyleVarDictionary 2009

18

vbcms_article_image_thumbnail_maxSize  Thevbcms_article_image_thumbnail_maxSizestylevarcontrolsthemaximumsizeof

animagethumbnailinanarticle.