How to use the Color Style Form 
Using the Color Style Form

In vBulletin you can change the look of a page (the colors of the font, background and links) with the use of Styles. The Color Style Form makes it simple to create a Style for a page at the same time that you’re creating the page itself. To get to the Color Style Form in the Site Builder, make sure the option has been turned on.

Depending on whether you’re editing or creating a new page, click on either the New Page or Edit Page button.


Once the form drops down from the menu, click on the Color Style tab. This will open a form with a color wheel and a preview of the page with your chosen colors beneath the form. There are several different ways to use the form. Rather than walking you through an example of how to Style your page, we’ll go through the options and give you a detailed outline of what each does.

<<Image here of form w/ color wheel and numbered options. Numbers must be added to the corresponding options>>

The color wheel is a quick way to change the colors of the page. The color palette is a preview of the colored elements on the page.

Color Wheel
There are two dots (1a and 1ab) on the Color Wheel. They control the color palette. 1a controls the primary color of your palette while 1b controls the secondary colors of your palette. The further apart they are, the more contrast your palette will have. The closer together they are, the more complementary the colors. To change the color palette, click and drag either dot around the color wheel.

Hue
Clicking on Hue opens a pop up form with a text field. Entering a number between 0 and 360 selects the primary color (dot 1a) for your color palette.

Angle
Clicking on Angle opens a pop up form with a text field. Entering a number between 0 and 360 selects the secondary color (dot 1b) and changes the palette.

Hex
Clicking on Hex opens a pop up form with a text field. Entering a hexadecimal code changes the primary color (dot 1a) for your color palette.

<<Image here of form w/ My Color Palette and numbered options. Numbers must be added to the corresponding options>>

Undo
The Undo button undoes the last action taken.
Redo
The Redo button redoes the last action that was undone.

My Color Palette
My Color Palette previews the colors for specific elements of the page. The preview of the color is followed by a list of elements it affects. Clicking on the preview opens the ‘Fine Tune Colors’ menu to the right for the selected element.

<<Image here of form w/ Fine Tune Colors and numbered options. Numbers must be added to the corresponding options>>

Fine Tune Colors
This controls the shade of the individual element. Use the selector to the right of the preview square to choose the desired color. To change the selected element, click on the name of the element to be changed.

Fine Tune Colors also has four different templates to select from. These templates change the defaults for the overall look of the page and eliminate the possibility of customizing certain elements. Here’s a complete list of those options:<<Image here of form w/ Save Style and numbered options. Numbers must be added to the corresponding options>>

Save Style
This part of the form saves the Style created in the Color Style tab.

Title for generated style
This controls the name of the style.

Display Order
This controls the display order in the AdminCP.

Parent Style
The selected option becomes the parent style of the style being created.

Allow User Selection (Yes / No)
This determines whether or not another user can use the style.

Save
This saves the style, but does not apply it to the page. To apply the style to the page, click on the Save Page option at the top.
Copyright © 2024 MH Sub I, LLC dba vBulletin. All rights reserved. vBulletin® is a registered trademark of MH Sub I, LLC dba vBulletin.