• Home
    • Templates
      • Alsten
      • Lemberg
      • Bergen
      • Hafen
      • Altona
      • Enkel
      • Horten
      • Hisingen
      • Agen
      • Tjörn
      • Halmstad
      • Öland
    • Support
    • Purchase
    • Blog
  • Home
  • Templates
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
  • Purchase
  • Blog
  1. Support

Helper classes


  • Local Helper classes

    01

  • Global Helper classes

    02

  • Body classes

    03

  • Template configurations

    03

  • Matrix Variables

    05

Local Helper Classes

The local helper classes are used in Widget/HTML and applied directly to our elements displayed in content or footer sections.

01. background colors

bg-transparent The transparent background color
bg-primary The main accent background color
bg-secondary The secondary accent background color
bg-primary-dark The primary dark background color (footer)
bg-secondary-dark The secondary dark background color
bg-white White background color
bg-dark        
bg-turquoise        
bg-emerald        
bg-peter-river        
bg-amethyst        
bg-wet-asphalt        
bg-green-sea        
bg-nephritis        
bg-belize-hole        
bg-wisteria        
bg-midnight-blue        
bg-sun-flower        
bg-carrot        
bg-alizarin        
bg-clouds        
bg-concrete        
bg-orange        
bg-pumpkin        
bg-pomegranate        
bg-silver        
bg-asbestos        
bg-red        
bg-blue        
bg-green        
bg-yellow        
bg-pink        
bg-purple        
bg-amber        
bg-lime        
bg-brown        
bg-teal        
bg-cyan        
bg-gray        
bg-gradient-1 The background gradient style 1
bg-gradient-2 The background gradient style 2
bg-gradient-3 The background gradient style 3

02. text color and link

color-dark The headings and text color #000000
color-white The headings and text color #ffffff
link-white The global link color #ffffff
link-dark The global link color #000000
link-grey The global link color #cccccc
has-dark-link The text color in custom buttons (not hover)

03. padding and margin

no-padding padding:0px
add-5 padding:5px
add-10 padding:10px
add-15 padding:15px
add-20 padding:20px
add-25 padding:25px
add-30 padding:30px
no-margin margin:0
pull-top margin-top:-15px
pull-btm margin-bottom:-15px

04. alignment

hs-left float:left
hs-right float:right
hs-center float:none
text-left text-align:left
text-right text-align:right
text-center text-align:center
is--left left-align (Flexbox)
is--right right-align (Flexbox)
is--center center-align (Flexbox)

05. text size and font weight

size-11 font-size:11px
size-12 font-size:12px
size-13 font-size:13px
size-14 font-size:14px
size-15 font-size:15px
size-16 font-size:16px
size-17 font-size:17px
size-18 font-size:18px
size-19 font-size:19px
size-20 font-size:20px
size-25 font-size:25px
size-30 font-size:30px
has-large-text font-size:300% (only desktop)
has-large-mobile font-size:300% (desktop & mobile)
has-super-large-text font-size:500% (only desktop)
weight-300 font-weight:300
weight-400 font-weight:400 
weight-500 font-weight:500 
weight-600 font-weight:600
weight-700 font-weight:700 
weight-800 font-weight:800

06. position

rel position:relative
absolute-top-left position:absolute;top:0;left:0;
absolute-top-right position:absolute;top:0;right:0;
absolute-btm-left position:absolute;bottom:0;left:0;
absolute-btm-right position:absolute;bottom:0;right:0;
fixed position:fixed (used only for sticky elements in HTML)

07. display desktop or mobile only

only-mobile Display only in tablet and mobile
only-mobile-phone Display only in mobile 
hide-mobile Display only in desktop

08. hero overlay opacity

opacity-8 opacity:0.8
opacity-6 opacity:0.6
opacity-4 opacity:0.4
opacity-2 opacity:0.2

09. grid columns

col-12 width: 100%
col-11 width: 91.66666667%
col-10 width: 83.33333333%
col-9 width: 75%
col-8 width: 66.66666667% 
col-7 width: 58.33333333%
col-6 width: 50% 
col-5 width: 41.66666667%
col-4 width:33.33333333%
col-3 width:25%
col-2 width:16.66666667%
col-1 width:8.33333333%
col-0 width:auto 

