Matrix Framework comes with an Advanced Style Editor that allows you to customize any color on your website and configure the main template structure, including navigation, fonts, and more.
Accessing the Style Editor
To access the Style Editor, hover your cursor over the top of the admin panel and three icons will appear below. Click the Style Editor icon (2) to open the editor menu.
If the Style Editor icon doesn’t appear, check your configuration settings in the <head> and ensure styleEditor: true is enabled.
styleEditor: true,
Manual Removal and Restoration
By clicking the Remove link, you will remove the Style Editor’s content table from the popup. The module table will then appear in the footer of your website.
To place it back into the popup, open Edit HTML inside the table module and add the class color-switcher to the entire block. Click Save, and after a few seconds the module will disappear from the footer and reappear in the popup.
Finally, click the Save button again in the popup to confirm that the module table is restored to the popup.
Important Note
If you have deleted the module table from your website, you can restore it as follows:
- In the admin menu of Matrix Framework, go to Templates and select a design for your website by clicking the Copy button.
- Add the Module Table to the footer of your website (unlike previous Matrix themes, it does not need to be placed inside the Columns).
- Click the Edit HTML button and paste the copied code, replacing the default table code.
- Once added, the table will appear inside the Style Editor popup.
- Finally, click the Save button in the popup to confirm.
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 is-uppercase size-13 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white mid-round-btn | |
| Footer styles | |
| o-form color-white white-outline-btn mid-round-btn | |
| 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.