• Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
    22. March 2022

    Matrix themes - Updates #01

    The latest updates of Matrix Themes including the new features, bug fixes and much more.

    You will also find some further customizations  of custom widgets with the live examples.

    01. JS

    Download
    Matrix-1.9.2
    Includes the jQuery library v.3.6.1;
    Removed YTplayer js plugin*
    matrix-1-9-2-slim.js
    js File 168.1 KB
    Download

    * YTplayer has been removed because of the Cookies options. This plugin is available in section 'Enterprise package' as a standalone plugin.

    If you upload this version to your website, you'll need to remove the YTplayer initialization from HTML:

    
    // tubular
       $("#hs-video").YTPlayer();
         $('#hs-video').appendTo($('.matrix-hero'));

    If you're using a Matrix theme installed with the Style Editor and matrix-1.9.1.js, the js initialization in HTML is minified. Here's the screenshot that displays which part of the code you should delete if you upload matrix-1.9.2.js.

    In Matrix Themes admin menu> Updates you can also find the whole js code, so you copy it and replace the previous one of your website.

    bg-lightgray add-5

    02. Custom Widgets

    Download
    Last Updated: 24.03.2022
    04.custom-widgets.css
    Cascading Style Sheet File 63.0 KB
    Download

    This file includes different types of animation for the main menu and the height of animated border line.

    
    /*** additional animated effect for snip-nav menu ***/
    .--effect02 a:before {
        width:100%;
        opacity:0;
        transform: scaleX(0);
        transition: all 0.4s ease-in-out 0s;
    }
    
    .--effect03 a:before {
        width:100%;
        opacity:0;
    }
    
    .--effect04 a:before {
        width: 100%;
        transform: scaleX(0);
        bottom: 0;
        left: 0;
        background-color: currentColor;
        transform-origin: bottom right;
        transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    
    .--line01 a:before {
        height: 1px;
    }
    
    .--line02 a:before {
        height: 2px;
    }
    
    .--line03 a:before {
        height: 3px;
    }
    
    .--line04 a:before {
        height: 4px;
    }
    
    .--line05 a:before {
        height: 5px;
    }
    
    
    
    

    How to use

    bg-darkgray add-5

    Open the Style Editor and select the section 'navigation styles'. Add 1 of 4  animation effects and select the height of the line. Click the 'apply' button to see the effect.

     

    03. Helper classes

    Download
    Last Updated: 24.03.2022
    05.helper-classes.css
    Cascading Style Sheet File 26.3 KB
    Download

    This update includes the new helper classes for the hover background of the buttons.

    --hover:bg-red        
    --hover:bg-blue        
    --hover:bg-green        
    --hover:bg-yellow        
    --hover:bg-pink        
    --hover:bg-purple        
    --hover:bg-amber        
    --hover:bg-lime        
    --hover:bg-brown        
    --hover:bg-teal        
    --hover:bg-cyan        
    --hover:bg-gray        
    --hover:bg-white        

    How to use

    Apply the hover background color for the custom button in Widget/HTML:

    Button
    
    <a class="hs-button bg-pink mid-round --hover:bg-red" href="https://www.matrix-themes.com/" target="_blank">Button</a>
    Button
    
    <a class="hs-button bg-purple mid-round --hover:bg-red" href="https://www.matrix-themes.com/" target="_blank">Button</a>

    The same classes you can apply globally for all buttons of your website including the contact form and default Jimdo module 'button' using the Style Editor:

    bg-lightgray add-5

    Please note that the helper classes for hover in Widget/HTML overwrite the global styles!

    For example, you might apply the global styles '--hover:bg-green'  in style editor and this can be overwritten by another class ( e.g. --hover:bg-red ) manually added in Widget/HTML.

    04. Block elements 'Hero'

    In Matrix Themes menu > Block Elements you  will find the following new widgets:

    • Coming soon
    • Social
    • Hero

    Here I would like to focus on 'Hero' block element that shouldn't be confused with hero Jimdo background.

    Currently there are 12 different block hero elements. All of them have to be used inside the module

    'widget/HTML' and placed as the first(!) Jimdo module in content area.

    Each block elements has a custom class 'has-no-gutter' that removes the spacing between the header and content,- that's why you add 'hero' only as the first module on your page.

    Another useful class that can be used in block elements 'hero' is 'has-transparent-header' that allows you to place your hero section 'behind' the header. Your header in this case will have the absolute position with transparent background color.

     

    SVG wave

    The hero blocks using the svg wave elements can be customized in order to correctly display the wave element

    
    <!-- Your wave goes here... -->
    <svg class="matrix-svg" version="1.1" viewbox="0 0 1440 200" x="0" y="0" xml:space="preserve" fill="#fff">
    <path fill="#fff" fill-opacity="1" d="M0,160L1440,32L1440,320L0,320Z">
    </path></svg>

    In above example the value of the viewbox in red color can be changed in order to move the wave to the top or bottom direction.

    The other way to customize the wave element is to hide it for mobile device:

    
    <!-- Your wave goes here... -->
    <svg class="matrix-svg hide-mobile" version="1.1" viewbox="0 0 1440 200" x="0" y="0" xml:space="preserve" fill="#fff">
    <path fill="#fff" fill-opacity="1" d="M0,160L1440,32L1440,320L0,320Z">
    </path></svg>

    Wave generator

    You can use the following website to generate your own wave element:

    https://getwaves.io/

    Copy only the middle line:

    ( from <path fill ..</path> ) and change fill="#0099ff" for "#ffffff".

     

    05. Mobile navigation

    bg-lightgray add-5

    The latest Matrix Themes come with CSS menu for mobile navigation instead of the Slicknav.js. In multilingual versions the menu of the first <ul> elements is always opened as shown on the screenshot.

    06. Style editor reset

    One of the most common support issue for the style editor. If you made any error by adding a wrong code, color or simply removed the whole line, you'll need to reset the whole style editor code or replace only the specific element.

    The below detailed tutorial explains how to add the style editor from scratch.

     

    01  Add a module 'Columns' to your footer section with only one column

    02  Inside of the module 'Columns'  add the following code using the module 'Table'

    ( Table> Edit HTML and replace the existing code with a new one)

    bg-darkgray add-5

    <div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;"> <p style="color: #ffffff!important;">&nbsp;</p> <div class="cc-map-additional-devider"><span>Main colors</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr class="" style="height: 32px;"> <td class="color1" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;bg-primary</td> </tr> <tr class="" style="height: 32px;"> <td class="color2" style="cursor: pointer; background-color: #efefee; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;">&nbsp;</span></td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-primary-light</span></td> </tr> <tr class="" style="height: 32px;"> <td class="color3" style="cursor: pointer; background-color: #1e2022; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;">&nbsp;</span></td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-primary-dark</span></td> </tr> <tr class="" style="height: 32px;"> <td class="color4" style="cursor: pointer; background-color: #59c3c3; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-secondary</span></td> </tr> <tr class="" style="height: 32px;"> <td class="color5" style="cursor: pointer; background-color: #ff4f79; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32.5382px;"><span style="color: #ffffff;">&nbsp;bg-secondary-dark</span></td> </tr> </tbody> </table> <div class="cc-map-additional-devider"><span>Template sections</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr class="" style="height: 32px;"> <td class="color6" style="cursor: pointer; background-color: #000000; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;body</td> </tr> <tr class="" style="height: 32px;"> <td class="color7" style="cursor: pointer; background-color: #115cfa; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;top-header</td> </tr> <tr class="" style="height: 32px;"> <td class="color8" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;header</td> </tr> <tr class="" style="height: 32px;"> <td class="color9" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"><span style="color: #ffffff;">&nbsp;</span></td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;content</span></td> </tr> </tbody> </table> <div class="cc-map-additional-devider"><span>Footer Styles</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr style="height: 32px;"> <td class="color10" style="cursor: pointer; background-color: #1e2022; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"><span style="color: #ffffff;">&nbsp;</span></td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;background</span></td> </tr> <tr style="height: 32px;"> <td class="color11" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #ffffff;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;text color</td> </tr> <tr style="height: 32px;"> <td class="color12" style="cursor: pointer; background-color: #3574f2; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;link color</td> </tr> <tr style="height: 32px;"> <td class="color13" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;horizontal line</td> </tr> </tbody> </table> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table> <div class="cc-map-additional-devider"><span>Buttons</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr style="height: 32px;"> <td class="color14" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;style 1</td> </tr> <tr style="height: 32px;"> <td class="color15" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;style 2</td> </tr> <tr style="height: 32px;"> <td class="color16" style="cursor: pointer; background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;style 3</td> </tr> </tbody> </table> <div class="cc-map-additional-devider"><span>Other elements</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"> <tbody> <tr style="height: 32px;"> <td class="color17" style="cursor: pointer; background-color: rgba(0, 0, 0, 0); width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">social icons</td> </tr> <tr style="height: 32px;"> <td class="color18" style="cursor: pointer; background-color: #1e2022; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">navigation color</td> </tr> <tr style="height: 32px;"> <td class="color19" style="cursor: pointer; background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">subnav background</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>Mobile navigation</span></div> <table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0"> <tbody> <tr style="height: 32px;"> <td class="color20" style="background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;background&nbsp;color</td> </tr> <tr style="height: 32px;"> <td class="color21" style="background-color: #444444; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td> <td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;navigation&nbsp;color</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>Template configurations</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">has-right-nav g-font</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>navigation styles</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">size-16 weight-400 snip-nav</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>content styles</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">form-white</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>footer styles</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; min-width: 100%; color: #888888;">o-form color-white</td> </tr> </tbody> </table> <div class="c"></div> <div class="cc-map-additional-devider"><span>Typography</span></div> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Heading H1</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config5 col-7" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td> </tr> </tbody> </table> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Heading H2</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td> </tr> </tbody> </table> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Heading H3</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td> </tr> </tbody> </table> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Buttons</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600 is-uppercase</td> </tr> </tbody> </table> <div class="c"></div> <div class="add-left-10 is-brandon-font"><span>Animations</span></div> <table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;"> <tbody> <tr style="height: 32px;"> <td class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">wow fadeInUp</td> </tr> </tbody> </table> <div class="c"></div> <div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div> </div>

    Click the save button and add a module 'Widget/HTML' with the js code:

    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() { 
       // main primary color
          var color = $(".color1").css("background-color");
    $(".bg-primary").attr('style', 'background-color: '+ color +'!important');
        
        // accent light color
         var color = $(".color2").css("background-color");
    $(".bg-primary-light,.bg-grey,.bg-gray").css("background-color",color);
        
        // primary dark color
        var color = $(".color3").css("background-color");
    $(".bg-primary-dark").css("background-color",color);
        
        // secondary color
        var color = $(".color4").css("background-color");
    $(".bg-secondary").css("background-color",color);
        
        // secondary dark color
        var color = $(".color5").css("background-color");
    $(".bg-secondary-dark").css("background-color",color);
        
        // body
        var color = $(".color6").css("background-color");
    $(".body").css("background-color",color);
        
        // top header background
        var color = $(".color7").css("background-color");
    $(".hs-top-header").css("background-color",color);
        
        // header background
        var color = $(".color8").css("background-color");
        $(".top-nav,.hs-header:not(.has-transparent-header .hs-header),.sticky-wrapper .max-inner:not(.has-transparent-header .sticky-wrapper .max-inner)").css("background-color",color);
        
        // content background
        var color = $(".color9").css("background-color");
    $(".hs-content").css("background-color",color);
        
        // footer background
        var color = $(".color10").css("background-color");
    $(".hs-footer,.footer-btm").attr('style', 'background-color: '+ color +'!important');
        
        // footer text color
         var color = $(".color11").css("background-color");
    $(".hs-footer .inner,.hs-footer .inner h1,.hs-footer .inner h2,.hs-footer .inner h3,#contentfooter").attr('style', 'color: '+ color +'');
        
        // footer link color
        var color = $(".color12").css("background-color");
    $("#contentfooter a,.hs-footer .jtext-a,.hs-footer .cc-m-form-view-input-wrapper a").attr('style', 'color: '+ color +'');
        
        // footer horizontal line
        var color = $(".color13").css("background-color");
    $(".hs-footer .hr").css("background-color",color);    
        
        // buttons
        var color = $(".color14").css("background-color");
        $("#hs-container .j-downloadDocument .cc-m-download-link,#cc-inner .commententry input[type='submit'],#cc-inner .brand-bg a.j-calltoaction-link,.j-calltoaction-link.j-calltoaction-link-style-1,.hs-button:not(.ghost-white):not(.bg-white):not(.cd-btn.hs-button):not(.ghost-dark),.j-formnew input[type='submit'],a.blogreadmore").css("background-color",color);
        
        var color = $(".color15").css("background-color");
    $(".j-calltoaction-link.j-calltoaction-link-style-2").css("background-color",color);
        
        var color = $(".color16").css("background-color"); 
    $(".j-calltoaction-link.j-calltoaction-link-style-3").css("background-color",color);
      
        // social icons
        var color = $(".color17").css("background-color");
    $(".hs-social a").css("background-color",color);
    
        // nav link color
        var color = $(".color18").css("background-color");
        $(".nav-options a,.snip-nav ul li a:not(.snip-nav ul li ul li a),.is-varmdo .hs-menu .nav a").attr('style', 'color: '+ color +'!important');
        
        // subnav background
        var color = $(".color19").css("background-color");
        $(".hs-menu nav ul ul,.hs-mega .j-nav-variant-nested > ul > li > ul ").css("background-color",color);
    
         // mobile background
        var color = $(".color20").css("background-color");
        $("#cc-inner .overlay,ul.slimmenu.collapsed ").attr('style', 'background-color: '+ color +'!important');
         
        // mobile navigation color
        var color = $(".color21").css("background-color");
        $(".nav-mobile-options a,#cc-inner .slicknav_nav a,ul.slimmenu li a").attr('style', 'color: '+ color +'');
         
        
    
        // config classes
        $('.config').each(function() {
            $("#hs-container").removeClass().addClass( $(this).text()); 
            
    });
       $('.config2').each(function() {
           $(".nav-options,.hs-menu nav,.is-varmdo .hs-menu .nav a").removeClass().addClass( $(this).text()); 
    });
                 
       $('.config3').each(function() {
           $("#content_area").removeClass().addClass( $(this).text()); 
            
    });
        $('.config4').each(function() {
           $(".hs-matrix").removeClass().addClass( $(this).text()); 
    });
        $('.config5').each(function() {
           $(".j-header h1,.j-htmlCode h1,h1.j-blog-header").removeClass().addClass( $(this).text()); 
            
    });
        
        $('.config6').each(function() {
           $(".j-header h2,.j-htmlCode h2,.blogselection h2").removeClass().addClass( $(this).text()); 
            
    });
        $('.config7').each(function() {
           $(".j-header h3,.j-htmlCode h3").removeClass().addClass( $(this).text()); 
            
    });
        $('.config8').each(function() {
         $("a.blogreadmore,.cc-m-download-file-link,.hs-button,.j-calltoaction-link, #cc-inner  .j-formnew input[type='submit']").addClass( $(this).text()); 
            
    });
        $('.config9').each(function() {
         $(".hs-content .j-hgrid,.is-anim-block").addClass( $(this).text()); 
            
    });
        
    });
    })(jQuery); 
    //]]>
    </script><br />
    
    <center>
        <button class="btn btn-sm cc-m-save btn-save btn-float-left matrix-msg matrix-save invisible" style=
        "width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:35px;z-index:999999;border:1px solid transparent;padding:5px;font-size:30px;background: #1ba9e1;color: #fff;-webkit-border-radius: 2px;border-radius:4px;"
        data-action="save"> &#160;</button>
    </center>


    Once you add the second module with js code, the style editor will apply the default colors and styles to your website like in Alsten theme. The next step is to display the whole block of the style editor to the top of your page. For this you add a second module "Widget/HTML" with the following code and refresh the page.


    <var> is-switcher admin-only </var>

    To summarize, we added a module 'Columns' with only one column and inside of it we have:

    1. Module 'Table' with the color settings;

    2. Module 'Widget/HTML' with the js;

    3. Module 'Widget/HTML' with the variables;

     

    The default example of the color settings here is used the same like in Alsten or Zion theme. You can use one of the 10 pre-made examples I prepared for you;)

    Go to Preset Styles

    07. Google fonts

    Copy the below preset font and paste it to Edit Head section ( in Admin menu> Settings> Edit Head )


    <link href="https://fonts.jimstatic.com/css?family=Inter:400,500,600,700,800" rel="stylesheet" type="text/css"/> <style> /* <![CDATA[ */ #cc-inner h1.g-font,#cc-inner h2.g-font,#cc-inner h3.g-font, #hs-container.g-font,#hs-container.g-font h1,#hs-container.g-font h2,#hs-container.g-font h3,#hs-container.g-font h4,#hs-container.g-font span.fn,#hs-container.g-font p, #hs-container.g-font table, #hs-container.g-font td,#hs-container.g-font .hs-menu .nav li a,#hs-container.g-font .j-nav-variant-nested,#hs-container.g-font .j-nav-variant-standard,#hs-container.g-font .j-nav-variant-breadcrumb,#hs-container.g-font .slicknav_nav a,#hs-container.g-font ul.slimmenu li a,#hs-container.g-font .j-formnew input,#hs-container.g-font .hs-button,#hs-container.g-font a.j-calltoaction-link,#hs-container.g-font .cc-shop-addtocard,#cc-inner nav.g-font a,#cc-inner .j-formnew input.g-font,#cc-inner a.j-calltoaction-link.g-font,#cc-inner .hs-button.g-font { font-family: 'Inter', sans-serif; } /*]]>*/ </style>

    To change the preset google font, just change the font name (yellow color) for your own one. You can use the below website to pickup your own google font

    Font CDN

    Open the Style Editor and add the class 'g-font' for the main elements of your website:

    bg-lightgray add-5

    In case you wanted to apply the google font for all elements of your website, use the first line of 'Template configurations'

    tagPlaceholderTags: m-updates

    Support

    • Docs
    • Guides
    • Style Editor
    • Global Updates
    • Theme Updates
    • Helper classes
    • Common support issues
    • Contact

    Features

    • Templates
    • Page Builder
    • Add-ons
    • Landing pages
    • Alt Classes
    • Matrix variables

    Get inspired

    • Most popular templates
    • Website examples
    • Custom widgets
    • Block Elements
    • Fluid Sections

    Quick links

    • Marketplace
    • Pricing
    hide-in-doc-page

    draggable-logo

    Showcase

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
       text color
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       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.
    is-switcher

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Created with Jimdo
    Log in Log out | Edit
    • Scroll to top
    Close