Install the Zodiac framework in just one click.
Current version: 5.5.5 (30-04-2022)
To add the Zodiac framework to your own website, just copy the below code and paste it to Edit Head section
01 In admin menu > Settings> Edit Head
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/loki156/zodiac/dist/zodiac-framework.min.js" async="true" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/loki156/zodiac@master/dist/zodiac-framework.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
/* main bg accent color */
#cc-inner .bg-primary,
#cc-inner .hs-button:not(.ghost-dark):not(.ghost-white) {
background:#2d00fb;
}
/* light bg accent color */
.jtpl-main .bg-primary-light,
.jtpl-main .content-teaser,
.jtpl-main .quote-teaser,
#cc-inner .bg-grey,
#cc-inner .bg-gray,
.jtpl-main .hs-description {
background:#f6f6f9;
}
/* dark bg accent color */
#cc-inner .bg-primary-dark,
#cc-inner .hs-button:not(.ghost-white):hover{
background:#03002f!important;
}
/* btn size */
#cc-inner .j-formnew input[type='submit'],
#cc-inner .hs-button {
padding:18px 45px;
}
/*]]>*/
</style>
02 Click the plus icon to open the Zodiac admin menu
03 Click the header title Zodiac framework to access the main dashboard
The framework is using a jQuery library in section Edit Head. Make sure you have only one library of jQuery to avoid the conflict between different versions.
The framework menu doesn't work properly if you installed the latest version and didn't remove the previous code of the framework from the footer. Starting from version 5.2 , the framework doesn't require anymore the second part of the code in footer
Please check the documentation with detailed instructions about it
The sections with Password-Protected Areas are part of the framework Zodiac Pro including additional widgets, plugins and custom features.
Zodiac is the advanced front-end framework for Jimdo websites. Create unique websites using advanced animations, custom CSS and JS plugins and much more.
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| header | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| has-right-nav g-font no-shopping-cart |
| size-16 weight-400 snip-nav |
| form-white round-btn |
| o-form color-white round-btn |
| weight-600 |
| weight-600 |
| weight-600 |
| weight-600 --hover:bg-custom |
| wow fadeInUp |
