Colors
There are 2 main brand colors that can be set up in Header bg-primary and bg-secondary
You need to change the default brand colors for your own ones.
Obviously, you can also add additional classes with your colors or use the default colors below
<style>
/* set up your brand colors */
.bg-primary {
background:#5580ff!important;
}
.bg-secondary {
background:#ff8a73!important;
}
</style>
Default colors included in Zodiac Framework based on UI flat colors https://flatuicolors.com/ and http://materialuicolors.co/
turquoise
emerald
peter-river
amethyst
wet-asphalt
green-sea
nephritis
belize-hole
wisteria
alizarin
clouds
concrete
midnight-blue
sun-flower
carrot
orange
pumpkin
pomegranate
yellow
pink
purple
red
blue
green
silver
asbestos
amber
lime
deep-purple
brown
teal
cyan
bg-white
bg-grey
bg-dark
Examples of using custom colors
Buttons
<a class="hs-button" href="http://www.zodiac-framework.com/" target="">Custom button</a>
<a class="hs-button peter-river" href="http://www.zodiac-framework.com/" target="">Custom button</a>
Custom widgets
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">
<center>
<div class="fa fa-diamond fa-4x">
</div>
<h3>Your title</h3>
<p>
This is an example text, <a href="https://www.zodiac-framework.com/" title="Home">simply click</a> 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>
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 bg-dark color-white link-grey cc-clearover">
<center>
<div class="fa fa-diamond fa-4x">
</div>
<h3>Your title</h3>
<p>
This is an example text, <a href="https://www.zodiac-framework.com/" title="Home">simply click</a> 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>
For text color you can use the following classes:
color-dark
color-white
For link colors:
link-dark
link-white
link-grey
Zødiac framework
Current version: 4.1