10. buttons

mid-round border:none
bg-round border:1px solid #303030
ghost-dark box-shadow: 0px 17px 35px rgba(74,74,115,0.1), 0px 5px 15px rgba(0,0,0,0.07)
ghost-white text-shadow: 2px 4px 3px rgba(0,0,0,0.3)
has-flat-style box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset
fullwidth-btn width:100%
small-btn padding: 12px 25px
large-btn padding: 15px 55px

Helper classes updates

Last updates: 22-12-2020

 


/* -------------------------------------------------------------------------------- / [7] HELPER CLASSES updated 27-12-2020 / -------------------------------------------------------------------------------- */ /* text colors for dark backgrounds */ .color-white,.color-white p,.color-white td,.color-white table,.color-white span,.color-white h1,.color-white h2,.color-white h3{ color:#fff; } /* text colors for white backgrounds */ .color-dark,.color-dark p,.color-dark td,.color-dark table,.color-dark span,.color-dark h1,.color-dark h2,.color-dark h3 { color:#333; } .color-primary { color:#c2a476; /* color 1 */ } .color-secondary { color:#ae895d; } .color-grey { color:#ccc; } /* backgrounds */ #hs-container .bg-grey, #hs-container .bg-gray{ background:#D1D3D4; } #hs-container .bg-lightgray{ background:#E8E9E9; } #hs-container .bg-darkgray{ background:#BABDBF; } #hs-container .bg-white{ background:#ffffff; } #hs-container .bg-dark{ background:#000000; } .bg-white,.brand-bg .bg-white{ background:#ffffff; } a.hs-button.bg-white{ color:#333!important; } a.hs-button.bg-white:hover{ color:#fff!important; } #hs-container .bg-transparent { background:none; } /* links colors */ #cc-inner .link-dark a:link,#cc-inner .link-dark a:visited{ color:#444; } #cc-inner .link-white a:link,#cc-inner .link-white a:visited{ color:#fff; } #cc-inner .link-grey a:link,#cc-inner .link-grey a:visited{ color:#ccc; } #cc-inner .link-underlined .j-text a:link,#cc-inner .link-underlined .j-text a:visited { box-shadow: inset 0 -1px 0; padding: 0 0 0.2em 0; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } #cc-inner .link-underlined .j-text a:hover{ box-shadow: inset 0 -2px 0; opacity:0.8; } /* default UI colors */ /* source: http://materialuicolors.co/ */ #hs-container .bg-red { background:#F44336; } #hs-container .bg-pink { background:#E91E63; } #hs-container .bg-purple { background:#9C27B0; } #hs-container .bg-deep-purple { background:#673AB7; } #hs-container .bg-indigo { background:#3F51B5; } #hs-container .bg-blue { background:#2196F3; } #hs-container .bg-light-blue { background:#03A9F4; } #hs-container .bg-cyan { background:#00BCD4; } #hs-container .bg-teal { background:#009688; } #hs-container .bg-green { background:#4CAF50; } #hs-container .bg-light-green { background:#8BC34A; } #hs-container .bg-lime { background:#CDDC39; } #hs-container .bg-yellow { background:#FFEB3B; } #hs-container .bg-amber { background:#FFC107; } #hs-container .bg-orange { background:#FF9800; } #hs-container .bg-deep-orange { background:#FF5722; } #hs-container .bg-brown { background:#795548; } /*** FlatUI colors palette ***/ /* source: https://flatuicolors.com/ */ #hs-container .bg-turquoise { background: #1dd2af; } #hs-container .bg-emerald { background: #2ecc71; } #hs-container .bg-peter-river{ background: #3498db; } #hs-container .bg-amethyst{ background: #9b59b6; } #hs-container .bg-wet-asphalt { background: #34495e; } #hs-container .bg-green-sea { background: #16a085; } #hs-container .bg-nephritis { background: #27ae60; } #hs-container .bg-belize-hole { background: #2980b9; } #hs-container .bg-wisteria { background: #8e44ad; } #hs-container .bg-midnight-blue { background: #2c3e50; } #hs-container .bg-sun-flower { background: #f1c40f; } #hs-container .bg-carrot { background: #e67e22; } #hs-container .bg-alizarin { background: #e74c3c; } #hs-container .bg-clouds { background: #ecf0f1; } #hs-container .bg-concrete { background: #95a5a6; } #hs-container .bg-orange{ background: #f39c12; } #hs-container .bg-pumpkin { background: #d35400; } #hs-container .bg-pomegranate { background: #c0392b; } #hs-container .bg-silver { background: #bdc3c7; } #hs-container .bg-asbestos { background: #7f8c8d; } #hs-container .jimdo-blue { background: #1ba9e1; } #hs-container .jimdo-green { background: #c0d34b; } .hs-overlay{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.6; } .has-custom-overlay .matrix-hero .hs-overlay { background: var(--bg-primary); } .bg-gradient { background: -webkit-linear-gradient(to right, #2c3e50, #2980b9); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #2c3e50, #2980b9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .bg-gradient-2 { background: -webkit-linear-gradient(to left, #ff4b1f , #1fddff); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #ff4b1f , #1fddff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .bg-gradient-3 { background: -webkit-linear-gradient(to left, #00bf8f , #001510); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #00bf8f , #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } /* font-weight */ #cc-inner .weight-300 {font-weight:300;} #cc-inner .weight-400 {font-weight:400;} #cc-inner .weight-500 {font-weight:500;} #cc-inner .weight-600 {font-weight:600;} #cc-inner .weight-700 {font-weight:700;} #cc-inner .weight-800 {font-weight:800;} /* remove default uppercase style */ #cc-inner .is-inherit h1,#cc-inner .is-inherit h2,#cc-inner .is-inherit h3,#cc-inner .is-inherit .j-nav-variant-nested,#cc-inner .is-inherit .j-nav-variant-standard,#cc-inner .is-inherit .j-nav-variant-breadcrumb,.cc-page.lowercase .slicknav_nav a,#hs-container .lowercase a.readmore,#cc-inner .is-inherit .j-product .cc-shop-product-desc .cc-shop-addtocard,#cc-inner .is-inherit #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#cc-inner .is-inherit #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#cc-inner .is-inherit .j-blogarticle .blogreadmore:link,#cc-inner .is-inherit .j-blogarticle .blogreadmore:visited,#cc-inner .is-inherit .j-blogarticle .comment:link,#cc-inner .is-inherit .j-blogarticle .comment:visited,#cc-inner .is-inherit .post .blogreadmore:link,#cc-inner .is-inherit .post .blogreadmore:visited,#cc-inner .is-inherit .post .comment:link,#cc-inner .is-inherit .post .comment:visited,#cc-inner .is-inherit .commententry input[type="submit"],#cc-inner .is-inherit .j-formnew input[type='submit'],#cc-inner .is-inherit .j-downloadDocument .cc-m-download-link,#cc-inner .is-inherit .j-newsletterbox input[type='submit'],#cc-inner .is-inherit input[type="submit"].submitUser,#cc-inner .is-inherit .j-rss br+a[target="_blank"],#cc-inner .is-inherit input#mc-embedded-subscribe.button,#cc-inner .is-inherit a.j-calltoaction-link.j-calltoaction-link-style-1,#cc-inner .is-inherit a.j-calltoaction-link.j-calltoaction-link-style-2,#cc-inner .is-inherit a.j-calltoaction-link.j-calltoaction-link-style-3,#cc-inner .is-inherit .hs-button,#cc-inner .is-inherit span.fn,#cc-inner .is-inherit .cc-catalog-wrapper span a,#cc-inner .is-inherit div.caption.cc-m-image-align-3,#cc-inner .is-inherit .cc-imagewrapper.cc-m-image-align-3 figcaption { text-transform:none; } /* remove letter-spacing */ #cc-inner .no-letter-spacing h1,#cc-inner .no-letter-spacing h2,#cc-inner .no-letter-spacing h3,#cc-inner .no-letter-spacing .j-nav-variant-nested,#cc-inner .no-letter-spacing .j-nav-variant-standard,#cc-inner .no-letter-spacing .j-nav-variant-breadcrumb,#cc-inner .no-letter-spacing .slicknav_nav a,#cc-inner .no-letter-spacing a.readmore,#cc-inner .no-letter-spacing .j-product .cc-shop-product-desc .cc-shop-addtocard,#cc-inner .no-letter-spacing #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#cc-inner .no-letter-spacing #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#cc-inner .no-letter-spacing .j-blogarticle .blogreadmore:link,#cc-inner .no-letter-spacing .j-blogarticle .blogreadmore:visited,#cc-inner .no-letter-spacing .j-blogarticle .comment:link,#cc-inner .no-letter-spacing .j-blogarticle .comment:visited,#cc-inner .no-letter-spacing .post .blogreadmore:link,#cc-inner .no-letter-spacing .post .blogreadmore:visited,#cc-inner .no-letter-spacing .post .comment:link,#cc-inner .no-letter-spacing .post .comment:visited,#cc-inner .no-letter-spacing .commententry input[type="submit"],#cc-inner .no-letter-spacing .j-formnew input[type='submit'],#cc-inner .no-letter-spacing .j-downloadDocument .cc-m-download-link,#cc-inner .no-letter-spacing .j-newsletterbox input[type='submit'],#cc-inner .no-letter-spacing input[type="submit"].submitUser,#cc-inner .no-letter-spacing .j-rss br+a[target="_blank"],#cc-inner .no-letter-spacing input#mc-embedded-subscribe.button,#cc-inner .no-letter-spacing a.j-calltoaction-link.j-calltoaction-link-style-1,#cc-inner .no-letter-spacing a.j-calltoaction-link.j-calltoaction-link-style-2,#cc-inner .no-letter-spacing a.j-calltoaction-link.j-calltoaction-link-style-3,#cc-inner .no-letter-spacing .hs-button,#cc-inner .no-letter-spacing span.fn,#cc-inner .no-letter-spacing .cc-catalog-wrapper span a,#cc-inner .no-letter-spacing div.caption.cc-m-image-align-3,#cc-inner .no-letter-spacing .cc-imagewrapper.cc-m-image-align-3 figcaption { letter-spacing:0; } /* remove google font */ #hs-container .no-g-font h1,#hs-container .no-g-font h2,#hs-container .no-g-font h3,#hs-container .no-g-font .j-nav-variant-nested,#hs-container .no-g-font .j-nav-variant-standard,#hs-container .no-g-font .j-nav-variant-breadcrumb,.cc-page .no-g-font .slicknav_nav a,#hs-container .no-g-font a.readmore,#hs-container .no-g-font .j-product .cc-shop-product-desc .cc-shop-addtocard,#hs-container .no-g-font #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#hs-container .no-g-font #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#hs-container .no-g-font .j-blogarticle .blogreadmore:link,#hs-container .no-g-font .j-blogarticle .blogreadmore:visited,#hs-container .no-g-font .j-blogarticle .comment:link,#hs-container .no-g-font .j-blogarticle .comment:visited,#hs-container .no-g-font .post .blogreadmore:link,#hs-container .no-g-font .post .blogreadmore:visited,#hs-container .no-g-font .post .comment:link,#hs-container .no-g-font .post .comment:visited,#hs-container .no-g-font .commententry input[type="submit"],#hs-container .no-g-font .j-formnew input[type='submit'],#hs-container .no-g-font .j-downloadDocument .cc-m-download-link,#hs-container .no-g-font .j-newsletterbox input[type='submit'],.cc-pagemode-overlay #hs-container .no-g-font input[type="submit"].submitUser,#hs-container .no-g-font .j-rss br+a[target="_blank"],#hs-container .no-g-font input#mc-embedded-subscribe.button,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-1,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-2,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-3,#hs-container .no-g-font .hs-button,#hs-container .no-space span.fn,#hs-container .no-g-font .cc-catalog-wrapper span a,#hs-container .no-g-font div.caption.cc-m-image-align-3,#hs-container .no-g-font .cc-imagewrapper.cc-m-image-align-3 figcaption { font-family:inherit; text-transform:none!important; letter-spacing:0!important; } h1.no-g-font,h2.no-g-font,h3.no-g-font,h4.no-g-font { font-family:inherit!important; text-transform:none!important; letter-spacing:0!important; } /*** must have elements ***/ .size-11 { font-size:11px; } .size-12 { font-size:12px; } .size-13 { font-size:13px; } .size-14 { font-size:14px; } .size-15 { font-size:15px; } .size-16 { font-size:16px; } .size-17 { font-size:17px; } .size-18 { font-size:18px; } .size-19 { font-size:19px; } .size-20 { font-size:20px; } .size-25 { font-size:25px; } .size-30 { font-size:30px; } .max-height-20 img { max-height:20px; } .max-height-40 img { max-height:40px; } .max-height-50 img { max-height:50px; } .max-height-60 img { max-height:60px; } .max-height-70 img { max-height:70px; } .max-height-80 img { max-height:80px; } .max-height-90 img { max-height:90px; } .max-height-100 img { max-height:100px; } .max-height-120 img { max-height:120px; } .max-height-150 img { max-height:150px; } #cc-inner .has-large-text,#cc-inner .has-large-mobile,#cc-inner .has-large-heading h1,#cc-inner .has-large-heading h2,#cc-inner .has-large-heading h3 { font-size:300%!important; } #cc-inner .has-super-large-text,#cc-inner .has-super-large-heading h1,#cc-inner .has-super-large-heading h2,#cc-inner .has-super-large-heading h3 { font-size:500%!important; } @media only screen and (max-width: 459px) { #cc-inner .has-large-text,#cc-inner .has-large-mobile,#cc-inner .has-large-heading h1,#cc-inner .has-large-heading h2,#cc-inner .has-large-heading h3 { font-size:120%!important; } .has-super-large-text,.has-super-large-heading h1,.has-super-large-heading h2,.has-super-large-heading h3 { font-size:150%!important; } } .has-small-text { font-size:90%!important; } .has-dashed-border { outline: 1px dashed #ccc; outline-offset: -5px; } .has-solid-border { outline: 1px solid #ccc; outline-offset: -5px; } .has-white-solid-border { outline: 1px solid #fff; outline-offset: -5px; } .has-white-dashed-border { outline: 1px dashed #fff; outline-offset: -5px; } .no-border{ border:none!important; border-top:none!important; border-right:none!important; border-bottom:none!important; border-bottom:none!important; } .add-border{ border:1px solid #303030; } .add-border-bold{ border:2px solid #303030; } /* paddings and margins */ .no-padding{ padding:0!important; } .no-padding-top{ padding-top:0; } .no-padding-btm{ padding-bottom:0; } .no-padding-left{ padding-left:0; } .no-padding-right{ padding-right:0; } .no-margin{ margin:0; } .no-margin-top{ padding-top:0; } .no-margin-btm{ margin-bottom:0; } .remove-margin-left{ margin-left:0; } .remove-margin-right{ margin-right:0; } .add-top-5 { padding-top:5px; } .add-top-10 { padding-top:10px; } .add-top-15 { padding-top:15px; } .add-top-20 { padding-top:20px; } .add-top-25 { padding-top:25px; } .add-top-30 { padding-top:30px; } .add-right-5 { padding-right:5px; } .add-right-10 { padding-right:10px; } .add-right-15 { padding-right:15px; } .add-right-20 { padding-right:20px; } .add-right-25 { padding-right:25px; } .add-right-30 { padding-right:30px; } .add-btm-5 { padding-bottom:5px; } .add-btm-10 { padding-bottom:10px; } .add-btm-15 { padding-bottom:15px; } .add-btm-20 { padding-bottom:20px; } .add-btm-25 { padding-bottom:25px; } .add-bottom-30 { padding-bottom:30px; } .add-left-5 { padding-left:5px; } .add-left-10 { padding-left:10px; } .add-left-15 { padding-left:15px; } .add-left-20 { padding-left:20px; } .add-left-25 { padding-left:25px; } .add-left-30 { padding-left:30px; } .add-5 { padding:5px; } .add-10 { padding:10px; } .add-15 { padding:15px; } .add-20 { padding:20px; } .add-25 { padding:25px; } .add-30 { padding:30px; } /* pull margins */ .pull-top-10 { margin-top:-10px!important; } .pull-top-20 { margin-top:-20px!important; } .pull-top-30 { margin-top:-30px!important; } .pull-top-40 { margin-top:-40px!important; } .pull-top-50 { margin-top:-50px!important; } .pull-btm-10 { margin-bottom:-10px!important; } .pull-btm-20 { margin-bottom:-20px!important; } .pull-btm-30 { margin-bottom:-30px!important; } .pull-btm-40 { margin-bottom:-40px!important; } .pull-btm-50 { margin-bottom:-50px!important; } .hs-left,.left-align { float:left; } .hs-right,.right-align { float:right; } .hs-center,.center-align { float:none; margin:0 auto; text-align:center; } .text-center { display: table; margin: 0 auto; text-align:center; } .text-left { text-align:left; } .text-right { text-align:right; } .hs-iframe { overflow:hidden; } /* horizontal line */ #hs-container .color-hr .hr { border-bottom-width:0px; height: 1px; border-bottom-width: 0px; border-color:transparent; } #hs-container .color-hr-2 .hr{ border-bottom-width:0px; height: 2px; border-bottom-width: 0px; border-color:transparent; } #hs-container .color-hr-3 .hr{ border-bottom-width:0px; height: 3px; border-bottom-width: 0px; border-color:transparent; } #hs-container .grey-hr .hr { border-bottom-width:0px; height: 1px; border-bottom-width: 0px; border-color:transparent; } #hs-container .grey-hr-2 .hr{ border-bottom-width:0px; height: 2px; border-bottom-width: 0px; border-color:transparent; } #hs-container .grey-hr-3 .hr{ border-bottom-width:0px; height: 3px; border-bottom-width: 0px; border-color:transparent; } #hs-container .grey-hr .hr,#hs-container .grey-hr-2 .hr,#hs-container .grey-hr-3 .hr { background:#ececec!important; } #hs-container .dark-hr .hr { border-bottom-width:0px; height: 1px; border-bottom-width: 0px; border-color:transparent; } #hs-container .dark-hr-2 .hr{ border-bottom-width:0px; height: 2px; border-bottom-width: 0px; border-color:transparent; } #hs-container .dark-hr-3 .hr{ border-bottom-width:0px; height: 3px; border-bottom-width: 0px; border-color:transparent; } #hs-container .dark-hr .hr,#hs-container .dark-hr-2 .hr,#hs-container .dark-hr-3 .hr { background:#111!important; } #hs-container .white-hr .hr { border-bottom-width:0px; height: 1px; border-bottom-width: 0px; border-color:transparent; } #hs-container .white-hr-2 .hr{ border-bottom-width:0px; height: 2px; border-bottom-width: 0px; border-color:transparent; } #hs-container .white-hr-3 .hr{ border-bottom-width:0px; height: 3px; border-bottom-width: 0px; border-color:transparent; } #hs-container .white-hr .hr,#hs-container .white-hr-2 .hr,#hs-container .white-hr-3 .hr { background:#fff!important; } .gutter-5 { padding:5px; } .gutter-10 { padding:10px; } .gutter-15 { padding:15px; } .gutter-20 { padding:20px; } .gutter-25 { padding:25px; } .gutter-30 { padding:30px; } .one-fourth { width:25%; float:left; padding:0; } .one-third { width:33.33333333%; float:left; padding:0; } .one-third-with-border { width:32.33333333%; float:left; padding:0; } .border-right { border-right:1px solid #ccc; } .is--flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding:0 10px; } .is--center{ display: flex; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin:0 10px; min-width: 0; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; align-self: stretch; height: auto; } .is--left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; } .is--right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: right; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1; } @media only screen and (max-width: 1023px) { .is--left-mobile { justify-content: flex-start!important; flex: 1!important; } .is--inherit-mobile { -webkit-flex: inherit!important; -ms-flex: inherit!important; flex: inherit!important; } } .is--flex0 { -webkit-flex: 0; -ms-flex: 0; flex: 0; } .is--flex1 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .is--flex2 { -webkit-flex: 2; -ms-flex: 2; flex: 2; } .is--flex3 { -webkit-flex: 3; -ms-flex: 3; flex: 3; } .is--flex4 { -webkit-flex: 4; -ms-flex: 4; flex: 4; } /*** mid boxes with flex ***/ .half-fullwidth, .is-flex { display: flex; } .col-flex { flex: 1; } @media only screen and (max-width: 745px) { .is-flex-block { display:block; } .is-flex-column { flex-direction:column; } .is-flex-reverse { flex-direction:column-reverse; } } .half-fullwidth:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .mid-box-left { float:left; width:50%; margin: -5px 0 -5px -500%; padding: 1.5em 0 1.5em 500%; } .mid-box-right { float:right; width:50%; margin: -5px -500% -5px 0; padding: 1.5em 500% 1.5em 0; } /*** display and hide widgets ***/ .only-mobile,.only-mobile-phone{ display:none; border:none; } .matrix .only-mobile,.matrix .only-mobile-phone { display:block; border:5px solid #e67e22; } .hidden,.invisible,.cd-btn{ display:none; } .matrix .invisible { display:block; } .matrix .cd-btn{ position:fixed; bottom:50%; left:0; z-index:999999; font-family: "Brandon Text",Asap,Verdana,Arial,sans-serif!important; display:block; text-align:left; font-size:20px; padding:0; width:45px; height:45px; background-color: #4e75b9; display: flex; flex-direction: column; justify-content: center; border-radius:500px; color:#fff!important; text-decoration:none!important; } .matrix .cd-btn:before { content: "+"; text-align:center; font-size:40px; font-family: "Brandon Text",Asap,Verdana,Arial,sans-serif!important; font-weight:300; } .matrix .cd-btn:hover:before { } .matrix-msg { background:#414141; border-radius:0.3em; color:#fff; font-weight:400; font-style:normal; text-decoration:none; padding:7px; text-align: left; font-family: "Brandon Text","Asap",Verdana,Arial,sans-serif!important; font-size: 13px!important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } #hs-container .invisible a:link,#hs-container .invisible a:visited{ color:#fff!important; } .admin-only { display:none; } .matrix .admin-only { display:block; } .large-inner .inner{ margin:0 auto; position:relative; max-width:1170px; } @media (min-width: 992px) { .large-inner .inner { width: 970px; } } @media (min-width: 1200px) { .large-inner .inner { width: 1170px; } } .mid-inner .inner { width: 908px; margin: 0 auto; position:relative; } .small-inner .inner { width: 702px; margin: 0 auto; position:relative; } .fa h1,.fa h2,.fa h3,.fa h4,.fa p,.fa span { display:inline; } .wow:first-child { visibility: hidden; } .opacity-8 { background-color: rgba(0, 0, 0, 0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */ } .opacity-6 { background-color: rgba(0, 0, 0, 0.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */ } .opacity-4 { background-color: rgba(0, 0, 0, 0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */ } .opacity-2 { background-color: rgba(0, 0, 0, 0.2); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */ } .w-100 { width:100%; } .w-50 { width:50%; } .rel { position:relative; } /*** grid ***/ .col-12,.col-11,.col-10,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1 { position: relative; } .col-12 { width: 100%; } .col-11 { width: 91.66666667%; } .col-10 { width: 83.33333333%; } .col-9 { width: 75%; } .col-8 { width: 66.66666667%; } .col-7 { width: 58.33333333%; } .col-6 { width: 50%; } .col-5 { width: 41.66666667%; } .col-4 { width: 33.33333333%; } .col-3 { width: 25%; } .col-2 { width: 16.66666667%; } .col-1 { width: 8.33333333%; } .col-0 { width: auto; } @media only screen and (min-width: 290px) and (max-width: 745px) { .col-12,.col-11,.col-10,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1 {width:100%;float:left;} } #content_area>div>div { clear: both; } .h-overflow { overflow:hidden; } .videowrapper { position: relative; padding-bottom: 56.25%;/* 16:9 */ padding-top: 0px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } .map-responsive{ overflow:hidden; padding-bottom:56.25%; width: 100%; margin: 0 auto; position: relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } .lazy{ opacity: 0; transition: opacity 0.5s ease 0.5s; -webkit-transform: translate3d(0,0,0); } .loaded{ opacity: 1; } .z-999 { z-index:999999; } .absolute-top-right { position:absolute; right:0; top:0; } .absolute-top-left { position:absolute; left:0; top:0; } .absolute-btm-left { position:absolute; left:0; bottom:0px; } .absolute-btm-right { position:absolute; bottom:0; right:0; } .absolute-center { width: 100%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 5%; bottom: 0; right: 5%; } .cc-box { box-sizing: border-box; } a.div-link { position:absolute; width:100%; height:100%; top:0; left: 0; } .has-shadow { box-shadow: 0px 17px 35px rgba(74,74,115,0.1), 0px 5px 15px rgba(0,0,0,0.07); } .has-text-shadow { text-shadow: 2px 4px 3px rgba(0,0,0,0.3); } .outlined { position:relative; } .outlined::before{ background-color: rgba(85,85,85, 0.2); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */ position: absolute; bottom: -5px; right: -5px; content: ''; display: block; width: 100%; height: 100%; } .slide-up-hover { transition: transform 0.3s ease; } .slide-up-hover:hover { -webkit-transform: translateY(-15px); transform: translateY(-15px); } /* custom lines */ .line { height:2px; background:#000; width:100%; margin:5px 0; position:relative; } .medium-line{ width:50%; } .small-line { width:50px; } .slim-line { height:1px; } .bold-line { height:5px; } .has-outline { border-bottom: 3px double white; } @media only screen and (max-width: 1023px) { #cc-inner .big { font-size:inherit!important; } }

Global Helper classes

The classes used only in HTML folder (design> custom template> html) and defines the global section styles.

form-white contact form for white background
form-dark contact form for dark background
o-form contact form for colored background (opacity)
mid-round-btn default Jimdo buttons with border-radius:5px
round-btn default Jimdo buttons with border-radius:500px
dark-outline-btn default Jimdo buttons with dark outlined styles
white-outline-btn default Jimdo buttons with white outlined styles 
color-hr horizontal line with accent background color
dark-hr horizontal line with dark background color
white-hr horizontal line with white background color
grey-hr horizontal line with grey background color

The body classes

With the body classes you can change the global styles of a specific page  ( Settings> Edit Head> Select a page)

bg-grey  mid-round add-20 has-shadow wow animated fadeInUp
no-hero hide the hero image
main-page make your hero image the same size like in homepage
no-hero-overlay remove the hero overlay
has-mask-hero apply the absolute position for your hero section
has-slope display the slope element in hero section
hide-subnav remove the sub-navigation (breadcrumbs)
blog-page apply the narrow content  (for the blog pages) 

Template configurations

The template configurations have the same functions as the body classes but applied for the whole website.

For example, with body class no-hero you can hide the hero image from a specific page while the same class used directly in HTML ( Design> Custom Template> HTML) will remove  the hero image from the whole website.

bg-grey mid-round add-20 has-shadow wow animated fadeInUp
no-hero hide the hero image
main-page make your hero image the same size like in homepage
no-global-hero hide the hero image in all pages except the homepage
has-global-hero  display the hero image  only in specific page
no-hero-overlay remove the hero overlay
has-mask-hero apply the absolute position for your hero section
has-slope display the slope element in hero section
has-custom-hero remove the sub-navigation (breadcrumbs)
has-custom-header apply the narrow content  (for the blog pages) 
large-inner  make you content 980px width ( default )
has-large-content  make your content 95vw ( max-width 1500px )
has-play-of-columns  activate the play of columns option
has-left-nav  navigation left alignment
has-center-nav navigation center alignment 
has-right-nav  navigation right alignment

has-custom-text

 apply different font style for the global styles 

has-custom-blog

 the default blog page has narrow content

Matrix Variables

The classes available as Matrix variables and can be used only inside the Columns module

draggable-logo applied only for logo or header sections
draggable-hero applied only for hero section
has-padding removes the default 5px padding from any Jimdo module
is-tile display tile widget
is-overlay display the overlay widget
is-overlay is-white display the overlay widget with white caption background
is-teaser applied for Text with Photo module 
is-fullwidth display fullwidth any Jimdo element
hs-fullwidth display the fullwidth background

Support

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

Quick links

  • Features
  • Pricing
  • Pre Purchase Questions
  • Partners
  • Custom Installation
  • Zødiac Framework

Get inspired

  • Showcase
  • Web Design Inspirations
  • Professional Package
  • Enterprise Package
  • Play of columns
  • No coding features
  • Matrix variables
hide-in-doc-page

Showcase
draggable-logo

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2021 All rights reserved
Log in Log out | Edit
  • Scroll to top
Close