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 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.
read more
<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
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.
read more
<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
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.
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 inside of module Widget/HTML
