JS Code Editor

Templates

Latest release

Choose one of below preset styles to change the design of your website. Use the copy button to paste the code inside the style editor.



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #f14f44;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f2f4;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #386bb7;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #8c53b8;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #e24c4a;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f0f2f4;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #f14f44;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #292b2e;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #e24c4a;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #e24c4a;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #386bb7;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-large-header has-sticky-logo g-font no-shopping-cart</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">weight-400 is-uppercase snip-nav color-line --line07 --line-overlap no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Zion Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Gobal 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #e8ecfc;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #dda4ff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #e8ecfc;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #a1a8e7;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #09143d;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #1b2cc1;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #e8ecfc;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-sticky-logo has-large-header g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Lemberg Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f6f7f9;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #232323;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #e7efff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #7158f1;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #232323;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f6f7f9;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #232323;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #343434;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #0161fe;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #232323;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">has-right-nav g-font</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;right-align color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 21px;">
<tbody>
<tr>
<td class="cc-config 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 --effect03 has-icon-1</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Alsten Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #26272b;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #c6c8cc;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #9ad4d6;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #090909;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #f0f0f0;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #666666;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #d2d2d2;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #26272b;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #26272b;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #26272b;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-custom-logo has-sticky-logo&nbsp; has-large-header no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">right-align</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;has-nav-inner-border-color has-border-top</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;has-nav-inner-border-color has-border-top</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-17 weight-400 is-uppercase snip-nav --line01 --effect02&nbsp; no-border-radius no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-dark</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Bergen Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f7fbec;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #00d3ff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #a8ad9b;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: #a8ad9b;">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #3d4856;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: #0b0c0d;">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #0b0c0d;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #272a2c;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #aff42a;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #191b1d;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(252, 229, 203, 0.92);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-sticky-logo has-large-header no-shopping-cart&nbsp; has-frame g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;right-align link-dark</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;br8</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">add-5 br500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400&nbsp;</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .has-lang-nav.snip-nav ul li a:link,</p>
<p>#cc-inner .has-lang-nav.snip-nav ul li a:visited {</p>
<p>&nbsp; &nbsp;margin: 2px 5px;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Tjorn Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0ebfc;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #061b29;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #ee6b60;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #061b29;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f0ebfc;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: rgba(6, 27, 41, 0.92);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #0a283c;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #4d5ff8;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #f0ebfc;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #061b29;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-large-header has-sticky-logo no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">&nbsp;weight-400 bg-nav-primary active-white-color no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-texture01.jpg</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>&nbsp;</p>
/*** custom styles for Hisingen theme ***/
<p>#cc-inner .hs-menu nav ul li a {</p>
<p>&nbsp; padding:12px 15px!important;</p>
<p>&nbsp; margin:1px;</p>
<p>&nbsp; border-radius:5px;</p>
<p>}</p>
<p>&nbsp;</p>
<p style="line-height: 19.5px;">#cc-inner .hs-menu nav ul ul&nbsp; {</p>
<p style="line-height: 19.5px;">&nbsp; border-radius:5px;</p>
<p style="line-height: 19.5px;">}</p>
<p>&nbsp;</p>
<p style="line-height: 19.5px;">#cc-inner .hs-menu nav ul ul a {</p>
<p style="line-height: 19.5px;">&nbsp; padding:12px 15px!important;</p>
<p style="line-height: 19.5px;">&nbsp; margin:5px;</p>
<p style="line-height: 19.5px;">&nbsp; border-radius:5px;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p style="line-height: 19.5px;">#cc-inner .button_container{</p>
<p style="line-height: 19.5px;">&nbsp; &nbsp;display: flex;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p style="line-height: 19.5px;">.header-widget:not(.overlay.open .header-widget) {</p>
<p style="line-height: 19.5px;">&nbsp; display:none;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p style="line-height: 19.5px;">.overlay .is--left {</p>
<p style="line-height: 19.5px;">&nbsp; display:block;</p>
<p style="line-height: 19.5px;">&nbsp; text-align:left;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p style="line-height: 19.5px;">.has-left-nav .hs-logo {</p>
<p style="line-height: 19.5px;">&nbsp; padding-right:30px;</p>
<p style="line-height: 19.5px;">}</p>
<p style="line-height: 19.5px;">&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Hisingen Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #364d4c;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #091d1c;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #818f43;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #091d1c;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #091d1c;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #0e2e2d;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #c09342;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #102b2a;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-large-header has-header-small-shadow no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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 --effect03</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">o-form round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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&nbsp;color-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Lacksund Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #e27361;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f7f7f7;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #6280f0;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f7f7f7;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #e27361;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1c1c1c;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #e27361;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #e27361;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #6280f0;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-large-header no-shopping-cart g-font has-sticky-logo</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;bg-white br5&nbsp; add-10 margin-5 has-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-16 weight-400 snip-nav --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Agen Preview

<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #dadada;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #070721;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #696969;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #222222;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #dadada;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #b3b3b3;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #171717;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #070707;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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;" contenteditable="true">has-right-nav&nbsp; has-large-header has-large-content no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;" contenteditable="true">&nbsp;has-header-border-color has-border-btm has-thin-border</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">size-17 weight-400 snip-nav --line01 no-border-radius</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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;" contenteditable="true">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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;" contenteditable="true">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">color-white o-form white-outline-btn has-margin</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6" contenteditable="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6" contenteditable="true">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>#cc-inner .is-sticky .bg-header-inner&gt;.has-header-border-color {</p>
<p>&nbsp; &nbsp;border-color:transparent;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Horten Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #b4e717;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f6f5f2;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #33691e;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #1a1d0e;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #b4e717;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f6f5f2;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #444444;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #eeeeee;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #1c4b42;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-custom-logo g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-17&nbsp; snip-nav --line01 has-icon-1 no-shadow has-medium-border-radius</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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 bg-gradient-light&nbsp; round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>.has-left-nav.has-custom-logo .is-sticky .hs-logo {</p>
<p>&nbsp; &nbsp;padding-right:20px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Hafen Preview

<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #eef3f0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #394b41;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #51a51f;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #9cb0a4;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: #eef3f0;">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #9cb0a4;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #eef3f0;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #444444;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #256245;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #eef3f0;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #054f30;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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;" contenteditable="true">has-right-nav no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;" contenteditable="true">&nbsp;br15 has-shadow-small&nbsp; add-left-20 add-right-20&nbsp; margin-10</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">size-15 weight-400 has-large-border-radius no-shadow</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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;" contenteditable="true">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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;" contenteditable="true">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">form-white round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">o-form round-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6" contenteditable="true">weight-400&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6" contenteditable="true">
<p>&nbsp;</p>
<p>.my-class {</p>
<p>&nbsp; &nbsp;background:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Nordland Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f9f9ff;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #020824;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #ffd1a9;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #020824;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f9f9ff;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #020824;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #040f44;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #5b7af8;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #020824;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 no-shopping-cart has-header-shadow-small g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;hidden</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-18 weight-400 snip-nav color-line --line03</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>/* additional styles for onepager template */</p>
<p><span style="font-size: 13px;">.overlay.open .is--left {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;width:100%;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;display:flex;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;flex-direction:column;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;text-align:center;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p><span style="font-size: 13px;">.overlay.open nav {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;font-size:40px;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp;padding:50px 0;</span></p>
<p><span style="font-size: 13px;">}</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">.overlay.open .magic-field {</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp; text-align:left;</span></p>
<p><span style="font-size: 13px;">&nbsp; &nbsp; width:100%</span></p>
<p>&nbsp;</p>
<p><span style="font-size: 13px;">}</span></p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Varmdo Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #eaded0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #054f48;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #79171d;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #b34c49;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1e2022;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #eaded0;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: rgba(121, 23, 29, 0.96);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #981e26;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #ffc548;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #eaded0;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #030717;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-center-logo has-large-header has-sticky-logo no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-16 weight-600 snip-nav</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30 weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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 has-pattern-img</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">https://u.jimcdn.com/cms/o/s1bf426f0637f2ab5/userlayout/img/pattern-memphis-2.png?t=1725693550</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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 weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400&nbsp;</span><span style="color: #888888;">weight-600</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400&nbsp;</span><span style="color: #888888;">weight-600</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-600</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Oland Preview



<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #fff4f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #18212f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #a14b96;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #655494;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #18212f;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #fff4f3;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #18212f;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #e26563;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #243146;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #f93b50;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #fff4f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #18212f;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-right-logo has-sticky-logo has-large-header no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-20 weight-400 color-nav</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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 has-mobile-fullwidth-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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 has-mobile-fullwidth-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Gotland Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f4ece4;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #005246;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #495a44;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #f4ece4;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #1e2022;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #575e44;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #ff782b;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #f4ece4;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #3d422f;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-hamburger no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="line-height: 19.5px;">#cc-inner .hs-button,#cc-inner #hs-container input[type='submit'],#cc-inner .j-calltoaction-link {</p>
<p style="line-height: 19.5px;">&nbsp; &nbsp;border-radius:15px 0 15px 0;</p>
<p style="line-height: 19.5px;">}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Enkel Preview

<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f1f6f6;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #d7ddcb;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #707070;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #f1f6f6;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #4e595d;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #f1f6f6;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(78, 89, 93, 0.9);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-sticky-logo has-large-header no-shopping-cart g-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;has-top-header-border-color has-border-btm has-thin-border color-white size-13</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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 white-outline-btn</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .has-lang-nav.snip-nav ul li a {</p>
<p>&nbsp; margin:2px 7px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Altona Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #ebe0f5;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #4e148c;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #ffc2e2;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ebe0f5;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #1a192d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1f1e37;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #ebe0f5;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #d9d9d9;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-18 weight-400 snip-nav color-line g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Halmstad light Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #ebe0f5;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #4e148c;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #ffc2e2;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #1a192d;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1f1e37;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #aa4cde;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #2c2a4a;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #d9d9d9;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-18 weight-400 snip-nav color-line g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Halmstad dark Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f9faf0;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #6458ff;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #ff27bb;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #f1eeee;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #212121;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #d2ff01;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: #d9d9d9;">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;add-10 m-spacer-0</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-18 weight-400 snip-nav color-line text-center</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
<p>.bg-header-inner &gt;div {</p>
<p>&nbsp; &nbsp; border-radius:0 30px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Halmstad custom Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f6f5f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #6be55f;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #1601ac;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #1f1f1f;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #e3ff05;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #f6f5f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #000000;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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 has-hamburger</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;hidden</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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-16 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<p>o-form color-white&nbsp;</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-500 g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-800 g-font</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500 g-font</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Holborn default Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f0f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #282834;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #8c458d;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #594f8a;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #282834;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: rgba(40, 40, 52, 0.9);">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #cee1f4;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #3d3d4e;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #dc2751;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #f0f0f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #282834;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;margin-10 br500 is--flex</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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-500 snip-nav add-5</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<p>o-form color-white round-btn</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">https://u.jimcdn.com/cms/o/s5a6b6241546cf881/userlayout/img/bg-musician01.jpg?t=1729866141</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-500</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-800</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-500</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my-class {</p>
<p>&nbsp; color:#f0f0f0;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Holborn ultimate Preview


<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<div class="cc-map-additional-devider"><span>Global 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 style="height: 32px;">
<td class="color-select color1" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #f0f0f3;">&nbsp;</td>
<td class="class-name">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #3e3127;">&nbsp;</td>
<td class="class-name">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #1b5851;">&nbsp;</td>
<td class="class-name">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</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 style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #3e3127;">&nbsp;</td>
<td class="class-name">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">content</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="color-select color10" style="background-color: #121212;">&nbsp;</td>
<td class="class-name">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #2a2a2a;">&nbsp;</td>
<td class="class-name">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="color-select color14" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #be9c79;">&nbsp;</td>
<td class="class-name">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">text color</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="color-select color20" style="background-color: #f0f0f3;">&nbsp;</td>
<td class="class-name">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #282834;">&nbsp;</td>
<td class="class-name">navigation color</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="color-select color17" style="background-color: #ffffff;">&nbsp;</td>
<td class="class-name">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);">&nbsp;</td>
<td class="class-name">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-top-header, has-large-header, has-large-content, has-header-shadow, no-shopping-cart, g-font, has-sticky-logo" data-tooltip-position="top">Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config 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</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-top-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a 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;">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-header-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b 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;">&nbsp;margin-5 br10 is-skew bg-gradient</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="add-10, margin-5, br5, has-nav-inner-border-color, has-thin-border, has-medium-border, has-large-border, has-border-top-btm, has-border-top, has-border-btm, has-border-left, has-border-right" data-tooltip-position="top">Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c 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;">&nbsp;margin-10 br500 is--flex</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, color-nav, color-line, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05, has-fadeIn" data-tooltip-position="top">Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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 --effect04 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a 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-16</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="size-16, weight-400, is-uppercase, g-font" data-tooltip-position="top">Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b 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-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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, has-pattern-img, m-text-15" data-tooltip-position="top">Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config 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;">
<p>o-form color-white mid-round-btn</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span data-tooltip="Add the image url" data-tooltip-position="top">Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a 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;">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config 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 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H2</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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 H3</span></td>
</tr>
<tr>
<td class="cc-config 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;"><span style="color: #888888;">weight-400 is-uppercase</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td 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></td>
</tr>
<tr>
<td class="cc-config config8 col-6">weight-400 is-uppercase</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span data-tooltip="Add custom CSS styles" data-tooltip-position="top">Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>.bg-header-inner {</p>
<p>margin-left:-20px;</p>
<p>}</p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Holborn custom Preview

Pre-Built Designs

The initial installation of the Pro package includes one pre-built design. It is possible to request the installation of a specific pre-built design for a cost of €50.00 per installation. Access to all pre-built templates is available in the Enterprise package.

Pre-Built demos Installation

JS Editor code

JS Code Editor

v6.1.3 (16.05.2025)

<var>is-switcher</var> 
<script type="text/javascript">
//<![CDATA[
// version 6.1.3
jQuery.noConflict(),function(e){e(document).ready((function(){e(".config, .config1a, .config1b, .config1c, .config2, .config2a, .config3, .config3a, .config3b, .config4, .config4a, .config5, .config6, .config7, .config8, .config10").each((function(){var t=e(this);if(t.hasClass("config10")){var o=t.find("p").map((function(){return e(this).text().trim()})).get().join("");o=o.replace(/\s+/g," ").trim();var n=e('style[data-type="custom-css"]');n.length>0&&!o?n.remove():(n.remove(),e("head").append('<style data-type="custom-css">'+o+"</style>"))}else{var s=t[0].textContent.trim().replace(/\s+/g," ").trim().split(" ");if(t.hasClass("config"))e("#hs-container").removeClass().addClass(s.join(" "));else if(t.hasClass("config1a"))e(".bg-top-header-inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config1b"))e(".bg-header-inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config1c"))e(".bg-nav-inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config2"))e(".hs-menu nav, .hs-mega nav, .onepager .hs-menu nav a, .sidebar-options").removeClass().addClass(s.join(" "));else if(t.hasClass("config2a"))e(".bg-nav-inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config3"))e("#content_area").removeClass().addClass(s.join(" "));else if(t.hasClass("config3a"))e(".hs-subnav .inner>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config3b"))e(".nav-mobile-options>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config4"))e(".footer-options>div").removeClass().addClass(s.join(" "));else if(t.hasClass("config4a")){var a=t.text().trim();e(".hs-footer").css({background:"url('"+a+"') no-repeat center","background-size":"cover"})}else t.hasClass("config5")?e(".j-header h1, .j-htmlCode h1, h1.j-blog-header, .j-text h1").removeClass().addClass(s.join(" ")):t.hasClass("config6")?e(".j-header h2, .j-htmlCode h2, .blogselection h2, .j-text h2, .j-blog-post--headline").removeClass().addClass(s.join(" ")):t.hasClass("config7")?e(".j-header h3, .j-htmlCode h3, .j-text h3").removeClass().addClass(s.join(" ")):t.hasClass("config8")&&(e(".j-calltoaction-link").each((function(){var t=e(this);t.hasClass("j-calltoaction-link-style-1")?t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-1"):t.hasClass("j-calltoaction-link-style-2")?t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-2"):t.hasClass("j-calltoaction-link-style-3")&&t.removeClass().addClass("j-calltoaction-link j-calltoaction-link-style-3"),e.each(s,(function(e,o){t.addClass(o)}))})),e(".j-formnew input[type='submit']").each((function(){var t=e(this);t.removeClass().addClass("j-formnew input[type='submit']"),e.each(s,(function(e,o){t.addClass(o)}))})),e(".cc-m-download-file-link").each((function(){var t=e(this);t.removeClass().addClass("cc-m-download-file-link"),e.each(s,(function(e,o){t.addClass(o)}))})))}}));var t=e('<div class="guide-lines-container"></div>').appendTo(".matrix .is-fluid-area");function o(o){t.empty();var n=o.position(),s=o.outerWidth();e('<div class="guide-line-vertical"></div>').css({left:n.left+s/2,top:0,bottom:0}).appendTo(t)}function n(){t.empty()}e(".matrix .is-fluid").draggable({containment:"parent",grid:[1,1],stop:function(){var t=e(this).parent().width(),o=e(this).parent().height(),s=e(this).position().left/t*100+"%",a=e(this).position().top/o*100+"%";e(this).css("left",s),e(this).css("top",a),n()},drag:function(e,t){o(t.helper)}}),e(".matrix .is-fluid").dblclick((function(t){e(t.target).hasClass("btn-radius-plus")||e(t.target).hasClass("btn-radius-minus")||e(this).draggable({disabled:!0})})),e(document).on("click",(function(t){e(t.target).closest(".matrix .is-fluid").length||e(".matrix .is-fluid").draggable({disabled:!1})})),e(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,stop:function(e,t){var o=t.element.parent(),s=t.element.width()/o.width()*100+"%",a=t.element.height()/o.height()*100+"%",r=t.position.left/o.width()*100+"%",l=t.position.top/o.height()*100+"%";t.element.css({width:s,height:a,left:r,top:l}),n()},start:function(e,t){t.element.position(),o(t.helper)},resize:function(e,t){o(t.helper)}}),e(".matrix .is-fluid-area").resizable({handles:"s",autoHide:!0,stop:function(e,t){var o=t.element.parent();t.element.css({height:t.element.height()+"px",width:t.element.width()/o.width()*100+"%"})}}),e(".matrix .mask-section").resizable({containment:"parent",autoHide:!0,stop:function(e,t){var o=t.element.parent(),s=t.element.width()/o.width()*100+"%",a=t.element.height()/o.height()*100+"%",r=t.position.left/o.width()*100+"%",l=t.position.top/o.height()*100+"%";t.element.css({width:s,height:a,left:r,top:l}),n()},start:function(e,t){o(t.helper)},resize:function(e,t){o(t.helper)}}),e(".matrix .fluid-img").resizable({containment:"parent",autoHide:!0,aspectRatio:!1,stop:function(e,t){var o=t.element.parent(),s=t.element.width()/o.width()*100+"%",a=t.element.height()/o.height()*100+"%",r=t.position.left/o.width()*100+"%",l=t.position.top/o.height()*100+"%";t.element.css({width:s,height:a,left:r,top:l}),n()},start:function(e,t){t.element.position(),o(t.helper)},resize:function(e,t){o(t.helper)}}),new MutationObserver((function(t){t.forEach((function(t){var o;"childList"===t.type&&t.addedNodes.length>0&&(o={},[".color1",".color2",".color3",".color4",".color5",".color6",".color7",".color7b",".color8",".color8b",".color8c",".color9",".color10",".color11",".color12",".color13",".color14",".color15",".color16",".color17",".color18",".color19",".color20",".color21",".color22",".color23",".color24",".color25"].forEach((function(t){o[t]=e(t).css("background-color")})),document.documentElement.style.setProperty("--bg-primary",o[".color1"]),document.documentElement.style.setProperty("--bg-primary-light",o[".color2"]),document.documentElement.style.setProperty("--bg-primary-dark",o[".color3"]),document.documentElement.style.setProperty("--bg-secondary",o[".color4"]),document.documentElement.style.setProperty("--bg-secondary-dark",o[".color5"]),document.documentElement.style.setProperty("--bg-body",o[".color6"]),document.documentElement.style.setProperty("--bg-top-header",o[".color7"]),document.documentElement.style.setProperty("--bg-top-header-inner",o[".color7b"]),document.documentElement.style.setProperty("--bg-header",o[".color8"]),document.documentElement.style.setProperty("--bg-header-inner",o[".color8b"]),document.documentElement.style.setProperty("--bg-nav-inner",o[".color8c"]),document.documentElement.style.setProperty("--bg-content",o[".color9"]),document.documentElement.style.setProperty("--bg-footer",o[".color10"]),document.documentElement.style.setProperty("--footer-color",o[".color11"]),document.documentElement.style.setProperty("--footer-link",o[".color12"]),document.documentElement.style.setProperty("--bg-hr",o[".color13"]),document.documentElement.style.setProperty("--bg-btn-01",o[".color14"]),document.documentElement.style.setProperty("--bg-btn-02",o[".color15"]),document.documentElement.style.setProperty("--bg-btn-03",o[".color16"]),document.documentElement.style.setProperty("--bg-social",o[".color17"]),document.documentElement.style.setProperty("--nav-color",o[".color18"]),document.documentElement.style.setProperty("--bg-subnav",o[".color19"]),document.documentElement.style.setProperty("--bg-overlay",o[".color20"]),document.documentElement.style.setProperty("--mobile-nav-color",o[".color21"]),document.documentElement.style.setProperty("--text-btn",o[".color22"]),document.documentElement.style.setProperty("--bg-top-header-border-color",o[".color23"]),document.documentElement.style.setProperty("--bg-header-border-color",o[".color24"]),document.documentElement.style.setProperty("--bg-nav-inner-border-color",o[".color25"]),e(".bg-custom-color").each((function(){var t=e(this).find("span").css("color");e(this).parent().attr("style","background-color: "+t+" !important")})))}))})).observe(document.body,{childList:!0,subtree:!0}),e(".config8").each((function(){e(".hs-button").addClass(e(this).text())})),e(".config9").each((function(){e(".hs-content .j-hgrid,.is-anim-block").addClass(e(this).text())})),e(".j-hgrid").unwrap().wrap("<div class='m-section' />"),e(".cc-m-hgrid-column").each((function(){var t=e(this);t.find("ins").each((function(){var o=e(this).text().trim();t.children("div").first().removeClass().addClass(o)}))})),e(".cc-m-htmlcode").on({mouseenter:function(){e(this).find("var, ins").show().css("display","block")},mouseleave:function(){e(this).find("var, ins").hide()}}),e("var").each((function(){e(this).closest(".m-section").removeClass().addClass(e(this).text())})),e(".matrix-reload").click((function(){location.reload(),e(".matrix .cc-content-parent").animate({opacity:".5"},500)})),function(e){const t=window.parent.document;if(!t.getElementById("custom-device-style")){const e=t.createElement("style");e.id="custom-device-style",e.innerHTML="\n      #j-prev-device-wrap.j-prev-phone-landscape {\n        width: 808px !important;\n        height: 1120px !important;\n      }\n      #j-prev-device-wrap.j-prev-phone-landscape .j-prev-device {\n        padding: 40px 40px !important;\n      }\n      #j-prev-device-wrap.j-prev-phone-landscape .j-prev-speaker,\n      #j-prev-device-wrap.j-prev-phone-landscape .j-prev-home {\n        display: none !important;\n      }\n    ",t.head.appendChild(e)}e(".matrix-view").on("click",(function(o){o.preventDefault();const n=e("#cms",t).parent().parent().parent();n.hasClass("j-prev-phone-landscape")||n.hasClass("j-prev-phone-portrait")?n.hasClass("j-prev-phone-landscape")?n.removeClass("j-prev-phone-landscape").addClass("j-prev-phone-portrait"):n.hasClass("j-prev-phone-portrait")&&n.removeClass("j-prev-phone-portrait"):n.addClass("j-prev-phone-landscape")}))}(jQuery),e(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style"),e(".draggable-logo").appendTo(e(".hs-logo")),e(".draggable-top-header").appendTo(e(".hs-top-header .inner>div")),e(".cc-m-hgrid").each((function(){e(this).find(".draggable-hero").length>0&&e(this).appendTo(e(".is-hero-draggable"))})),e("body").hasClass("matrix")||e(".draggable-hero").appendTo(e(".is-hero-draggable"));const s=document.querySelector(".is-hero-draggable");if(s&&!s.classList.contains("draggable-hero")){const e=s.querySelector(".m-section");e&&e.remove()}var a=e(".magic-field,.header-widget");a.find(".hs-magic,.draggable-header-widget").length||e(".hs-magic,.draggable-header-widget").remove().appendTo(a),e(".reset-btn").click((function(){e(".matrix .is-fluid").draggable("destroy"),e(".matrix .is-fluid").draggable()})),e(".edit-btn").click((function(){e(".matrix .is-fluid").draggable("destroy")})),e(".btn-delete").click((function(){e(this).parent().remove()})),e(".btn-add").click((function(){var t=e(this).parent(".is-fluid"),o=t.clone();t.hasClass("is-rel")&&o.removeClass("is-rel"),o.css({left:"+=10px",top:"+=10px"}),o.insertAfter(t)})),e(".is-fluid").removeAttr("data-mce-style"),document.querySelectorAll(".cc-config").forEach((e=>{e.setAttribute("contenteditable","true"),e.addEventListener("keydown",(e=>{if("Enter"===e.key){e.preventDefault();const t=window.getSelection();if(!t.rangeCount)return;const o=t.getRangeAt(0),n=document.createElement("br");o.deleteContents(),o.insertNode(n),o.setStartAfter(n),o.collapse(!0),t.removeAllRanges(),t.addRange(o)}})),e.addEventListener("paste",(e=>{e.preventDefault();const t=(e.clipboardData||window.clipboardData).getData("text/plain").replace(/\u00A0/g," ").replace(/[“”]/g,'"').replace(/[‘’]/g,"'"),o=window.getSelection();if(!o.rangeCount)return;const n=o.getRangeAt(0);n.deleteContents();const s=document.createTextNode(t);n.insertNode(s),n.setStartAfter(s),n.collapse(!0),o.removeAllRanges(),o.addRange(n)}))}))}))}(jQuery);
//]]></script> 
<button class="btn btn-sm cc-m-save btn-save matrix-msg matrix-save" data-action="save" title="Apply the styles">&#160;</button> 
<button class="btn btn-sm matrix-msg matrix-view" title="Mobile view">&#160;</button>

Looking for a previous version?

Please check the section "Updates" where you can find all previous version of the Style Editor.

Notes

The multipurpose styles can be replaced with multilingual or premade templates. Special templates have a specific structure, allowing only a unique configuration of styles.

Questions & Answers

If you have any further questions regarding the templates or if you've found a bug, please add a comment below

Comments: 0

Stand out with professional Jimdo website

Premium 24/7 Support · Lifetime Updates

has-right-col-border

Resources

Documentation

Quick links

Try Matrix Builder

draggable-logo

Global colors

	bg-primary
	bg-primary-light
	bg-primary-dark
	bg-secondary
	bg-secondary-dark

Template colors

	body
	top-header
	top-header-inner
	header
	header-inner
	navigation-inner
	navigation color
	dropdown background color
	content

Footer Styles

	background
	text color
	link color
	horizontal line

Buttons

	style 1
	style 2
	style 3
	text color

Mobile navigation

	background color
	navigation color

Other elements

	social icons
	top header border
	header border
	nav inner border

Template configurations

has-center-nav has-sticky-logo has-large-header g-font no-shopping-cart

Top header inner

Header inner

Navigation inner

Navigation styles

snip-nav --line01

Sub-menu (breadcrumbs) styles

size-15

Mobile Navigation styles

size-30

Content styles

form-white

Footer styles

o-form color-white white-outline-btn

Footer background image

Typography

Heading H1

weight-400

Heading H2

weight-400

Heading H3

weight-400

Buttons

weight-400

Advanced settings

Custom CSS

#cc-inner .my-class {

color:#f0f0f0;

}

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

is-switcher