You can make further customizations for your widgets with the Helper classes ( or modifiers ) . Let's have a look how it works on below example which is grey background box, title, text and button

You can see that default element such as  grey box hs-description has grey background.

Now we change it for  another color  - carrot.  ( This and all other color names are available in section 'select your color'  of framework menu.

So, now we  apply  the other style for our box with carrot background:

1) color-white -  for white text

2) ghost-white - for outlined white button.

Please pay attention at the position of helper classes:

That was just an example of using helper classes with custom widgets. Please check below the most common classes available in Zodiac framework:

Text alignment:

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

Floating:

• hs-left
• hs-right
• hs-center

Text colors:

• color-white
• color-dark
• color-grey

Link color:

• link-white
• link-grey
• link-dark

Background colors:

• red
• pink
• purple
• deep-purple
• indigo
• blue
• light-blue
• cyan
• teal
• green
• light-green
• lime
• yellow
• amber
• orange
• deep-orange
• brown
• grey
• blue-grey
• turquoise
• emerald
• peter-river
• amethyst
• wet-asphalt
• green-sea
• nephritis
• belize-hole
• wisteria
• midnight-blue
• sun-flower
• carrot
• alizarin
• clouds
• concrete
• orange
• pumpkin
• pomegranate
• silver
• asbestos

Gradients:

• bg-gradient
• bg-gradient-2
• bg-gradient-3
• bg-gradient-4
• bg-gradient-5

Semi-transparent backgrounds:

• opacity-2
• opacity-4
• opacity-6
• opacity-8

Text-size:

• size-11
• size-12
• size-13
• size-14
• size-15
• size-16
• size-17
• size-18
• size-19
• size-20
• big
• super-big

Outline borders:

• solid-border
• dashed-border
• white-solid-border
• white-dashed-border
• no-border

Adding padding:

• add-5
• add-10
• add-15
• add-20
• add-25
• add-30

Display/hide elements in responsive design

• hide-mobile
• only-mobile