Helper Classes

You can make further customizations for your widgets with the Helper classes ( or modifiers ) 

We will start with a simple button that in Zodiac framework has class hs-button:

Now by adding the class bg-primary, you can modify the color and set up your brand color:

All available background colors  can be found in section 'Colors' of Zodiac admin menu

You can use more than one helper class, for example making different style of the button:

All styles of the buttons:

• mid-round
• bg-round
• ghost-dark
• ghost-white
• small-btn
• large-btn

You can make left, center or right aligned buttons:

• float-left
• center-align
• float-right

For simple text or heading alignment, please use the following classes:

• left-align
• center-align
• right-align

For custom widgets, you need to combine different background and text colors:

/* -------------------------------------------------------------------------------- /
   HELPER CLASSES
/ -------------------------------------------------------------------------------- */


/* 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!important;
}

/* 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!important;
}

/* text colors for other backgrounds */
 .color-grey, .color-grey p, .color-grey  td, .color-c table, .color-grey  span, .color-grey  h1, .color-grey  h2, .color-grey  h3{
   color:#ccc!important;
}

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

/* backgrounds */
 .bg-grey{
    background:#f0f0f0;
}

 .bg-white{
    background:#ffffff;
}

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

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

 .bg-dark{
    background:#000000;
}

 .bg-transparent {
    background:none;
}

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

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

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

/* brand colors */
.bg-primary { background:#282a2d;}
.bg-secondary { background:#62656b;}

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

.red {
    background:#F44336;
}

.pink {
    background:#E91E63;
}

.purple {
    background:#9C27B0;
}

.deep-purple {
    background:#673AB7;
}

.indigo {
    background:#3F51B5;
}

.blue {
    background:#2196F3;
}

.light-blue {
    background:#03A9F4;
}


.cyan {
    background:#00BCD4;
}

.teal {
    background:#009688;
}

.green {
    background:#4CAF50;
}

.light-green {
    background:#8BC34A;
}

.lime {
    background:#CDDC39;
}

.yellow {
    background:#FFEB3B;
}

.amber {
    background:#FFC107;
}

.orange {
    background:#FF9800;
}

.deep-orange {
    background:#FF5722;
}

.brown {
    background:#795548;
}

.grey {
    background:#9E9E9E;
}

.blue-grey {
    background:#607D8B;
}

.grey {
    background:#9E9E9E;
}


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

.turquoise {
   background: #1dd2af;
}

.emerald {
   background: #2ecc71;
}

.peter-river{
   background: #3498db;
}

.amethyst{
   background: #9b59b6;
}

.wet-asphalt {
   background: #34495e;
}

.green-sea {
   background: #16a085;
}

.nephritis {
   background: #27ae60;
}

.belize-hole {
   background: #2980b9;
}

.wisteria {
   background: #8e44ad;
}

.midnight-blue {
   background: #2c3e50;
}

.sun-flower {
   background: #f1c40f;
}

.carrot {
   background: #e67e22;
}

.alizarin {
   background: #e74c3c;
}

.clouds {
   background: #ecf0f1;
}

.concrete {
   background: #95a5a6;
}

.orange{
   background: #f39c12;
}

.pumpkin {
   background: #d35400;
}

.pomegranate {
   background: #c0392b;
}

.silver {
   background: #bdc3c7;
}

.asbestos {
   background: #7f8c8d;
}

.jimdo-blue {
   background: #1ba9e1;
}

.jimdo-green {
   background: #c0d34b;
}

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


}

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

}

.bg-gradient-3 {
background: -webkit-linear-gradient(to right, #B06AB3, #4568DC);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #B06AB3, #4568DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

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

}

.bg-gradient-5 {
background: -webkit-linear-gradient(to right, #8E54E9, #4776E6);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #8E54E9, #4776E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}


/*** 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;
}


 .big, .mobile-big {
    font-size:300%!important;
}

 .super-big {
   font-size:500%!important;
}

 .small {
   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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.add-5 {
   padding:5px;
}

.add-10 {
   padding:10px;
}

.add-15 {
   padding:15px;
}

.add-20 {
   padding:20px;
}

.add-25 {
   padding:25px;
}

.add-30 {
   padding:30px;
}

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

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

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

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

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

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

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

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

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

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

.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;

}

.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;
}

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



 .center-align, .center-align h1, .center-align h2, .center-align h3, .center-align p {
    display: table;
    margin: 0 auto!important;
    text-align:center!important;
}

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

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


 .center-align {
    float:none;
    margin:0 auto!important;
    text-align:center!important;
}

 .left-align, .left-align h1, .left-align h2, .left-align h3, .left-align p {
  text-align:left;
}

 .right-align, .right-align h1, .right-align h2, .right-align h3, .right-align p {
  text-align: right;
}


.float-left {
    float:left;
}
.float-right {
    float:right;
}

.hs-iframe {
    overflow:hidden;
}

/* custom lines */
.line {
  height:2px;
  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;
}


/*** 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;
}

.sqs-layout.invisible {
   display:block;
   border:5px solid #eb433e;
}

.cd-btn{
  position:fixed;bottom: 50%;left: 0;z-index:999999;font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;display:none;text-align:left;font-size:16px;padding:5px 12px;background-color: rgba(0, 0, 0, 0.6);color:#fff!important;text-decoration:none!important;}

.sqs-edit-mode-active .cd-btn {
  display:block;
}
.cd-btn:before {
 content: "+";
 font-size:25px;
 padding:0;
 color:#fff;
}

.sqs-layout .cd-btn:hover {

}


.matrix-msg{
   background:#ff706b;
   color:#fff;
   padding:7px;
}

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

.admin-only {
   display:none;
}

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


/* inner */
.inner {
    width: 980px;
    margin: 0 auto;
    position:relative;
}

.max-inner {
    width: 100%;
    margin: 0 auto;
    position:relative;
    padding:0;
}
.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;
}

.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;}
}

.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:999;
}

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

.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:0px;
}

.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-border {
  border:1px solid #cdcfd3;
}

.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);
}

.is-outlined {
  position:relative;
}

.is-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);
}

/*** styled links ***/
.links ul {
  margin: 0;
  padding: 0;
  list-style:none;
  text-decoration: none !important;
}

.links li{
  list-style:none;
  text-decoration: none !important;
  padding: 9px 0;
  border-bottom: 1px solid rgba(85,85,85, 0.15);   
}


.style2 li {
  border-bottom: 1px dashed rgba(85,85,85, 0.15);   
}

.style3 li {
  border-bottom: 1px dotted rgba(85,85,85, 0.15);   
}

.style4 li {
  border-bottom: 2px solid rgba(85,85,85, 0.15);     
}

.style5 li {
  border-bottom: none;
}

.links li a,.style2 li a {
  color: #777;
}

.links li a{
  text-decoration: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.links li a:hover {
  color: #c2a476; /* color 1 */
}


/* font-weight */
 .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;}
 .weight-900 {font-weight:900;}