Default (Global) Colors
This section controls the theme’s primary color scheme. Areas, rows and content blocks usually inherit their colors from this scheme, but can also have separate colors.
| Cart | |
|---|---|
| Main |
Major colors of the site. Most of the elements inherit from these colors. |
| Header | Colors for the header area. |
| Search | Colors for the search box in the header. |
| Main navigation | Colors for the main navigation (1st level only). |
| Navigation submenus |
Colors for all store dropdowns. |
| Sticky header |
Colors for sticky header. |
| Intro | Colors for the intro area. |
| Content | Colors for the content area (main column and sidebars). |
| Product listing | Colors for product item. |
| Product listing (flip/overlay) | Colors for product item hover (flip and overlay mode). |
| Footer | Colors for the footer area. |
| Bottom | Colors for the bottom area (copyright and payment images). |
| Form elements | Colors for all form elements (input, select, textarea and buttons). |
| Image gallery | Colors for image gallery blocks. |
| Image gallery (fullscreen) | Colors for image gallery blocks in fullscreen mode. |
| Tabs / Accordion | Colors for tabs and accordion widgets |
| Dialog / Datepicker / Timepicker / Tooltip / Autocomplete | Colors for dialog, datepicker, timepicker, tooltip and autocomplete widgets |
| System messages | Colors for add to cart, wishlist and compare notifications. |
Custom rules
All custom rules are global and depend on the CSS selector you have used.
| Name |
Name is used to mark rules and has no styling importance. |
| Selectors | CSS selector of the targeted element. Multiple selectors should be comma separated. |
| CSS property |
Choose between text, background or border color. |
| Color | Color select. |
| Important | Set higher priority, if other rules for the targeted element(s) exist. |
Color Inheritance
Similar colors are linked, so when you change a rule with a wider scope, all narrow rules take the changed value automatically. Color inheritance can be disabled, if you want to set a specific rule for a targeted element. The green arrow above every color picker indicates that it has turned on color inheritance. If you want to turn it off just click on the arrow (it will become gray).
Generally color inheritance follows this route: Global > Area > Row > Content Block
E.g. if you set the global text color to #444, all store areas (header, intro, content, footer etc.) will automatically take the same text color value. Suppose you want to change the text color of the footer only. You can go to Styles -> Footer -> Colors section, disable inheritance and set a different text color e.g. #CCC (to better suit a footer with dark background).
Useful links
1. Web colors guide for beginners
2. Introduction to color theory – how to choose right colors for your website
3. Colors psychology infographic