How To Change Theme Options

Equinox is a highly customizable theme, with plenty of built-in editor theme color controls.

How To Access Equinox Customization Panel

To access the Equinox customization panel, please do the following:

1. Open up your Weebly editor.
2. Click on the "THEME" tab.
3. Click on "Theme Options"
4. You'll see a series of color swatches and toggle controls.
5. 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

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 Equinox navigation colors with ease.

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

1. Open up your Weebly editor.
2. Click on the "THEME" tab.
3. Click on "Theme Options"
4. 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, Equinox 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 Equinox, here's how:

1. Open up your Weebly editor.
2. Click on the "THEME" tab.
3. Click on "Theme Options"
4. Find the option for "Body Color."
5. Change this variable.

How To Change Button Colors

Equinox includes options for changing the color of the buttons. Here's how.

1. Open up your Weebly editor.
2. Click on the "THEME" tab.
3. Click on "Theme Options"
4. Find the option for "Btn Text and Btn BG."
5. Btn Text is the text of the buttons, while Btn BG is the outline and background color for the buttons.
6. 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.

‍