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"> </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>
Step 01
<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;"> </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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> 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;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32.5382px;"><span style="color: #ffffff;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> 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;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> 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;"> </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;"> </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;"> </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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> background 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;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> navigation 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.
Step 02
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"> </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"> </button>
</center>
Step 03
Move your Style switcher 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:
bg-primary | |
bg-primary-light | |
bg-primary-dark | |
bg-secondary | |
bg-secondary-dark |
body | |
top-header | |
header | |
content |
background | |
text color | |
link color | |
horizontal line |
style 1 | |
style 2 | |
style 3 |
social icons | |
navigation color | |
subnav background |
background color | |
navigation color |
has-right-nav g-font |
size-15 weight-400 snip-nav |
form-white mid-round-btn |
o-form mid-round-btn color-white |
weight-600 |
weight-600 |
weight-600 |
weight-600 is-uppercase |
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.
Find out how to edit your website using the advanced style editor.
Find out how to install/reset the style editor from scratch.
9 preset Matrix Themes styles to restore the style editor.