No announcement yet.

Creating a Custom Style with vBulletin 5 Connect.


  • Creating a Custom Style with vBulletin 5 Connect.

    This tutorial will walk you through the steps of creating your custom style for a vBulletin 5 Connect site using Style Variables. The tutorial assumes that you have already uploaded your custom logo using the Quick Setup Tool in Site Builder.

    Creating a new Style

    Before we get started, we need to create a new style in the Style Manager. In the Style Manager click “Add New Style” at the bottom. You will be presented with a form to create the style. Give it a name of “My Custom Style” and a display value of 10,000 so it is at the bottom of the list. You do not need to change the other options. The result should look like this:

    Style Variables (StyleVar) basics.

    Style Variables are options available in vBulletin’s Style Manager. They allow you to set site width, fonts, colors, background-colors, borders, padding and other items pertaining to the site’s look and feel. Using the Style Variables, you can control the basic customization needed for most vBulletin sites. Each Style Variable controls as specific area of the site and is converted into CSS when the site is rendered. However you don’t need to know CSS to use Style Variables.
    To edit the Style Variables, you need to access the AdminCP and travel to:
    Styles & Templates -> Style Manager. Find your new style at the bottom of the list and click the “Go” button to the right of the options dropdown.

    Document Style Variables
    There are a few style variables that will affect your document globally. These are listed in the “Global” section of the Style Variable List. There are quite a few style variables here but we’re going to only focus on five of them right now.
    • body_background: This allows you to change the background color and image of your overall page. In the default style, the background is a gray speckled image with a light gray background color.
    • body_text_color: When you change the background, a good rule of practice is to change the text color as well. This will allow any text outside the main content wrapper to remain legible.
    • body_font: This Style Variable allows you to change the font used to display most of the text on your site. You change the font family, the size, style and variant to fit your needs.
    • wrapper_background: This controls the background image and color for the main content areas. Unfortunately, it does not have a corresponding text color Style Variable at this time. It used the body_text_color variable so you’ll have to adjust that so the text is legible on both backgrounds. If you know CSS, you can override this in the css_additional.css template or by using vBulletin Cloud’s CSS Editor.
    • wrapper_max_width: You can use this Style Variable to control the width of your page. The default width is 1200 px (pixels) which works well on most modern monitors. If you want to fill the screen of your high definition users, you can set this to 1700 px. The page width will grow to fit the monitor and never take up 100% of the available width.
    Header Style Variables
    A site’s header is generally the most visual first impression that you’ll make on visitors. As such you’ll want to change the header to make your brand known quickly. To do this, you’ll need to change a few style variables.
    • Header_background: Allows you to change the background colors and image of your header. To inherit from the wrapper set this to transparent.
    • Header_text_color: changes the color of any text in your header. Allows you to make sure your text is readable.
    • Header_height: By default your header will grow to the height of your logo image. This variable will allow you to specify a specific height that fits your needs.
    • Header_tab_font*: This is actually several style variables that allows you to control how fonts behave in the header's tab bar.
    • Header_tab_background*: changes the overall the various state backgrounds of your tabs in the navigation bar. You can use these to make sure your look is more consistent.
    • Header_tab_text_color*: Changes the text color of your tabs.
    Last edited by Wayne Luke; Tue 5 May '15, 7:50am.
      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


    Latest Articles


    • Creating a Custom Style with vBulletin 5 Connect.
      by Wayne Luke
      This tutorial will walk you through the steps of creating your custom style for a vBulletin 5 Connect site using Style Variables. The tutorial assumes that you have already uploaded your custom logo using the Quick Setup Tool in Site Builder....
      Tue 5 May '15, 7:47am
    • Introduction to Themes
      by Wayne Luke
      Themes are styles designed to be easier to maintain over time. Themes typically change a few elements to achieve a new look and feel. These elements include background images, fonts and colors and are typically handled by style variable changes without changing templates. The theme system allows us to offer multiple styles to customers out of the box. This is especially helpful for Cloud customers as they cannot upload additional Styles at this time....
      Mon 10 Nov '14, 12:23pm
    • How To Find StyleVars in vB4 Using Firebug
      by Trevor Hannant
      Following on from many queries on how to find a specific StyleVar in vBulletin 4, here's a short video tutorial on how to use the free Firebug add-on for Firefox in conjunction with your AdminCP to find and edit these.

      Note that Internet Explorer and Google Chrome also have toolbars that can provide the information seen in the above video.

      Download links:

      Firebug Add-on...
      Mon 9 Aug '10, 12:35pm