Documentation
1. Installation
To install Zodiac framework on your website, you need to place 3 links with brand color styles in section Edit Head ( Settings> Edit Head ) and framework menu code that should be added inside of the sidebar or footer as Widget/HTML
1) Settings> Edit Head:
last updated: 24/09/2017 h11:53
<script src="https://u.jimcdn.com/cms/o/seac454b35feba21d/userlayout/js/zodiac-1-1.js?t=1506247043" async="true" type="text/javascript">
</script>
<link href="https://u.jimcdn.com/cms/o/seac454b35feba21d/userlayout/css/zodiac-1-1.css?t=1506247049" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
<style type="text/css">
/*<![CDATA[*/
/*** brand colors ***/
.bg-primary {
background:#e85459;
}
.bg-secondary {
background:#756855;
}
/*]]>*/
</style>
2) Widget/HTML inside of sidebar or footer:
<a href="#0" class="cd-btn" style="z-index:11;"></a>
<div class="cd-panel from-left">
<header class="cd-panel-header orange">
<h1>
Zodiac Framework
</h1>
<a href="#0" class="cd-panel-close"></a>
</header>
<div class="cd-panel-container">
<div class="cd-panel-content">
<!-- ************* Vimeo Popup ************* -->
<div class="invisibleh">
<a class="popup-vimeo" href="https://www.zodiac-framework.com/getting-started/" title="">Documentation</a>
<a class="popup-vimeo" href="https://www.zodiac-framework.com/getting-started/widgets/" title="">Custom Widgets</a>
<a class="popup-vimeo" href="https://www.zodiac-framework.com/getting-started/colors/" title="">Colors</a>
<a class="popup-vimeo" href="https://www.zodiac-framework.com/getting-started/helper-classes/" title="">Helper classes</a>
</div>
<!-- ************* End Vimeo Popup ************* -->
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
</div>
<!-- cd-panel -->
<div class="matrix-msg invisible">
Zodiac Framework menu
</div>
Once you added the code to your website, just refresh the page and you will see the gear icon in the middle of the left side of your website like shown in below screenshots
That's all. Now you can use the framework in your website. Please read carefully the important information before working with it.
What about Updates? The url of links in Edit Head area are always updated with the latest version of framework. Please make sure the ones you're using on your website are the same like on my page above.
2. Important notes
It is very important to use Jimdo module Widget/HTML for all custom widgets. In this way the custom styles will overwrite the default Jimdo system styles. Some of the widgets will work only inside of module Widget/HTML!
Jimdo offers 2 types of template: fullwidth and boxed. If you're using boxed layout, the full width sections and parallax need to be added the class 'boxed'. This won't allow you to overlap the content area
3. Upgrade
4. Support
Support is available only for the version Zodiac Pro.
If you have found a bug or error, please leave the comment below always indicating the name of the template you're using.Thank you.
Write a comment