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

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

Custom button

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

<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: 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