Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  1. Support
  2. Style Switcher

Advanced Style Editor

Documentation

Index


  • Components

    01

  • Editor

    02

  • Advanced settings

    03

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:

  1. module 'Tables' with style editor
  2. 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.

How to Edit

Find out how to edit your website using the advanced style editor.

read more
bg-lightgray add-20 mid-round

Documentation

Find out how to install/reset the style editor from scratch.

read more
bg-lightgray add-20 mid-round

Preset styles

9 preset Matrix Themes styles to restore the style editor.

read more
bg-lightgray add-20 mid-round

SUPPORT

  • Blog
  • Support center
  • Tutorials
  • Common Support issues
  • Updates

QUICK LINKS

  • Advanced Style Editor
  • Features
  • Pricing
  • Pre Purchase Questions
  • Marketplace
  • Zødiac Framework
  • Jimdo Creator

WIDGETS

  • Instagram feed
  • Team Showcase
  • Animations
  • Parallax widget
  • Full width widgets
  • Countdown Timer
  • All Widgets

GET INSPIRED

  • Showcase
  • Custom widgets
  • Enterprise Package
  • No coding features
  • Matrix variables
  • Dolphin Block Elements
hide-in-doc-page

Showcase
draggable-logo

 

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-center-nav g-font
navigation styles
size-15 weight-400 snip-nav is-uppercase --line01
content styles
form-white
footer styles
o-form  color-white
Typography
Heading H1
weight-600 is-uppercase
Heading H2
weight-600 is-uppercase
Heading H3
weight-600 is-uppercase
Buttons
weight-600 is-uppercase
Animations
none

Note:
All changes made here will be applied to your entire website.
is-switcher admin-only

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2022 All rights reserved
Log in Log out | Edit
  • Style Switcher
  • Common Issues
  • Installation
  • Guides
  • Blog
  • Updates
  • Marketplace
  • Scroll to top
Close