• Home
    • Getting started
    • Support
  • Home
  • Getting started
  • Support

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:

 

Custom button

<a class="hs-button" href="http://www.zodiac-framework.com/" target="">Custom button</a>



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

Custom button

<a class="hs-button bg-primary" href="http://www.zodiac-framework.com/" target="">Custom button</a>



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:

Custom button

<a class="hs-button bg-primary bg-round" href="http://www.zodiac-framework.com/" target="">Custom button</a>



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:

your title

This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website


<div class="hs-block cc-clearover bg-dark color-white">
    <center>
        <div class="fa fa-diamond fa-4x">
        </div>

        <h3 class="add-top-10">
            your title
        </h3>

        <p>
            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
            use to add content to your website
        </p>
    </center>
</div>




Full list of helper classes


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





Zødiac framework

Current version: 5.5.3

From 10/12/2020 the domain zodiac-framework.com has been moved to a new Jimdo website.

The new website and version (5.0) is available here:

 www.hembarevskyy.com/projects/zodiac/

About | Privacy Policy | Cookie Policy | Sitemap
© 2020 All rights reserved
Log in Log out | Edit
Jimdo

You can do it, too! Sign up for free now at https://www.jimdo.com

  • Scroll to top
Close