It's been 2 weeks since the advanced Style Editor has been released, and in this post I would like to share the first thoughts about it after some support requests, updates and the most common issues.
History
Before we look into the details about the Style Editor, let's see how you could style a Matrix theme before.
- 2014 Using the comments in CSS
In CSS you could find the different sections with the comments
such as
/*** color 1 ***/ /*** color 2 ***/ /*** color 3 ***/ and you applied each code line for specific element of your website
using the right comment.
- 2018 Color settings in CSS
Starting from 20218, you can find the color setting of the whole website on the top of CSS. You don't need to look for a right comment through the whole CSS as all elements are grouped in 5 main brand colors on the top of CSS.
- 2021 Color preset in Edit Head
Using the Preset styles in documentation, you simply click the copy button and paste the default color palettes to Edit Head Section. In this way you can easily change the preset colors for your own ones without editing the CSS.
- 2021 November - Advanced Style Editor
All Matrix Themes come with installed Style Editor. You don't need to use anymore the CSS and coding in Edit Head. On the top of the template in admin mode you select the color for each section of your website and you will see the immediate effects after clicking the button "Apply the changes"
Options
The Advanced style editor allows you not only edit the colors of your website but also apply different styles for the navigation, content or footer sections including the buttons, typography and contact form.
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| header | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| has-right-nav g-font |
| size-16 weight-400 snip-nav |
| form-white |
| o-form color-white |
| weight-600 |
| weight-600 |
| weight-600 |
| weight-600 is-uppercase |
| wow |
Note: All changes made here will be applied to your entire website.
Docs
You can check the full documentation of Advanced Style Editor where you fill find all options of customization and 10 preset styles for your website.
If you got installed a Matrix Theme, you can reach the Style Editor documentation in :
Admin menu> Documentation> Initial setup> Style Switcher
How does the style Editor work
The components of the Style editor are module 'Tables' where each color cell has it's own ID and module 'Widget/HTML' with js code that applies the same color you choose in tables for a specific element of your website:
<div class="hs-header" style="background-color: rgb(255, 255, 255);">
As you can see from above example code, the style editor applies the inline style which overwrites the one you have in CSS.
The same way for the custom classes for the buttons, headings etc:
<input type="submit" value="send" data-action="formButton" class="weight-600 is-uppercase" style="background-color: rgb(17, 92, 250);">
Please note that adding a new element to your website ( Jimdo module or custom widget) you will see the default styles and colors. The new styles and colors will take effect only after clicking the button 'apply changes' or reloading the page.
Pro and Contro
The release of Advanced Style Editor is one of the important development stages of Matrix Themes as it changes completely the way to edit your website without using any coding. Please check all
advantages and disadvantages of Style Editor
The visual editing of your colors and global template styles without using any coding.
No limits with color setup for buttons, footer and other elements.
Matrix Themes that come with Advanced Style editor has no limitations with the header styles.The logo image doesn't have minimum and maximum height anymore.
Matrix Themes installation requires a separate installation of the Style Editor.
The new added custom widgets and populated Jimdo elements are using the default colors setup in CSS. In order to see the current styles, you'll need to click the button "apply changes" or refresh the page.
The fine print
Based on your first experience and support request, starting from December 2021 the style of Advanced Style Editor has been changed. It's been minified to the 2 buttons on the top of the page: "Editor" and "Apply". Having a fixed position on the top, it can be easily reached from any section of your page.
The Style Editor has been inspired by Squarespace Style Editor, so if you ever used a Squarespace website or even Elementor, you will have a good confidence to edit your site too;)
Quick links
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| header | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| Template configurations |
| has-center-nav g-font has-large-header |
| Navigation styles |
| size-15 weight-400 snip-nav --line01 is-uppercase |
| Content styles |
| form-white |
| Footer styles |
| o-form color-white |
|
Typography |
| Heading H1 |
| weight-600 is-uppercase |
| Heading H2 |
| weight-400 is-uppercase |
| Heading H3 |
| weight-600 is-uppercase |
| Buttons |
| weight-600 is-uppercase |
| Animations |
Note: All changes made here will be applied to your entire website.
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE