Style Switcher

Documentation & common support issues

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="background:#2e2e2e;">
        <input id="collapsible" class="toggle" type="checkbox" /> <label for="collapsible" class="mtx-toggle">Matrix style switcher</label>
        <div class="collapsible-content">
            <div class="content-inner">
                <div class="inner__ style-switcher is-draggable" style="background:#2e2e2e;">
                    <div class="content-switcher is-draggable">
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- end style switcher -->

2. CSS styles

Some styles for the switcher and flickering bug when you apply a new color. This section is placed at the end of CSS ( design> custom template> CSS )

 

 

When you add the below styles to your website, it will be applied 'opacity:0' to it's content and  you'll see only a blank page. Don't worry about this, it will be solved when you add the next part  ( js ) to your website. 


/*** style switcher ***/
.color-switcher h3,.color-switcher td,.is-switcher span.icon-table-cell-selection:after,.mtx-toggle,.is-brandon-font {
    font-family: "Brandon Text","Asap",Verdana,Arial,sans-serif!important;
}
.color-switcher .cc-map-additional-devider {
    clear: both;
    width: 100%;
    margin: 5px 0;  
    border-bottom: 1px solid rgba(255,255,255,.15);
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
 }
.color-switcher .cc-map-additional-devider span {
    display: block;
    padding: 0 4px;
    background-color: #404040;
    position: absolute;
    top: -10px;
    right: auto;
    bottom: auto;
    left: 4px;
    
}
.cc-m-table.cc-m-all-opened table.mce-item-table td {
    outline: 0px dashed #000!important;
}

.cc-content-parent{
    opacity:0;
}
.matrix .j-calltoaction-wrapper,.matrix .cc-m-htmlcode .hs-button{
    display:inline-block;
}

.wrap-collabsible input[type="checkbox"] {
    display: none;
}
.wrap-collabsible {
    margin:0;
}
.mtx-toggle {
    display: block;
    font-family: "Brandon Text","Asap",Verdana,Arial,sans-serif!important;
    font-size: 1.0rem;
    text-align: left;
    padding: 6px;
    margin:0 10px;
    color: #fff;  
    cursor: pointer;    
    transition: all 0.25s ease-out;
}

.mtx-toggle::before {
    content: " ";
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: 0.7rem;
    transform: translateY(-2px);
    transition: transform 0.2s ease-out;
}
.wrap-collabsible .toggle:checked + .mtx-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out;
}
.wrap-collabsible .toggle:checked + .mtx-toggle + .collapsible-content {
    max-height:1000px;
}
.wrap-collabsible .toggle:checked + .mtx-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {   
    padding: 0;
}
.collapsible-content p {
    margin-bottom: 0;
}
.is-switcher span.icon-table-cell-selection{
    background:#1ba9e1;
    padding:4px;
    border-radius:2px;
}
.is-switcher span.icon-table-cell-selection:after{
    content:'Select a color';
    padding:3px;display:inline-block;
}

/*** end style switcher ***/

3. Updated Helper classes

The section 'Helper classes' should be updated in order to apply some new classes to the website elements using the style editor ( uppercase, letter-spacing ect) 



/* -------------------------------------------------------------------------------- /
        [5]     HELPER CLASSES
/ -------------------------------------------------------------------------------- */

.cc-m-download-file-link.is-uppercase,#cc-inner .j-formnew input.is-uppercase,h1.is-uppercase, .is-uppercase h1, h2.is-uppercase, .is-uppercase h2, h3.is-uppercase, .is-uppercase h3, .hs-button.is-uppercase, a.j-calltoaction-link.is-uppercase, .hs-menu nav .is-uppercase {
   text-transform: uppercase!important;
}

h1.is-letterspace-1, .is-letterspace-1 h1, h2.is-letterspace-1, .is-letterspace-1 h2, h3.is-letterspace-1, .is-letterspace-1 h3, .hs-button.is-letterspace-1, a.j-calltoaction-link.is-letterspace-1, .hs-menu nav.is-letterspace-1 {
   letter-spacing: 0.5px;
}

h1.is-letterspace-2, .is-letterspace-2 h1, h2.is-letterspace-2, .is-letterspace-2 h2, h3.is-letterspace-2, .is-letterspace-2 h3, .hs-button.is-letterspace-2, a.j-calltoaction-link.is-letterspace-2, .hs-menu nav.is-letterspace-2 {
   letter-spacing: 1px;
}

