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:
<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:
<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:
<a class="hs-button bg-primary bg-round" href="http://www.zodiac-framework.com/" target="">Custom button</a>
All styles of the buttons:
You can make left, center or right aligned buttons:
For simple text or heading alignment, please use the following classes:
For custom widgets, you need to combine different background and text colors:
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>
/* -------------------------------------------------------------------------------- /
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;}