Advanced Style Editor

Documentation

Index

Components

1. Style Switcher wrapper

It should be placed directly in HTML at the beginning of the template( just below the #hs-container )


 <!-- start style switcher -->

    <div class="wrap-collabsible admin-only" style="position:fixed;">
        <input id="collapsible" class="toggle" type="checkbox" /> <label for="collapsible" class="mtx-toggle">&#160;</label>
        <div class="collapsible-content">
            <div class="content-inner">
                <div class="inner style-switcher is-draggable" style="background:#2e2e2e;max-width:400px;">
                    <div class="content-switcher is-draggable">
<a class="is-brandon-font right-align weight-500 size-13 mid-round link-white --hover:opacity" style=
                        "background: #222!important;color:#fff!important;padding: 3px 15px;margin-bottom:5px;" href="https://www.matrix-themes.com/support/style-switcher/" target="_blank">Style
                        Editor Docs</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

 <!-- end style switcher -->

2. CSS styles

In your file directory you should have the file 10.style-editor.css

3. Js initialization

in Design> custom template> HTML you will find a js part of your website.


<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(),function(e){e(document).ready(function(){"center"==e(".cc-bs").css("text-align")&&e("body").addClass("matrix");var a=e(window).height();function s(){windowHeight=e(window).innerHeight(),e(".cc-indexpage .matrix-hero__,.main-page .matrix-hero__").css("min-height",windowHeight)}e(".lazy").each(function(){offsetTop=e(this).offset().top,offsetTop<a&&e(this).addClass("loaded")}),e(window).on("scroll",function(){scrollTop=e(window).scrollTop(),e(".lazy").each(function(){offsetTop=e(this).offset().top-scrollTop,offsetTop<a&&e(this).addClass("loaded")})}),s(),e(window).resize(function(){s()}),e(".bg-caption,.single-caption").fadeIn().css("display","block"),e(".is-fadein").fadeIn(1e3).css("display","flex"),e(".is-fadein-block").fadeIn(1e3).css("display","block"),e(".cd-btn").on("click",function(a){a.preventDefault(),e(".cd-panel").addClass("is-visible"),e(".has-push-layout").addClass("is-pushed")}),e(".cd-panel").on("click",function(a){(e(a.target).is(".cd-panel")||e(a.target).is(".cd-panel-close"))&&(e(".cd-panel").removeClass("is-visible"),e(".has-push-layout").removeClass("is-pushed"),a.preventDefault())}),e(".mt").on("click",function(a){e("a.mt").removeClass("active"),e(this).addClass("active")}),e(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({disableOn:200,type:"iframe",mainClass:"mfp-fade",removalDelay:160,preloader:!1,fixedContentPos:!1}),e(".popup-with-zoom-anim").magnificPopup({type:"inline",fixedContentPos:!1,fixedBgPos:!0,overflowY:"auto",closeBtnInside:!0,preloader:!1,midClick:!0,removalDelay:300,mainClass:"my-mfp-zoom-in"}),e(".fixed,.fixed-mobile").sticky({topSpacing:0});var i=e(".main-equal").height();e(".equal").css("min-height",i),e(".hs-magic").appendTo(e(".magic-field")),e(".cc-jimdo").removeClass("cc-m-blogselection"),e(".has-sidebar-menu").appendTo(e(".sidebar-nav")),e(".draggable-hero,.bg-caption").appendTo(e(".new-hero")),e(".draggable-hero,.slider-holder,.is-matrix,.is-matrix-block").hasClass("has-transparent-header")&&(e("#cc-inner .hs-header").addClass("").attr("style","position:absolute;background: transparent!important;"),e("body").addClass("has-transparent-header")),e("div").hasClass("has-sticky-white")&&e("body").addClass("has-sticky-white"),e(".draggable-hero").hasClass("has-arrow")&&e("#downbutton").css({display:"block"}),e(".draggable-hero").hasClass("has-white-overlay")&&e(".matrix-hero .hs-overlay").css({"background-color":"white"}).css({opacity:"0.4"}),e(".draggable-hero,.slider-holder,.is-matrix,.is-matrix-block").hasClass("has-no-gutter")&&(e(".hs-content .gutter").css({padding:"0"}),e("body").addClass("hide-subnav")),e(".is-switcher").appendTo(e(".style-switcher")),e(".cc-content-parent").css("opacity","1"),e(".j-calltoaction-wrapper").fadeIn(1e3).css("display","block"),e(".j-htmlCode .hs-button,#cc-inner #hs-container .j-formnew input").fadeIn(1e3).css("display","inline-block"),e(".draggable-hero").hasClass("main-page")&&e("body").addClass("main-page"),e("head").append(''),e(".hs-menu ul").superfish({delay:500,animation:{opacity:"show",height:"show"},speed:"fast",autoArrows:!1}),e(".hs-mega .j-nav-variant-nested > ul > li:has( > ul)").addClass("menu-dropdown-icon"),e(".hs-mega  .j-nav-variant-nested > ul > li > ul:not(:has(ul))").addClass("normal-sub"),e(".hs-mega .j-nav-variant-nested > ul > li").hover(function(a){e(window).width()>943&&(e(this).children(".hs-mega ul").stop(!0,!1).fadeToggle(150),a.preventDefault())}),/Android/i.test(navigator.userAgent)&&e(".menu-dropdown-icon").one("click",!1),e(".menu").slicknav({duplicate:!1,closedSymbol:"+",openedSymbol:"-",label:"",allowParentLinks:!0,prependTo:".m-wrapper"}),e("#toggle").click(function(){e(this).toggleClass("active"),e("#overlay").toggleClass("open")}),e(window).enllax(),(new universalParallax).init(),e(document).ready(function(){e("#hs-slider-fullwidth,#hs-slider,.fade-in-slider").owlCarousel({loop:!0,autoPlay:!0,stopOnHover:!1,navigation:!0,navigationText:["",""],slideSpeed:300,paginationSpeed:400,autoHeight:!0,transitionStyle:"fade",singleItem:!0}),e(".hs-carousel").owlCarousel({autoPlay:3e3,slideSpeed:600,items:3,itemsDesktop:[1199,3],itemsDesktopSmall:[980,3],itemsTablet:[768,1],itemsMobile:[479,1],navigation:!0}),e(".hs-carousel-2").owlCarousel({autoPlay:5e3,slideSpeed:600,items:1,itemsDesktop:[1199,1],itemsDesktopSmall:[980,1],itemsTablet:[768,1],itemsMobile:[479,1],navigation:!0})}),e("#hs-slider-fullwidth,#image-fullwidth,.is-header").appendTo(e(".slider_holder")),e("div.toggle > div.content").hide(),e("div.toggle > a.switch.opened").next().show(),e("div.toggle > a.switch").click(function(){return e(this).toggleClass("opened").next().slideToggle("fast"),!1}),e(".accordeon_content").hide(),e(".accordeon_title").click(function(){e(this).parent().toggleClass("active").siblings().removeClass("active"),e(".accordeon_content").slideUp(),e(this).next().is(":visible")||e(this).next().slideDown()}),e("ul.tabs-nav > li:first-child").addClass("active"),e("div.tab-content").hide(),e("div.tab-content:first-child").show(),e("ul.tabs-nav a").click(function(){var a=e(this).parent().parent("ul.tabs-nav");if(!e(this).parent().hasClass("active")){e("> li",a).removeClass("active"),e(this).parent().addClass("active");var s=e(this).attr("href"),i=e("div.tabs-container").has(s);e("> .tab-content",i).hide(),e(s,i).fadeIn()}return!1}),e('a[href^="*"]').on("click",function(a){a.preventDefault();var s=this.hash,i=e(s);e("html, body").stop().animate({scrollTop:i.offset().top},900,"swing",function(){window.location.hash=s})})})}(jQuery);
//]]>
</script>

Editor

Step 01

Add a module 'Columns' to your footer ( it should have only one column! ).
Inside the 'Columns' add the module 'Tables', Click on 'Edit HTML' button and replace the existing code with the following one and at the end click the save button.


<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: #00ff91; 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: #3b28cc; 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 data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-large-content, no-shopping-cart, g-font" data-tooltip-position="top">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 data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05" data-tooltip-position="top">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-15 weight-400 snip-nav</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">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 mid-round-btn</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">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 mid-round-btn 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 data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">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 data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-25" data-tooltip-position="top">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 data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-20" data-tooltip-position="top">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 data-tooltip="weight-400, is-uppercase, is-letterspace-1, size-15" data-tooltip-position="top">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 data-tooltip="wow animated fadeIn, wow animated fadeInUp" data-tooltip-position="top">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 animated 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>

The above color settings are based on Alsten theme. For specific template ( Lemberg, Bergen etc), use the preset styles.

preset styles

Step 02

Below the Tables, add a module 'Widget/HTML' with the following code inside. When you click the save button, the new styles will be applied to your website and you can start using the editor

Last Updated: 10.05.2022


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

<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()); 
        
});


    $('.matrix-reload').click(function() {
         location.reload();
         $(".matrix .cc-content-parent").animate({ "opacity":".5"}, 500);       
 });   

});
})(jQuery); 
//]]>
</script> 
<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> <button class="animsition-link btn btn-sm cc-m-save btn-save btn-float-left matrix-msg matrix-reload invisible" style=
    "width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:69px;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>

