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

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.


read more

<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


read more

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


read more

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/

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