Style Changes

Colors editor is supported by all Starter templates and as tags in your custom CSS.

To change your theme's basic colors and styles open your theme and go to the "Colors" tab. From here you can view the available options, from background colors to fonts. Once you have set your styles here and saved them, your website will instantly get the new look applied.

General Styles

The General Styles area include the most basic configurations, this is a good starting point to customizing your new Starter Template. Here is a list of the available options:

  • Body Background - Background color of the entire website

  • Content Background - Background color of the Content Area

  • Header Background - Background color of the Header Area

  • Navigation Background - Background color of the Navigation Bar

  • Footer Background - Background color of the Footer Area

  • Border Color - The color for borders around the website

  • Border Size - The size in PX of the borders

  • Border Radius - The "Radius" or rounding of the borders

  • Default Color - Color of the "Default" buttons

  • Default Active Color - Color of the "Default" buttons when hovered

  • Primary Color - Color of the "Primary" action buttons like Add to Cart

  • Primary Active Color - Color of the "Primary" action buttons like Add to Cart when hovered

  • Secondary Color - Color of the "Secondary" buttons

  • Secondary Active Color - Color of the "Secondary" buttons when hovered

  • Success Color - The Color of the "Success" Box when displayed on site

  • Success Active Color - The Color of the Active "Success" Box when displayed on site

  • Warning Color - The Color of the "Warning" Box when displayed on site

  • Warning Active Color - The Color of the Active "Warning" Box when displayed on site

  • Danger Color - The Color of the "Danger" Box when displayed on site

  • Danger Active Color - The Color of the Active "Danger" Box when displayed on site

  • Info Color - The Color of the "Info" Box when displayed on site

  • Info Active Color - The Color of the Active "Info" Box when displayed on site

Typography

The Typography Section adjusts which Fonts you would be using for which parts of your website. The appearance of text affects legibility and the overall aestethic of your website. Careful choices make a good website great. Here is a list of the available options:

  • Text Font Family - Font Family for Body Text

  • Text Color - Color for Body Text

  • Text Font Size - Size of Font for Body Text

  • Text Line Height - Line height of Body Text

  • Link Color - Color for A HREF Links

  • Link Active Color - Color for A HREF Links when hovered

  • Headings Color - Color of the Heading Elements

  • Headings Font Family - Font Family For all the Heading Texts

  • Heading H1 Font Size - Size of the H1 Heading Font

  • Heading H1 Line Height - Text Line height for H1 Text

  • Heading H1 Weight - Text Font Thickness for H1 Text

  • Heading H2 Font Size - Size of the H2 Heading Font

  • Heading H2 Line Height - Text Line height for H2 Text

  • Heading H2 Weight - Text Font Thickness for H2 Text

  • Heading H3 Font Size - Size of the H3 Heading Font

  • Heading H3 Line Height - Text Line height for H3 Text

  • Heading H3 Weight - Text Font Thickness for H3 Text

Navigation

The Navigation Section sets the styles for your navigation, both header and footer links. Here is a list of the available options:

  • Nav Link Color - Color of the Text in your Main Navigation

  • Nav Link Background - Background of the Button in your Main Navigation

  • Nav Link Active Color - Color of the Text in your Main Navigation when hovered

  • Nav Link Active Background - Background of the Button in your Main Navigation when hovered

  • Footer Link Color - Color of the Text in your Footer Links

  • Footer Link Font Size - Size of the text in your Footer Links

Don't forget to press "Apply" and "Save" once you have set everything up like you want it. Be sure to clear your browser cache and review your website. Your hard work has paid off, your website is now one step closer to being exactly how you want it.