h1.is-letterspace-3, .is-letterspace-3 h1, h2.is-letterspace-3, .is-letterspace-3 h2, h3.is-letterspace-3, .is-letterspace-3 h3, .hs-button.is-letterspace-3, a.j-calltoaction-link.is-letterspace-3, .hs-menu nav.is-letterspace-3 {
   letter-spacing: 1.5px;
}

/* text colors for dark backgrounds */
.color-white,.color-white p,.color-white td,.color-white table,.color-white span,.color-white h1,.color-white h2,.color-white h3{
    color:#fff; 
}


/* text colors for white backgrounds */
.color-dark,.color-dark p,.color-dark td,.color-dark table,.color-dark span,.color-dark h1,.color-dark h2,.color-dark h3 { 
    color:#333;
}

.color-primary {
    color:#3f3f3f;
}

.color-secondary {
    color:#ae895d;
}

.color-grey {
   color:#ccc;
}

/* backgrounds */
#hs-container .bg-grey,
#hs-container .bg-gray{ 
    background:#D1D3D4;
}

#hs-container .bg-lightgray{ 
    background:#E8E9E9;
}

#hs-container .bg-darkgray{ 
    background:#BABDBF;
}

#hs-container .bg-white{ 
    background:#ffffff; 
}

#hs-container .bg-dark{ 
    background:#000000; 
}

.bg-white,.brand-bg .bg-white{ 
    background:#ffffff; 
}

a.hs-button.bg-white{
    color:#333!important;
}

a.hs-button.bg-white:hover{
    color:#fff!important;
}

#hs-container .bg-transparent {
    background:none!important;
}

/* links colors */
#cc-inner .link-dark a:link,#cc-inner .link-dark a:visited{
    color:#444;
}

#cc-inner .link-white a:link,#cc-inner .link-white a:visited{
    color:#fff;
}

#cc-inner .link-grey a:link,#cc-inner  .link-grey a:visited{
    color:#ccc;
}

#cc-inner .link-underlined .j-text a:link,#cc-inner .link-underlined .j-text a:visited {
  box-shadow: inset 0 -1px 0;
  padding: 0 0 0.2em 0;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

#cc-inner .link-underlined .j-text a:hover{
    box-shadow: inset 0 -2px 0;
    opacity:0.8;
}


/* default UI colors */
/* source: http://materialuicolors.co/ */

#cc-inner .bg-red {
    background:#F44336!important;
}

#cc-inner .bg-pink {
    background:#E91E63!important;
}

#cc-inner  .bg-purple {
    background:#9C27B0!important;
}

#cc-inner  .bg-deep-purple {
    background:#673AB7!important;
}

#cc-inner  .bg-indigo {
    background:#3F51B5!important;
}

#cc-inner .bg-blue {
    background:#2196F3!important;
}

#cc-inner .bg-light-blue {
    background:#03A9F4!important;
}

#cc-inner .bg-cyan {
    background:#00BCD4!important;
}

#cc-inner .bg-teal {
    background:#009688!important;
}

#cc-inner .bg-green {
    background:#4CAF50!important;
}

#cc-inner .bg-light-green {
    background:#8BC34A!important;
}

#cc-inner .bg-lime {
    background:#CDDC39!important;
}

#cc-inner .bg-yellow {
    background:#FFEB3B!important;
}

#cc-inner .bg-amber {
    background:#FFC107!important;
}

#cc-inner .bg-orange {
    background:#FF9800!important;
}

#cc-inner .bg-deep-orange {
    background:#FF5722!important;
}

#cc-inner .bg-brown {
    background:#795548!important;
}



/*** FlatUI colors palette ***/
/* source: https://flatuicolors.com/ */

#cc-inner .bg-turquoise {
   background: #1dd2af!important;
}

#cc-inner .bg-emerald {
   background: #2ecc71!important;
}

#cc-inner .bg-peter-river{
   background: #3498db!important;
}

#cc-inner .bg-amethyst{
   background: #9b59b6!important;
}

#cc-inner .bg-wet-asphalt {
   background: #34495e!important;
}

#cc-inner .bg-green-sea {
   background: #16a085!important;
}

#cc-inner  .bg-nephritis {
   background: #27ae60!important;
}

