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