Style switcher
Preset styles
<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>
Style 01
Zion
Style Editor
Alsten
<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;">none</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>
Style 02
Alsten
Typography: Inter
Style Editor
Alsten
<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: #5fb275; 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: #edefe5; 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: #272a1b; 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: #2c55c9; 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: #003400; 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: rgba(0, 0, 0, 0); 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: #5fb275; 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: #272a1b; 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: #5fb275; 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: #5fb275; 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: #5fb275; 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: #5fb275; 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: #5fb275; 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>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav g-font</div>
<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>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav</div>
<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>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</div>
<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>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</div>
<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>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</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-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</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-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<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>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">wow animate__fadeInUp</div>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>
Style 03
Lemberg
Typography: Poppins
Style Editor
Lemberg
<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: #1b2cc1; 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: #f2f4ff; 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: #151616; 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: #61fbd5; 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: #1b2cc1; 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: #1e2022; 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: #cccccc; 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: #1b2cc1; 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: #1b2cc1; 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: #1b2cc1; 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: #1b2cc1; 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: #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);">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color18" 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);">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color19" 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);">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>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav g-font</div>
<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>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --line01</div>
<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>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</div>
<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>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</div>
<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>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</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-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</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-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600 is-uppercase</div>
<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>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"></div>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>
Style 04
Altona
Typography: Inter
Style Editor
Altona
<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: #ff7a3d; 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: #f8f5f4; 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: #1e1810; 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: #ff5100; 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: #575250; 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: #ff7a3d; 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: #1e1810; 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: #1e1810; 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: #ff7a3d; 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: #ff7a3d; 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: #ff7a3d; 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: #ff7a3d; 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: #ff7a3d; 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: #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);">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color18" 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);">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color19" style="cursor: pointer; background-color: #f8f4ef; 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-center-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 --effect02 is-uppercase is-letterspace-1 g-font</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</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 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, has-dark-link, 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;"> </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>
Style 05
Bergen
Typography: Inter
Style Editor
Bergen
<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: #a8977b; 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: #f7f7f7; 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: #333235; 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: #656d4a; 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: #4f4230; 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: #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;"> 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: #333235; 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: #a8977b; 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: #a8977b; 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: #a8977b; 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: #a8977b; 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: #a8977b; 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="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>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">g-font has-center-nav</div>
<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>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav --line01</div>
<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>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</div>
<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>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</div>
<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>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500 is-uppercase</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-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500 is-uppercase</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-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500 is-uppercase</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500 is-uppercase</div>
<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>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"></div>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>
Style 06
Horten
Style Editor
Horten
<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: #5956e9; 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: #f2f2ff; 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: #292930; 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: #ffdc60; 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: #423ef3; 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: #5956e9; 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: #292930; 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: #5956e9; 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: #5956e9; 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: #5956e9; 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: #5956e9; 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: #5956e9; 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: #000000; 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: #f2f2ff; 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>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav g-font no-shopping-cart</div>
<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>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav</div>
<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>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</div>
<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>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn</div>
<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>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</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-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</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-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<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>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"></div>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>
Style 07
Orust
Style Editor
Orust
<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: #8e43f0; 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: #f3f1f6; 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: #150e1f; 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: #6300e2; 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: #584d66; 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: #8e43f0; 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: #150e1f; 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: #8e43f0; 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: #8e43f0; 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: #8e43f0; 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: #8e43f0; 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: #8e43f0; 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: #150e1f; 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: #f3f1f6; 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: #f3f1f6; 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>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav g-font</div>
<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>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav</div>
<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>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</div>
<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>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white round-btn</div>
<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>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</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-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</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-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600 </div>
<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>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"></div>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>
Style 08
Hafen
Style Editor
Hafen
<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: #5956e9; 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: #ebebf9; 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: #292930; 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: #5956e9; 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: #292930; 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: #5956e9; 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: #5956e9; 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: #5956e9; 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: #5956e9; 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: #5956e9; 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: #16243d; 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: #ebebf9; 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>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-left-nav g-font no-shopping-cart</div>
<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>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav</div>
<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>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white mid-round-btn</div>
<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>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white mid-round-btn</div>
<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>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</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-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</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-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-500</div>
<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>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"></div>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>
Style 09
Hisingen
Style Editor
Hisingen
<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: #fa036b; 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: #f2f2ff; 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: #150e1f; 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: #ff6a97; 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: #645659; 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: #fa036b; 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: #150e1f; 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: #fa036b; 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: #fa036b; 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: #fa036b; 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: #fa036b; 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: #fa036b; 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: #2b161b; 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: #f2f2ff; 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>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-center-nav g-font no-shopping-cart</div>
<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>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav</div>
<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>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white round-btn</div>
<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>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white round-btn</div>
<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>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</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-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</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-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-600</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<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>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"></div>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>
How to Edit
Find out how to edit your website using the advanced style editor.
bg-lightgray add-20 mid-round
Documentation
Find out how to install/reset the style editor from scratch.
bg-lightgray add-20 mid-round
Preset styles
9 preset Matrix Themes styles to restore the style editor.
bg-lightgray add-20 mid-round
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
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