#cc-inner  .bg-belize-hole {
   background: #2980b9!important;
}

#cc-inner .bg-wisteria {
   background: #8e44ad!important;
}

#cc-inner  .bg-midnight-blue {
   background: #2c3e50!important;
}

#cc-inner  .bg-sun-flower {
   background: #f1c40f!important;
}

#cc-inner .bg-carrot {
   background: #e67e22!important;
}

#cc-inner .bg-alizarin {
   background: #e74c3c!important;
}

#cc-inner .bg-clouds {
   background: #ecf0f1!important;
}

#cc-inner  .bg-concrete {
   background: #95a5a6!important;
}

#cc-inner  .bg-orange{
   background: #f39c12!important;
}

#cc-inner  .bg-pumpkin {
   background: #d35400!important;
}

#cc-inner  .bg-pomegranate {
   background: #c0392b!important;
}

#cc-inner  .bg-silver {
   background: #bdc3c7!important;
}

#cc-inner  .bg-asbestos {
   background: #7f8c8d!important;
}

#cc-inner  .jimdo-blue {
   background: #1ba9e1!important;
}

#cc-inner  .jimdo-green {
   background: #c0d34b!important;
}


.hs-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.6;
}

.has-custom-overlay .matrix-hero .hs-overlay {
    background: var(--bg-primary);
}

.bg-gradient {
  background: -webkit-linear-gradient(to right, #2c3e50, #2980b9);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2c3e50, #2980b9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     
        
}

.bg-gradient-2 {   
  background: -webkit-linear-gradient(to left, #ff4b1f , #1fddff); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #ff4b1f , #1fddff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
}

.bg-gradient-3 {
  background: -webkit-linear-gradient(to left, #00bf8f , #001510); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #00bf8f , #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
}


/* font-weight */
#cc-inner .weight-300 {font-weight:300;}
#cc-inner .weight-400 {font-weight:400;}
#cc-inner .weight-500 {font-weight:500;}
#cc-inner .weight-600 {font-weight:600;}
#cc-inner .weight-700 {font-weight:700;}
#cc-inner .weight-800 {font-weight:800;}

/* disable google font */
#hs-container .no-g-font h1,#hs-container .no-g-font h2,#hs-container .no-g-font h3,#hs-container .no-g-font .j-nav-variant-nested,#hs-container .no-g-font .j-nav-variant-standard,#hs-container .no-g-font .j-nav-variant-breadcrumb,.cc-page .no-g-font .slicknav_nav a,#hs-container .no-g-font a.readmore,#hs-container .no-g-font .j-product .cc-shop-product-desc .cc-shop-addtocard,#hs-container .no-g-font #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#hs-container .no-g-font #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#hs-container .no-g-font .j-blogarticle .blogreadmore:link,#hs-container .no-g-font .j-blogarticle .blogreadmore:visited,#hs-container .no-g-font .j-blogarticle .comment:link,#hs-container .no-g-font .j-blogarticle .comment:visited,#hs-container .no-g-font .post .blogreadmore:link,#hs-container .no-g-font .post .blogreadmore:visited,#hs-container .no-g-font .post .comment:link,#hs-container .no-g-font .post .comment:visited,#hs-container .no-g-font .commententry input[type="submit"],#hs-container .no-g-font .j-formnew input[type='submit'],#hs-container .no-g-font .j-downloadDocument .cc-m-download-link,#hs-container .no-g-font .j-newsletterbox input[type='submit'],.cc-pagemode-overlay #hs-container .no-g-font input[type="submit"].submitUser,#hs-container .no-g-font .j-rss br+a[target="_blank"],#hs-container .no-g-font input#mc-embedded-subscribe.button,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-1,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-2,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-3,#hs-container .no-g-font .hs-button,#hs-container .no-space span.fn,#hs-container .no-g-font .cc-catalog-wrapper span a,#hs-container .no-g-font div.caption.cc-m-image-align-3,#hs-container  .no-g-font .cc-imagewrapper.cc-m-image-align-3 figcaption {
    font-family:inherit;
    text-transform:none!important;
    letter-spacing:0!important;
}

h1.no-g-font,h2.no-g-font,h3.no-g-font,h4.no-g-font {
    font-family:inherit!important;
    text-transform:none!important;
    letter-spacing:0!important;
}
   
/*** must have elements ***/
.size-11 {
   font-size:11px;
}
.size-12 {
   font-size:12px;
}
.size-13 {
   font-size:13px;
}
.size-14 {
   font-size:14px;
}
.size-15 {
   font-size:15px;
}
.size-16 {
   font-size:16px;
}
.size-17 {
   font-size:17px;
}
.size-18 {
   font-size:18px;
}
.size-19 {
   font-size:19px;
}
.size-20 {
   font-size:20px;
}
.size-25 {
   font-size:25px;
}
.size-30 {
   font-size:30px;
}

.max-height-20 img {
   max-height:20px;
}

.max-height-40 img {
   max-height:40px;
}

.max-height-50 img {
   max-height:50px;
}

.max-height-60 img {
   max-height:60px;
}

.max-height-70 img {
   max-height:70px;
}

.max-height-80 img {
   max-height:80px;
}

.max-height-90 img {
   max-height:90px;
}

.max-height-100 img {
   max-height:100px;
}

.max-height-120 img {
   max-height:120px;
}

.max-height-150 img {
   max-height:150px;
}


#cc-inner .has-large-text,#cc-inner .has-large-mobile,#cc-inner .has-large-heading h1,#cc-inner .has-large-heading h2,#cc-inner .has-large-heading h3 {
    font-size:300%!important;
}

#cc-inner .has-super-large-text,#cc-inner .has-super-large-heading h1,#cc-inner .has-super-large-heading h2,#cc-inner .has-super-large-heading h3 {
   font-size:500%!important;
}

