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:
Floating:
Text colors:
Link color:
Background colors:
Gradients:
Semi-transparent backgrounds:
Text-size:
Outline borders:
Adding padding:
Display/hide elements in responsive design
The helper classes will overwrite Jimdo default styles only if used inside the module Widget/HTML