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
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"
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.
size-16 weight-400 snip-nav
Note: All changes made here will be applied to your entire website.
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.
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:
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
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;)