@media only screen and (max-width: 459px) {
#cc-inner .has-large-text,#cc-inner .has-large-mobile,#cc-inner .has-large-heading h1,#cc-inner .has-large-heading h2,#cc-inner .has-large-heading h3 {
    font-size:120%!important;
}

.has-super-large-text,.has-super-large-heading h1,.has-super-large-heading h2,.has-super-large-heading h3 {
   font-size:150%!important;
}
  
}

.has-small-text {
   font-size:90%!important;
}

.has-dashed-border {
   outline: 1px dashed #ccc;
   outline-offset: -5px;
}

.has-solid-border {
   outline: 1px solid #ccc;
   outline-offset: -5px;
}

.has-white-solid-border {
   outline: 1px solid #fff;
   outline-offset: -5px;
}

.has-white-dashed-border {
   outline: 1px dashed #fff;
   outline-offset: -5px;
} 

.no-border{
   border:none!important;
   border-top:none!important;
   border-right:none!important;
   border-bottom:none!important;
   border-bottom:none!important;
}

.add-border{
   border:1px solid #303030;
}

.add-border-2 {
   border:2px solid #303030;
}

/* paddings and margins */
.no-padding{
   padding:0!important;
}
.no-padding-top{
   padding-top:0;
}
.no-padding-btm{
   padding-bottom:0;
}
.no-padding-left{
   padding-left:0;
}
.no-padding-right{
   padding-right:0;
}

.no-margin{
   margin:0;
}
.no-margin-top{
   padding-top:0;
}
.no-margin-btm{
   margin-bottom:0;
}
.remove-margin-left{
   margin-left:0;
}
.remove-margin-right{
   margin-right:0;
}

.add-top-5 {
   padding-top:5px;
}
.add-top-10 {
   padding-top:10px;
}

.add-top-15 {
   padding-top:15px;
}

.add-top-20 {
   padding-top:20px;
}
.add-top-25 {
   padding-top:25px;
}

.add-top-30 {
   padding-top:30px;
}

.add-right-5 {
   padding-right:5px;
}
.add-right-10 {
   padding-right:10px;
}

.add-right-15 {
   padding-right:15px;
}

.add-right-20 {
   padding-right:20px;
}

.add-right-25 {
   padding-right:25px;
}

.add-right-30 {
   padding-right:30px;
}

.add-btm-5 {
   padding-bottom:5px;
}
.add-btm-10 {
   padding-bottom:10px;
}

.add-btm-15 {
   padding-bottom:15px;
}

.add-btm-20 {
   padding-bottom:20px;
}

.add-btm-25 {
   padding-bottom:25px;
}

.add-btm-30 {
   padding-bottom:30px;
}

.add-left-5 {
   padding-left:5px;
}
.add-left-10 {
   padding-left:10px;
}

.add-left-15 {
   padding-left:15px;
}

