How to Customize Oxygen's Branding

This tutorial goes over how to customize the design and colors of Oxygen to fit your organization's branding. For example, how to customize Oxygen's navigation colors and button colors.

Accessing the Theme Options Panel

Most of the theme customization happens in the theme options. To access theme options, simply to go your Weebly editor. Next, click on the "THEME" tab. ​Then, in the column to the left, click on the "Theme Options" ​button. It'll look like the image on the left of this page.

‍

Changing Navigation Bar Colors

Changing the navigation colors is critical for establishing your brand, and Oxygen lets you do just this. In the "theme options" panel, you'll see four color options that have to do with the navigation. They are "Nav Color", "Nav BG", "Nav Color Scroll."

‍Here is what each of those options mean:Nav Color: This is the color of the navigation bar text/icons when the navigation bar is transparent (before the user starts scrolling down. By default, this is white.Nav BG: This is the color of the navigation bar's background when the user scrolls down. By default, this setting is white.Nav Color Scroll: This is the color of the navigation bar text/icons when the user scrolls down and the navigation bar has a solid color background. By default, this is black.

Color Picker May Be Buggy At Times: Weebly's color picker can be buggy at times. You may need to "wiggle" the selector a few times for the editor to actually process your change. Furthermore, you may need to refresh your browser afterwards to see the change. If you continue having problems please contact us.

Changing Button Colors

Oxygen gives you the ability to change button codes. In the theme options panel, you'll see the "Btn" theme options. Each one of these corresponds to a property of a button. Btn 1 relates to button 1, btn 2 is for button 2, btn 3 is for button 3, and so on. Here's what each button actually is:

• Btn 1: This is the transparent black (black text + black border) button that has a shade of transparent black appear over it when you hover over it. To make the text and border be a different color, set this color value to a different color.
• Btn 2: Similar to btn 1, this is the color selector the transparent white button (white text + white border) that has a shade of transparent white appear over it when hovered upon. Change this setting to make the text and border be a different color.
• Btn 3: This is the button that is black initially, and when hovered over turns into a dark greenish/camo color. Here are the available options for it and what each respective option does:
• Btn 3 BG: This is the initial background color for this button before the user hovers over it. In this example, it's black because the button is black before hovered on.
• Btn 3 Hover: This is the background color that the button turns into when the user hovers over it. In this case, it's a dark green/camo color because that's what the button turns into when it's hovered on.
• Btn 4: This is the button that has a white background initially, and when hovered upon turns transparent with a white border.
• Btn 4 BG: The color of the solid background as well as the border and text color when hovered upon.
  
• Btn 4 Txt: Color of the button's text prior to hover.

‍

Complete Rundown Of Options

Below is a full rundown of all the options available in Oxygen. If you have any questions about the operation of any one of these settings, please don't hesitate to contact us via support.

• Search Box - Show or hide search box‍
• Social Icons - Show or hide social icons in navigation‍
• Edit Nav Text - Occasionally when editing the navigation text in the upper right hand corner, the Weebly text editor popup gets in the way of editing. Temporarily toggling the "edit nav text" will let you edit the text without interference from the Weebly UI.'‍
• Header gradient - Oxygen applies a subtle dark header gradient over your headers, which you can easily disable if you so wish.‍
• Search icon - Show or hide the search icon in the navigation bar.‍
• Sidebar icon - Show or hide the sidebar (hamburger) icon in the nav bar.‍
• Nav Color - See "changing nav color" section above.‍
• Nav BG - See "changing nav color" section above.‍
• Nav Color  Scroll- See "changing nav color" section above.‍
• Footer Color - Changes the color of the footer.‍
• Slider Color - Changes the color of the arrows in the PureSlider header slider.‍
• ScrolliPage Color - Changes the color of the vertical navigation "dots" in the ScrolliPage header type.‍
• Btn options - See section on "changing button colors" above.

‍

‍

‍