Step 03

Move your Style switcher on the top of the page.

Refresh the page to see the Style Editor on the top of the page.

To summarize, you should have a module 'Columns' with only one column and inside of it you place 2 different elements:

module 'Tables' with style editor
module 'Widget/HTML' with js code

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

Other elements

	social icons
	navigation color
	subnav background

Mobile navigation

	background color
	navigation color

Template configurations

has-right-nav g-font

navigation styles

size-15 weight-400 snip-nav

content styles

form-white mid-round-btn

footer styles

o-form mid-round-btn color-white

Typography

Heading H1

weight-600

Heading H2

weight-600

Heading H3

weight-600

Buttons

weight-600 is-uppercase

Animations

Note: All changes made here will be applied to your entire website.

Advanced settings

With advanced settings you have a possibility to deactivate some of the Style editor options in order to add the custom style manually in CSS.

In section "Editor" > Step 02 you will find a JS code. Identify the section you'd like to deactivate in style editor and add the comments for each line like this:


...
    // 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);
...

In above example we deactivate the color settings of the navigation, so in this case we can use the CSS. It is useful if you want to add different color for active links in navigation.

The latest updated Matrix themes get always installed with the Advanced Style Editor and it's more convenient to deactivate a specific editor option rather than remove it completely as you'll have to customize many elements in HTML and CSS.