.add-left-20 {
   padding-left:20px;
}

.add-left-25 {
   padding-left:25px;
}

.add-left-30 {
   padding-left:30px;
}

.add-5 {
   padding:5px;
}

.add-10 {
   padding:10px;
}

.add-15 {
   padding:15px;
}

.add-20 {
   padding:20px;
}

.add-25 {
   padding:25px;
}

.add-30 {
   padding:30px;
}

/* pull margins */
.pull-top-10 {
   margin-top:-10px!important;
}

.pull-top-20 {
   margin-top:-20px!important;
}

.pull-top-30 {
   margin-top:-30px!important;
}

.pull-top-40 {
   margin-top:-40px!important;
}

.pull-top-50 {
   margin-top:-50px!important;
}

.pull-btm-10 {
   margin-bottom:-10px!important;
}

.pull-btm-20 {
   margin-bottom:-20px!important;
}

.pull-btm-30 {
   margin-bottom:-30px!important;
}

.pull-btm-40 {
   margin-bottom:-40px!important;
}

.pull-btm-50 {
   margin-bottom:-50px!important;
}

.hs-left,.left-align {
    float:left;
}

.hs-right,.right-align {
    float:right;
}

.hs-center,.center-align {
    float:none;
    margin:0 auto;
    text-align:center;
}

.text-center {
    display: table;
    margin: 0 auto;
    text-align:center;
}

.text-left {
    text-align:left;
}

.text-right {
    text-align:right;
}

.hs-iframe {
    overflow:hidden;
}

