14. November 2015

Matrix themes: helper classes

The new Matrix themes include a handful of helpful helper classes to add certain behaviors to your elements.You can easily customize the widgets and layout structure of your Jimdo website. Please check all details in this post

General

The helper classes can be used directly in HTML or in module Widget/HTML.

Using helper classes in HTML will allow you to change the layout structure of your layout without changing CSS. For example, If you're using Bergen default theme and want to change the header background, you need to add helper classes to the section hs-header:


<div class="hs-header bg-white add-bottom-border1">
...

As you can see you change the background of the header by adding also the 1px bottom border. You can also change the color of navigation, it's font, size and weight ( if available ):


<div class="hs-menu nav-dark g-font size-13 weight-600">
...

Would you like to add a sticky effect for your navigation, the whole header or any other element? Simply add fixed class:


<div class="hs-header bg-white add-bottom-border1 fixed">
...

Customizing layout sections

Each Matrix theme contains the global layout sections that can be customized with helper classes. Some of them are disabled by classhidden ( depends on the template you're using ):

hs-top-header
hs-header
hs-menu
hs-subnav
hs-thirdnav
hs-content
footer-top
hs-footer
footer-btm

Helper classes in Widget/HTML

You can change the backgrounds, color, padding, border and other styles.

Let's take an example of color boxes:


    <div class="hs-description">
        <h3>
            Your custom title
        </h3>
       <p>
            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
            use to add content to your website
        </p>
    </div>

Your custom title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website

Now we change the background and text color ( the name of the color is available in color picker section )


    <div class="hs-description emerald color-white">
        <h3>
            Your custom title
        </h3>
       <p>
            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
            use to add content to your website
        </p>
    </div>

Your custom title

Other options

There are too many options that can't be explained in just one post;) The full list of helper classes you will find in admin mode clicking the "helper classes" section from Matrix themes menu.

Below just some of the classes that have been added to the latest release of Matrix themes:

hide-mobile only-mobile only-admin fixed size-16 max-height-60 no-border g-font weight-600 link-whiteno-icon

hide-mobile - for hide the element in mobile version;

only mobile - to display the element only in mobile version;

admin-only - for navigation or any other element displayed only in admin mode;

fixed - for sticky navigation or header;

max-height-60 - to adapt the logo image

no-icon - to hide shopping cart icon when empty

Tags: news, tutorials, knowledge, helperclasses

Write a comment

Comments: 0

Matrix themes Close

Documentation Quick setup Select a color Select a font Shortcodes Helper classes Updates Enterprise package Help Showcase Marketplace

Matrix themes: helper classes

General

Customizing layout sections

Helper classes in Widget/HTML

Your custom title

Your custom title

Other options

Support

Quick links

Get inspired

Matrix themes: helper classes

General

Customizing layout sections

Helper classes in Widget/HTML

Your custom title

Your custom title

Other options

Support

Quick links

Get inspired

Strictly necessary

Functional

Performance

Marketing / Third Party

Cookie Policy