Install the Zodiac framework in just one click.
Current version: 5.5.5 (30-04-2022)
Starting from 01.01.2023 the Zodiac framework will be removed. In order to keep using the framework on your website, you should host all source files locally on your own website.
You'll have to save all shortcodes and the custom widgets as well.
The new framework 'Matrix Page Builder' is available here
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.
| 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 |
