The Advanced
Style Editor
Matrix Style editor gives you the creative freedom
to turn your ideas into reality
draggable-hero h-overflow has-no-gutter color-white g-font has-transparent-header
hs-fullwidth bg-dark color-white
Customize the colors
Select an element you'd like to edit and add your own colors.
bg-dark hs-fullwidth color-white
Template configuration
Setup the design of all elements of your template
has-right-col-border
Resources
Documentation
Quick links
hide-in-doc-page
draggable-logo
Global colors
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
Template colors
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
Footer Styles
| background | |
| text color | |
| link color | |
| horizontal line |
Buttons
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
Mobile navigation
| background color | |
| navigation color |
Other elements
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| size-15 weight-400 snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.
is-switcher