Tweet
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.
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.