/* horizontal line */
#hs-container .color-hr .hr {
    border-bottom-width:0px;
    height: 1px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .color-hr-2 .hr{
    border-bottom-width:0px;
    height: 2px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .color-hr-3 .hr{
    border-bottom-width:0px;
    height: 3px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .grey-hr .hr {
    border-bottom-width:0px;
    height: 1px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .grey-hr-2 .hr{
    border-bottom-width:0px;
    height: 2px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .grey-hr-3 .hr{
    border-bottom-width:0px;
    height: 3px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .grey-hr .hr,#hs-container .grey-hr-2 .hr,#hs-container .grey-hr-3 .hr {
    background:#ececec!important; 
}

#hs-container .dark-hr .hr {
    border-bottom-width:0px;
    height: 1px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .dark-hr-2 .hr{
    border-bottom-width:0px;
    height: 2px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .dark-hr-3 .hr{
    border-bottom-width:0px;
    height: 3px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .dark-hr .hr,#hs-container .dark-hr-2 .hr,#hs-container .dark-hr-3 .hr {
    background:#111!important; 
}

#hs-container .white-hr .hr {
    border-bottom-width:0px;
    height: 1px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .white-hr-2 .hr{
    border-bottom-width:0px;
    height: 2px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .white-hr-3 .hr{
    border-bottom-width:0px;
    height: 3px;
    border-bottom-width: 0px;
    border-color:transparent;
}

#hs-container .white-hr .hr,#hs-container .white-hr-2 .hr,#hs-container .white-hr-3 .hr {
    background:#fff!important; 
}


.gutter-5 {
    padding:5px;
}

.gutter-10 {
    padding:10px;
}

.gutter-15 {
    padding:15px;
}

.gutter-20 {
    padding:20px;
}

.gutter-25 {
    padding:25px;
}

.gutter-30 {
    padding:30px;
}

.one-fourth {
    width:25%;
    float:left;
    padding:0;
}

.one-third {
    width:33.33333333%;
    float:left;
    padding:0;
}

.one-third-with-border {
    width:32.33333333%;
    float:left;
    padding:0;
}

.border-right {
   border-right:1px solid #ccc;
}

.is--flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding:0 10px;
}
.is--center{
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin:0 10px;
    min-width: 0;
    width: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    align-self: stretch;
    height: auto;
}

.is--left {
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    
}

.is--right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: right;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0;
    flex: 1;
    
}

@media only screen  and (max-width: 1023px) {
.is--left-mobile {
  justify-content: flex-start!important;
  flex: 1!important;
 }
.is--inherit-mobile {
    -webkit-flex: inherit!important;
    -ms-flex: inherit!important;
    flex: inherit!important;

 }
}


.is--flex0 {
-webkit-flex: 0; 
    -ms-flex: 0;
    flex: 0;
}

.is--flex1 {
-webkit-flex: 1; 
    -ms-flex: 1;
    flex: 1;
}
.is--flex2 {
-webkit-flex: 2; 
    -ms-flex: 2;
    flex: 2;
}
.is--flex3 {
-webkit-flex: 3; 
    -ms-flex: 3;
    flex: 3;
}

.is--flex4 {
-webkit-flex: 4; 
    -ms-flex: 4;
    flex: 4;
}


/*** mid boxes with flex ***/
.half-fullwidth, .is-flex {
  display: flex;
}
.col-flex {
  flex: 1;
}

@media only screen  and (max-width: 745px) {
.is-flex-block {
  display:block;
 }

.is-flex-column {
  flex-direction:column;
 }
.is-flex-reverse {
  flex-direction:column-reverse;
 }
}


.half-fullwidth:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

.mid-box-left {
   float:left;
   width:50%;
   margin: -5px  0 -5px -500%;
   padding: 1.5em  0 1.5em 500%;
}

.mid-box-right {
   float:right;
   width:50%;
   margin: -5px -500% -5px 0;
   padding: 1.5em 500% 1.5em 0;
}


/*** display and hide widgets ***/
.only-mobile,.only-mobile-phone{
    display:none;
    border:none;
}

.matrix .only-mobile,.matrix .only-mobile-phone {
    display:block;
    border:5px solid #e67e22;
}


#hs-container .invisible a:link,#hs-container .invisible a:visited{
   color:#fff!important;
}

.admin-only {
   display:none;
}

.matrix .admin-only {
   display:block;
}

.large-inner .inner{
   margin:0 auto;
   position:relative;
   max-width:1170px;
}

@media (min-width: 992px) {
.large-inner .inner {
    width: 970px;
  }
}
@media (min-width: 1200px) {
.large-inner .inner {
    width: 1170px;
  }
}

.mid-inner .inner {
    width: 908px;
    margin: 0 auto;
    position:relative;
}

.small-inner .inner {
    width: 702px;
    margin: 0 auto;
    position:relative;
}

.fa h1,.fa h2,.fa h3,.fa h4,.fa p,.fa span {
  display:inline;
}

.wow:first-child {
   visibility: hidden;
}

.opacity-8 {
    background-color: rgba(0, 0, 0, 0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
}

.opacity-6 {
    background-color: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
}

.opacity-4 {
    background-color: rgba(0, 0, 0, 0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
}

.opacity-2 {
    background-color: rgba(0, 0, 0, 0.2);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
}

.w-100 {
   width:100%;
}

.w-50 {
   width:50%;
}

.rel {
   position:relative;
}



/*** grid ***/
.col-12,.col-11,.col-10,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1 {
   position: relative;
}

.col-12 {
    width: 100%;
}

.col-11 {
    width: 91.66666667%;
}

.col-10 {
    width: 83.33333333%;
}

.col-9 {
    width: 75%;
}

.col-8 {
    width: 66.66666667%;
}

.col-7 {
    width: 58.33333333%;
}

.col-6 {
    width: 50%;
}

.col-5 {
    width: 41.66666667%;
}

.col-4 {
    width: 33.33333333%;
}

.col-3 {
    width: 25%;
}

.col-2 {
    width: 16.66666667%;
}

.col-1 {
    width: 8.33333333%;
}

.col-0 {
    width: auto;
}
@media only screen and (min-width: 290px) and (max-width: 745px) {
.col-12,.col-11,.col-10,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1 {width:100%;float:left;}
}

#content_area>div>div {
    clear: both;
}


.h-overflow {
  overflow:hidden;
}

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;/* 16:9 */
    padding-top: 0px;
    height: 0;
}

.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    width: 100%; 
    margin: 0 auto;
    position: relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.lazy{
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
  -webkit-transform: translate3d(0,0,0);
}

.loaded{
  opacity: 1;
}

.z-999 {
   z-index:999999;
}

.absolute-top-right {
   position:absolute;
   right:0;
   top:0;
}

.absolute-top-left {
   position:absolute;
   left:0;
   top:0;
}

.absolute-btm-left {
   position:absolute;
   left:0;
   bottom:0px;
}

.absolute-btm-right {
   position:absolute;
   bottom:0;
   right:0;
}

.absolute-center {
    width: 100%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 5%; bottom: 0; right: 5%;
}


.cc-box {
  box-sizing: border-box;
}

a.div-link { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
}

.has-shadow {
  box-shadow: 0px 17px 35px rgba(74,74,115,0.1), 0px 5px 15px rgba(0,0,0,0.07);
}

.has-text-shadow {
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.outlined {
  position:relative;
}

.outlined::before{
    background-color: rgba(85,85,85, 0.2);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
    position: absolute;
    bottom: -5px;
    right: -5px;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
}

.slide-up-hover {
    transition: transform 0.3s ease;
}

.slide-up-hover:hover {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
}

/* custom lines */
.line {
  height:2px;
  background:#000;
  width:100%;
  margin:5px 0;
  position:relative;
}

.medium-line{
  width:50%;
}

.small-line {
   width:50px;
}

.slim-line {
   height:1px;
}

.bold-line {
   height:5px;
}

.has-outline {
   border-bottom: 3px double white;
}

/*** end helper classes ***/

4. JS section

in Design> custom template> HTML you will find a js part of your website. Just place inside the following code: 


// don't follow the white rabbit
$('.hs-magic').appendTo($('.magic-field'));
$('.cc-jimdo').removeClass('cc-m-blogselection');
$('.bg-caption').appendTo($('.new-hero'));
$('.has-sidebar-menu').appendTo($('.sidebar-nav'));
$('.draggable-hero').appendTo($('.new-hero'));
if ( $('.draggable-hero,.slider-holder,.is-matrix,.is-matrix-block').hasClass('has-transparent-header') ) {
        $('#cc-inner .hs-header').addClass('').attr('style','position:absolute;background: transparent!important;');
        $('body').addClass('has-transparent-header')
}
if ( $('div').hasClass('has-nav-inverted') ) {
        $('.max-inner').addClass('is-inverted');
}
if ( $('.draggable-hero').hasClass('has-arrow') ) {
        $('#downbutton').css({ "display": "block" });
}
if ( $('.draggable-hero,.slider-holder,.is-matrix,.is-matrix-block').hasClass('has-no-gutter') ) {
        $('.hs-content .gutter').css({ "padding": "0" });
        $('body').addClass('hide-subnav')
}
$(".is-switcher").appendTo($(".style-switcher"));
        $(".cc-content-parent").css("opacity", "1");
        $(".j-calltoaction-wrapper").fadeIn(1000).css("display", "block");
        $(".j-htmlCode .hs-button,#cc-inner #hs-container .j-formnew input").fadeIn(1000).css("display", "inline-block");

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" 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="background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color1" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;bg-primary</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color2" style="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="color2" 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="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="color3" 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="background-color: #59c3c3; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color4" 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="background-color: #ff4f79; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color5" 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="background-color: #000000; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;">&nbsp;</td>
<td class="color6" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;body</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color7" style="background-color: #115cfa; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;">&nbsp;</td>
<td class="color7" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color8" style="background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px!important;">&nbsp;</td>
<td class="color8" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color9" style="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="color9" 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="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="color10" 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="background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #ffffff;">&nbsp;</td>
<td class="color11" style="background-color: rgba(0, 0, 0, 0);">&nbsp;text color</td>
</tr>
<tr style="height: 32px;">
<td class="color12" style="background-color: #3574f2; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color12" style="background-color: rgba(0, 0, 0, 0);">&nbsp;link color</td>
</tr>
<tr style="height: 32px;">
<td class="color13" style="background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color13" 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="background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color14" style="background-color: rgba(0, 0, 0, 0);">&nbsp;style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color15" style="background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color15" style="background-color: rgba(0, 0, 0, 0);">&nbsp;style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color16" style="background-color: #115cfa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color16" 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="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="color17" style="background-color: rgba(0, 0, 0, 0);">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color18" style="background-color: #1e2022; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color18" style="background-color: rgba(0, 0, 0, 0);">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color19" style="background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="color19" 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>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</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>navigation styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">size-16 weight-400&nbsp;</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>content styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">form-white</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>footer styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; min-width: 100%; color: #888888;">o-form</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Typography</span></div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Heading H1</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config5 col-7" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Heading H2</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Heading H3</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="min-width: 200px; border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0); float: left;">
<tbody>
<tr style="height: 32px;">
<td class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; border-radius: 3px; width: 100%; color: #888888;">weight-600 is-uppercase&nbsp;</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<span class="is-brandon-font size-13" style="color: #999999;"><strong>Note:</strong> All changes made here will be applied to your entire website.</span></div>
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 
<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,.hs-footer .inner p,#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");
    $(".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 ").attr('style', 'background-color: '+ color +'!important');
    
    // config classes
    $('.config').each(function() {
        $("#hs-container").removeClass().addClass( $(this).text()); 
        
});
   $('.config2').each(function() {
       $(".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").removeClass().addClass( $(this).text()); 
        
});
    
    $('.config6').each(function() {
       $(".j-header h2,.j-htmlCode h2").removeClass().addClass( $(this).text()); 
        
});
    $('.config7').each(function() {
       $(".j-header h3,.j-htmlCode h3").removeClass().addClass( $(this).text()); 
        
});
    $('.config8').each(function() {
     $(".cc-m-download-file-link,.hs-button,.j-calltoaction-link, #cc-inner  .j-formnew input[type='submit']").addClass( $(this).text()); 
        
});
    
});
})(jQuery); 
//]]>
</script>

