Helper classes

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

This is your heading

Vestibulum ac diam sit amet quam vehicula elementum.


<div class="hs-description cc-clearover">
            
   <h1>
      This is your heading
   </h1>

    <p>
  Vestibulum ac diam sit amet quam vehicula elementum
   </p>
     <br/>
    <a class="hs-button" href="http://www.matrix-themes.com/" target="">read more</a>
 </div>

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.

This is your heading

Vestibulum ac diam sit amet quam vehicula elementum


<div class="hs-description  carrot cc-clearover">         
   <h1>
      This is your heading
   </h1>
    <p>
  Vestibulum ac diam sit amet quam vehicula elementum
   </p>
     <br/>
    <a class="hs-button" href="http://www.matrix-themes.com/" target="">read more</a>
 </div>

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:


<div class="hs-description  carrot color-white cc-clearover">          
   <h1>
      This is your heading
   </h1>
    <p>
  Vestibulum ac diam sit amet quam vehicula elementum
   </p>
     <br/>
    <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">read more</a>
 </div>

This is your heading

Vestibulum ac diam sit amet quam vehicula elementum.

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

Important!

The helper classes will overwrite Jimdo default styles only if used inside the module Widget/HTML

Interested in Zodiac Pro?

More than 30 custom widgets with advanced functionality and direct support

Upgrade

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/