Helper classes

With the Helper classes ( or modifiers ) you can make further customizations for your widgets. 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 sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.


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

    <p>
  Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero
  malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien
  massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
   </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 'colors' of framework menu.

This is your heading


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

    <p>
  Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero
  malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien
  massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
   </p>
     <br/>
    <a class="hs-button" href="http://www.matrix-themes.com/" target="">read more</a>
 </div>

it doesn't look great, does it? So, we apply 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 sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante
  ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero
  malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien
  massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
   </p>
     <br/>
    <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">read more</a>
 </div>

This is your heading

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!

Only inside of module Widget/HTML helper classes overwrite Jimdo default styles

Interested in Zodiac Pro?

More than 30 custom widgets with advanced functionality and direct support

Upgrade