Matrix themes - Updates #16

Introducing the New Style Editor and All-New Features of Matrix Themes.

I'm excited to announce the release of the new version of the Style Editor for Matrix Themes, which now offers more flexibility and customization for your website. In addition to this, you'll also find other new features that have recently been added to Matrix Themes.

The Style Editor includes two parts: table code and JS code, which, in the latest version, can now conveniently be found in the "Design Library" section of the Matrix Themes admin menu. You can easily switch from one design to another, with all the necessary source code available in one place.

The new Style Editor offers enhanced customization options for templates, providing more advanced features. For instance, the header section includes various containers with different elements that can be tailored using custom colors and additional CSS classes. This flexibility allows you to create a unique, personalized design for your website.

In the new Style Editor, you can now add a background image to the footer. To do this, upload the image to your file folder (Design > Custom Template > File), copy the image URL, and insert it into the Style Editor. You can choose between a cover image or a repeated pattern. To ensure the image is visible, adjust the opacity of the background color accordingly.

• has-pattern-img - pattern repeated image

Previously, you could customize your navigation with various animated underline effects or simple color settings. The new Matrix Themes now offer the ability to apply a background color to the main menu, including dropdown navigation, allowing you to further customize its appearance.

It’s all about adding the correct custom class in the Style Editor for the navigation field.

Case 1: default animated and thin line

By adding the snip-nav class, all navigation levels will share the same style.

• snip-nav --line01 line-height:1px;
• snip-nav --line02 line-height:2px;
• snip-nav --line03 line-height:3px;
• snip-nav --line04 line-height:4px;
• snip-nav --line05 line-height:5px;

Case 2: Simple Active and Hover Color Styles

• primary-color-nav 
• secondary-color-nav 

Case 3: Color Underlined Style

The updated CSS provides two color styles: primary and secondary

• snip-nav primary-color-line 
• snip-nav secondary-color-line 

Case 4: background color for the main and dropdown menu.

The classes bg-nav-primary and bg-nav-secondary use the same colors as .bg-primary and .bg-secondary, which are configured in the Style Editor.

• bg-nav-primary 
• bg-nav-secondary
• active-dark-color
• active-white-color

Case 5: Keep the default main navigation and customize only the dropdown menu

With numerous color scheme combinations available, you can easily customize the design to match your preferences and adapt the colors to your brand's palette.

• bg-subnav-primary 
• bg-subnav-secondary
• white-subnav-color
• dark-subnav-color

All Matrix themes provide an option to add a top header section above the main header, which can include contact information and other content. The methods for achieving this vary depending on the version of the theme you are using in your template.

How it works in the latest version of the Matrix theme

1. In the Footer (or sidebar), add a new module by selecting Widget/HTML.

2. Insert the following code into the widget:

3. After adding the code, click the "Apply Styles" button in the style editor or simply refresh the page.

Upon refreshing, the content of your widget should now appear at the top of the header.

The complete documentation for the top header section can be found under

Documentation > Theme Options > Top Header Section

The multilingual Matrix themes have also been updated, introducing a few changes:

1. Only standard Jimdo navigation (no dropdown) is now supported. After the previous release of multilingual themes with dropdown menus, some users encountered difficulties managing the navigation structure, which was based on page URLs and required a new installation.
2. The new multilingual templates offer a more flexible language selection option (first-level navigation), which can now be displayed in various positions within the template, including the top header section, header, or footer

The latest multilingual Matrix themes don’t automatically display the first level, so you’ll need to add it manually using the Widget/HTML module in the footer section.

There are two options for displaying the language selector, depending on where you prefer it to appear:

1. Display the language selector in the top header section:

2. Display the language selector inside the header:

As you can see from the code, there are various helper classes available to customize the style of the language selector widget. You can always edit the widget in the footer where it was placed, and after reloading the page, you’ll see the changes reflected in the desired section.

Google Fonts in Matrix Themes now utilize CSS variables. In the Quick Setup > Google Fonts section, you will find the updated code to add under Settings > Edit Head.

To apply the Google Font site-wide, the g-font class should be added to the "Template Configurations" field in the Style Editor. If you want to apply the custom font to specific elements only, the g-font class should be added to the corresponding section within the Style Editor.

Another option is to use Google Fonts through the Font Settings in your Jimdo account. If you remove all g-font classes from the Style Editor, your website will automatically use the typography styles configured in Font Settings.

A vertical line can be used to divide content with a border. This can be achieved within the columns module by adding a right border.

Simply add a Widget/HTML element inside the column where you want the right border to appear. Inside the Widget/HTML module, use the following classes within the <ins> tag:

<ins>has-right-col-border</ins> 

Below are the helper classes for additional customization:

• has-primary-border 
• has-secondary-border
• has-thin-border
• has-medium-border
• has-large-border

The new Style Editor and additional tools in Matrix Themes offer extensive customization options. The pre-made designs, now located on a separate page, provide inspiration and showcase the full potential of customization. With these tools, you can create a completely unique and fully customizable design.

How to Update a Matrix Theme with the Latest Release

If you're using a Matrix theme installed after 2022 with the Style Editor, follow these steps to update it:

1. Download the Files: In the Matrix Themes admin menu, navigate to the "Updates" section and download all the CSS components and JS file to your computer.
2. Upload the Files: Go to Design > Custom Templates > Files on your website, and upload the files you just downloaded.
3. Update Source Files: In the "Updates" section, you will also find the source files (HTML and CSS). Use the copy button to copy the updated code and paste it into Design > Custom Template > HTML (CSS) for both the HTML and CSS. Don’t forget to save the changes.
4. Update the Style Editor: In the "Design Library" section, select a template and paste the code into the corresponding sections of the Style Editor's tables.
5. Update the JS Code: The second part of the Style Editor code, which includes the JS, should be replaced in the Widget/HTML section. You can find this JS code in the "Design Library" for easy access.

The Style Editor Isn't Working Correctly?

Ensure you have installed the correct and latest version of the Style Editor. In the "Design Library," you will find both the latest release and the previous version. Keep in mind that mixing different versions of the Style Editor is not supported.

Here are the most common issues to check:

• The latest Style Editor only works with the most recent versions of HTML and CSS.
• Some CSS file components may not have been updated.
• The JS file may not have been updated.

Make sure all necessary updates are applied to ensure proper functionality

Any other question? Add a comment below!