<br />
<center>
    <button class="btn btn-sm cc-m-save btn-save btn-float-left matrix-msg invisible" style=
    "float:left;border:1px solid transparent;padding:5px 10px;font-size:12px;background: #1ba9e1;color: #fff;-webkit-border-radius: 2px;border-radius:4px;" data-action="save">Apply changes</button>
</center>
<span class="is-brandon-font size-13 hs-left add-left-10 add-top-5" style="color: #999999;">  Click twice to apply the changes .</span>

Step 03

Move your Style switcher on the top of the page.

  • Add another module 'Widget/HTML' with the variables code and refresh the page. Our Switcher will be placed on the top of the page and you can start using the editor. 

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

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

  1. module 'Tables' with style editor
  2. module 'Widget/HTML' with js code
  3. module 'Widget/HML' with variable 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
Template configurations
has-right-nav
navigation styles
size-16 weight-400 
content styles
form-white
footer styles
o-form
Typography
Heading H1
weight-600
Heading H2
weight-600
Heading H3
weight-600
Buttons
weight-600 is-uppercase 
Note: All changes made here will be applied to your entire website.

How to edit

  1. Open the style editor in the top of the page 
  2. Select an element to edit clicking the colored circle
  3. Click the button 'Select a color' ( cell options) and choose your color
  4. Click the save button and at the end double click the button 'Apply changes'

 

