No announcement yet.

doc Stylevars


  • doc Stylevars

    The doc_ stylevars allow you to set up the basic format of your vBulletin style and determine how the basic page is set up in the browser. These stylevars are located in the Common stylevar group.


    Click on the element you need more information on.
    doc_background Changes the background style of the entire page. In the default style, this is the grey border around the content. Can include color and a background image. In the image above, this is the dark gray background.
    doc_width Sets the width of your vBulletin site within the margins specified above. In the default style, this is not set so the site will be rendered at full width. This is used to make fixed width styles that conform to the same size on any sized device. The style used in the image above originally had a doc_width of 960 pixels. It is the width of the white area in the image above. The default style uses 100% of available screen only offset by the left and right margins.
    doc_margin Sets the top, bottom, left and right margins of the page content. In the default style, this sets 0 pixel margins for the top and bottom. It also sets 35 pixel margins for the left and right. If you change the doc_width stylevar and want your vBulletin to be centered, set you left and right margins to auto.
    doc_minWidth This allows you to create dynamic or liquid depending on the space available. This specifies the minimum width that your style will support. Modern browsers will make the window at least this wide, even if the available display space is smaller. An example would be to support newer tablet devices or older monitors which predominantly have a width of 1024 pixels. You can set this to 960 pixels to account for margins, browser scrollbars and other window elements.
    doc_maxWidth Used in conjunction with doc_minWidth above. This specifies the maximum width that your style supports. Modern browsers will limit the width to this size. Using this, you can restrict the width on large format devices like 30" monitors. This provides a more comfortable viewing environment. For example if you don't want your site wider than 1400 pixels you can set this here.
    Last edited by Wayne Luke; Fri 14th Mar '14, 12:16pm.
      Posting comments is disabled.

    About the Author


    Wayne Luke A curious juxtaposition of nature, technology and sustainability. Find out more about Wayne Luke

    Article Tags


    advanced (5) android (2) api (29) array (17) beginner (17) blog (4) blogs (1) calendar (2) cms (2) forum (3) forumbits (1) forums (4) https (1) Intermediate (7) iphone (3) knowledgebase (1) mapi (30) methods (10) mobile (34) pagenav (1) security (2) style (2) threads (4) vb5howto (5) vBulletin (5)

    Latest Articles


    • doc Stylevars
      by Wayne Luke
      The doc_ stylevars allow you to set up the basic format of your vBulletin style and determine how the basic page is set up in the browser. These stylevars are located in the Common stylevar group. ...
      Wed 17th Aug '11, 2:09pm
    • footer Stylevars
      by Wayne Luke
      <style> #stylevar_ref { font-family: sans-serif; } #stylevar_ref p { margin-bottom: 12px; } #stylevar_ref a { color: #417394; } #stylevar_ref
      Wed 17th Aug '11, 12:30pm
    • imagepath Stylevars
      by Wayne Luke
      These stylevars tell the vBulletin system where to find the images it needs. In the default style these are located in the images directory but you can point them to custom directories for your own styles. Any image not found will return an error to your browser....
      Wed 17th Aug '11, 12:18pm
    • navbar Stylevars
      by Wayne Luke
      The navbar template provides the basis of your primary navigation throughout your vBulletin community. From here, your users will be able to access all areas of your community. This article discusses the stylevars used to customize this template. ...
      Wed 17th Aug '11, 9:54am
    • header Stylevars
      by Wayne Luke
      The header appears at the top of most pages within your vBulletin community. We will outline the stylevars that affect the header template and the items it contains. You will learn how to change your logo, the attributes of the toplink controls in the upper right corner and the basics of the header template. ...
      Wed 17th Aug '11, 9:48am
    • Stylevar Types
      by Wayne Luke
      The following lists show you the type of stylevars and the inputs available to them. ...
      Fri 17th Jun '11, 1:48pm