How To Change Theme Options
Builder is a highly customizable theme, with plenty of built-in editor theme color controls.
How To Access Builder Customization Panel
To access the Builder customization panel, please do the following:
- Open up your Weebly editor.
- Click on the "THEME" tab.
- Click on "Theme Options"
- You'll see a series of color swatches and toggle controls.
- See the section below to learn what each option does.
List Of All Available Controls And Descriptions:
If you visit the Theme Options panel, you'll see that each option has a number next to it. We will reference each option by the number. Each number below corresponds to the Theme Options number.
1 - Universal Color 1 -> Change this color to apply a main color branding across the entire theme.
2 - Universal Color 2
3 - Universal Color 3
4 - Universal Accent Color (styles several accent interface elements)
5 - Body Background
6 - H2 Color - Color of all header text blocks
7 - Text Color - Default color for all paragraph text blocks
8 - Drop Guides - By default, in the editor, drag and drop areas are designated by a grid and a border. You can disable this.
9 - Nav btn 1 - Show/hide the first navigation button
10 - Nav btn 2 - Show/hide the second navigation bar
11 - Slide out Footer - Show/hide the slide out footer
12 - Sliding Footer - Enable/Disable the sliding mechanism in the footer (note, the footer has a sliding mechanism but it is not visible in editor).
13 - Container Width - Sets the default container width
14 - Slider Height - sets the default pureslider slider height
15 - Margins - Sets content margins for sections
16 - Nav BG - Sets the background color of the navigation bar when it is in its unscrolled state
17 - Nav Txt - Sets the text color of navigation bar elements when the when it is in its unscrolled state
18 - Nav Text H. - Nav Text Hover, sets the color of the navigation bar elements when they are hovered upon.
19 - Nav BG.S - Nav Background on Scroll - Sets the navigation background when the user scrolls down.
20 - nav Txt.S - Nav Text Color on Scroll - sets the navigation text menu items color when the user scrolls down.
21 - Nav Txt.H.S - Nav Text Hover color On Scroll - Sets the hover color of each menu item when the user scrolls down
22 - Subnav BG - Subnavigation background, sets the background color of the dropdown menu navigation.
23 - Subnav txt - Subnavigation text color, sets the text color of sub navigation elements in the dropdown menu navigation.
24 - Subnav BG.H - Subnavigation background on hover - sets the hover color of each subnavigation menu item when the user hovers over it
25 - Subnav Tvt. H - Subnavigation Text Hover - sets the hover color of the text in the subnavigation dropdown when the user hovers over it.
26 - Btn 1 Outline - Sets the outline color for the first button style
27 - Btn 1 Txt - sets the text color for the first button style
28 - Btn 1 HVR BG - sets the background color upon hover for the first button style
29 - Btn 1 Hvr Txt - Sets the text color upon hover for the first button element
30 - Btn 2 BG - Sets the background color for the second button style
31 - Btn 2 text - Sets the text color for the second button style
32 - Btn 2 Hvr Line - Sets the outline color upon hover for the second button style
33 - Btn 2 hvr txt - Sets the text hover color for the second button
34 - Btn 3 BG - sets the background color for the 3rd button style
35 - Btn 3 Txt - sets the color of the third button text color
36 - Btn 3 Hvr BG - sets the background color hover for the third button
37 - Btn 3 Hvr Txt - sets the button color upon hover for the third button
38 - Btn 4 BG - sets the background color for the fourth button
39 - Btn 4 text - sets the text color for the fourth button
40 - btn 4 hvr BG - sets the background color upon hover for the fourth button style
41 - Btn 4 hvr txt - sets the text color upon hover for the fourth button
42 - Link color - sets the link color
43 - Splash color - sets the splash background color
44 - A1 color - sets the color for all prebuilt sections with the A1 label
45 - A2 color - sets the color for all prebuilt sections with the A2 label
46 - A3 color - sets the color for all prebuilt sections with the A3 label
47 - A4 color - sets the color for all prebuilt sections with the A4 label
48 - A5 color - sets the color for all prebuilt sections with the A5 label
49 - A6 color - sets the color for all prebuilt sections with the A6 label
50 - A7 color - sets the color for all prebuilt sections with the A7 label
51 - A8 color - sets the color for all prebuilt sections with the A8 label
52 - A9 color - sets the color for all prebuilt sections with the A9 label
53 - A10 color - sets the color for all prebuilt sections with the A10 label
54 - A11 color - sets the color for all prebuilt sections with the A11 label
55 - A12 color - sets the color for all prebuilt sections with the A12 label
56 - search color - sets the search color
57 - Top Navbar - Show/Hide the top nav bar above the navigation bar
How To Change Navigation Colors
You can customize Builder navigation colors with ease.
Builder comes with three customizable navigation states:
Nav Color - The color of the navigation bar text and components when its in the unscrolled state (the way the navigation bar looks like before the user starts scrolling). In this state, the background is transparent (hence no option).
Nav BG - The background color of the navigation bar when the user starts scrolling and it becomes fixed to the top of the screen.
Nav Color Scroll - The color of the navigation bar text and components in its scrolled state, when the user being scrolling.
Here's how to adjust these variables.
- Open up your Weebly editor.
- Click on the "THEME" tab.
- Click on "Theme Options"
- Find the Nav Color, Nav BG, and Nav Color Scroll swatches as described above.
How To Change Body Color
By default, Mocha comes with a dark black-themed background. But that doesn't mean you have to keep using this color style. In fact, Builder works very well with a wide variety of colors, particularly colors on the darker side of the spectrum.
If you'd like to change the background body color for Builder, here's how:
- Open up your Weebly editor.
- Click on the "THEME" tab.
- Click on "Theme Options"
- Find the option for "Body Color."
- Change this variable.
How To Change Button Colors
Builder includes options for changing the color of the buttons. Here's how.
- Open up your Weebly editor.
- Click on the "THEME" tab.
- Click on "Theme Options"
- Find the option for "Btn Text and Btn BG."
- Btn Text is the text of the buttons, while Btn BG is the outline and background color for the buttons.
- Set both of these to your desired colors.
Note that if your selected buttons are not responsive to these changes, you may need to change their style.
Troubleshoot Issues
I Can't Set The Color Picker To Black Or White
This is unfortunately a known bug with Weebly's color picker in all themes, both default and premium. The best remedy for this is to either "reset" the theme options (often times our default value is a true black or white color), or to choose a color "near" the absolute black or white in the color picker. If you absolutely must set it to exactly #fff or #000, please contact us.