When you add a new module for example with the buttons, it will be generated with the default color from your CSS, so clicking the button 'apply the changes' or reload the page, you will see the correct color setup in Matrix Style Editor.


Template configuration

Template configuration includes a text output for the custom classes used in Matrix Themes.

Here's a full list  of the classes that can be used here:

Global styles

  • has-left-nav
  • has-right-nav
  • has-center-nav
  • has-custom-header
  • has-large-content

 

Navigation styles

  • size-13
  • weight-400
  • is-uppercase
  • is-letterspace-1
  • is-letterspace-2
  • is-letterspace-3

 

Content styles

  • form-white
  • form-line
  • form-dark
  • o-form
  • mid-round-btn
  • round-btn
  • dark-outline-btn
  • white-utline-btn

 

Footer styles

  • form-white
  • form-line
  • form-dark
  • o-form
  • mid-round-btn
  • round-btn
  • dark-outline-btn
  • white-outline-btn

 


Typography

  • weight-400
  • is-uppercase
  • is-letterspace-1
  • is-letterspace-2
  • is-letterspace-3
  • size-13

 

Common issues

Apply the changes button

For some elements for example "Typography" or "Footer styles" you will see the changes only after having reloading the page.

 

How to reset the editor

If you made a mistake or clicked something and your Style Switcher doesn't look correctly, just remove the whole module "Table" and add the new one from this page

( Editor> Step 01 )

 

Nav flickering bug

If you setup a large font size for the navigation ( e.g. size-20), you might see a flickering effect when the page is loading. This happens because the helper class is applied after the page is loaded. The solution is:

1) Add the same class for 'hs-menu' directly in HTML;

2) In style Editor add one of the animated effects: wow animated fadeIn or wow animated fadeInUp;


Showcase
draggable-logo

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2021 All rights reserved
Log in Log out | Edit