How To Change Theme Options

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

How To Access Mocha's Customization Panel

To access the Mocha 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:

• Search Box - Shows/Hides the website search box.
• Nav Button - Shows/Hides the button in the navigation bar.
• Nav Search - Shows/Hides the search icon in the navigation bar.
• Contrast Navigation - Inverts the Navigation Bar Color
• Search Icon - Shows/Hides the search icon in the navigation bar (site-wide).
• Body Color - Sets the color of the website body.
• Nav Color - Sets the text of the navigation bar in its unscrolled state (before the user starts scrolling).
• Nav BG - Sets the background color of the navigation when the user starts scrolling.
• Nav Btn Txt - Sets the color of the navigation bar button's text.
• Nav Btn BG - Sets the color of both the navigation bar button outline and the background color on-hover.
• Nav Color Scroll - Sets the color of the navigation bar text when the user starts scrolling.
• Footer Color - Sets the color of the footer section.
• Slider Color - Sets the color of the Slider pagination.
• Btn Text - Sets the color of the button text across the site.
• Btn BG - Sets the color of the button background & outline across the site.
• Btn 2 Color - Sets the color of the second button style across the site (button styles can be switched by clicking on a button and selecting from styles in the pop-up).

How To Change Navigation Colors

You can customize Mocha's navigation colors with ease.

Mocha 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, Mocha 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 Mocha, 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

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

‍