Documentation
1. Installation
To install Zodiac framework, you need to make just 2 steps:
- Copy the below code and paste it to Edit Head section ( in admin menu >Settings> Edit Head )
1. Settings> Edit Head:
last updated: 01/04/2020
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://u.jimcdn.com/cms/o/sd2328d691f491b7c/userlayout/js/zodiac-jimdo-4-0.js?t=1580549489" async="true" type="text/javascript"></script>
<link href="https://u.jimcdn.com/cms/o/sd2328d691f491b7c/userlayout/css/zodiac-jimdo-4-0.css?t=1585841981" 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[*/
.bg-primary {
background:#5580ff!important;
}
.bg-secondary {
background:#ff8a73!important;
}
#cc-inner .j-formnew input[type='submit'],#cc-inner .hs-button {
padding:18px 45px;
}
/*]]>*/
</style>
- Now copy the zodiac framework menu and paste it to the footer or sidebar section inside the module Widget/HTML:
2. Widget/HTML:
<a href="#0" class="cd-btn"></a>
<div class="cd-panel from-left">
<header class="cd-panel-header">
<h1>
Zodiac Framework v.4.0
</h1>
<a href="#0" class="cd-panel-close"></a>
</header>
<div class="cd-panel-container rel">
<div class="cd-panel-content hs-left">
<!-- ************* Vimeo Popup ************* -->
<div class="invisibleh">
<a class="mt" href="https://www.zodiac-framework.com/getting-started/" target="iframe-holder" title="">Documentation</a> <a class="mt" href=
"https://www.zodiac-framework.com/getting-started/widgets/" target="iframe-holder" title="">Custom Widgets</a> <a class="mt" href=
"https://www.zodiac-framework.com/getting-started/colors/" target="iframe-holder" title="">Select a color</a> <a class="mt" href=
"https://www.zodiac-framework.com/getting-started/helper-classes/" target="iframe-holder" title="">Helper Classes</a> <a class="mt" href=
"https://www.zodiac-framework.com/getting-started/play-of-columns/" target="iframe-holder" title="">Play of Columns</a><a class="mt" href=
"https://www.zodiac-framework.com/getting-started/support" target="iframe-holder" title="">Support</a> <a class="mt" href="https://www.zodiac-framework.com/getting-started/updates"
target="iframe-holder" title="">Updates</a> <a class="mt is-upgrade-btn" style="font-weight:600!important;" href="https://www.zodiac-framework.com/upgrade" title="Upgrade" target=
"_blank">Upgrade</a>
</div>
<!-- ************* End Vimeo Popup ************* -->
</div>
<!-- cd-panel-content -->
<div class="left-align" style="padding: 50px 0px 0 0px;height:100%;width: auto;overflow:hidden;">
<div class="cc-box">
<iframe name="iframe-holder" id="iframe-holder" class="" style="height:100%;box-sizing: border-box;display: block;"></iframe>
</div>
</div>
</div>
<!-- cd-panel-container -->
</div>
<!-- cd-panel -->
<div class="matrix-msg invisible">
Zodiac Framework menu
</div>
- Refresh the page and click the plus icon in the middle of the left side
- to get the new zodiac framework admin menu
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.
You can also download all files and host them on your own website. Here are the instructions
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 templates: fullwidth and boxed. If you're using boxed layout or a template with left or right sidebar, the full width sections and parallax require additional class is-boxed. This won't allow you to overlap the content area
3. Instructions
How to change image in custom widgets
To change the image in slider, parallax or any custom widget, you need to upload your own image to Design > Custom Template > Files.
Once uploaded, click the image name which will be opened in a new tab and copy the url of the image from the browser address bar and paste it to Widget/HTML replacing the default image of demo site.
Once copied your image url, paste it Widget/HTML replacing the default image of demo site:
...
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/altona-bg.jpg?t=1506590873" alt="" />
</div>
...
How to replace the Font Awesome Icons
Zodiac includes Font Awesome framework v.4.7. so all available icons are available here:
https://fontawesome.com/v4.7.0/icons/
Below is an example of the widget with the diamond icon:
<!-- ************* Fa description widget ************* -->
<div class="hs-description center-align">
<div class="fa fa-diamond fa-4x">
</div>
<h3 class="add-top-10">
your title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
use to add content to your website
</p>
</div>
your title
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
If you change fa-diamond for any other icon name, let's do it with fa-bus, we will get the widget like this:
<!-- ************* Fa description widget ************* -->
<div class="hs-description center-align">
<div class="fa fa-bus fa-4x">
</div>
<h3 class="add-top-10">
your title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
use to add content to your website
</p>
</div>
your title
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
4. Design kit
Customize the default Jimdo templates with small tweaks
01. Rome template
How to use
Copy the style of customizations and paste it in
Settings > Edit Head
<style>
/* <![CDATA[ */
/*** Zodiac framework design kit for Rome template ***/
#cc-inner .jtpl-navigation .j-nav-level-2 {
left: -100%!important;
}
.jtpl-breadcrumb__inner {
background-color: transparent;
}
.jtpl-breadcrumb, .jtpl-content, .jtpl-footer__inner, .jtpl-header__inner, .jtpl-sidebar__inner {
max-width: 1170px;
}
.jtpl-background-area,.jtpl-header--image {
height: 50vh;
}
.cc-indexpage .jtpl-background-area,.cc-indexpage .jtpl-header--image,
.main-page .jtpl-background-area,.main-page .jtpl-header--image{
height: 100vh;
}
@media only screen and (max-width: 768px) {
.cc-indexpage .jtpl-background-area,.cc-indexpage .jtpl-header--image,
.main-page .jtpl-background-area,.main-page .jtpl-header--image{
height: 50vh;
}
}
/*]]>*/
</style>
02. Osaka template
How to use
Copy the style of customizations and paste it in
Settings > Edit Head
<style>
/* <![CDATA[ */
/*** Zodiac framework design kit for Osaka template ***/
.jtpl-topbar-section{
max-width: 100%;
}
.jtpl-logo,.jtpl-navigation {
padding-left:20px;
padding-right: 20px;
}
.jtpl-section-aside, .jtpl-section-main {
max-width: 1200px;
}
.navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited,
.jtpl-navigation .j-nav-current>a:link, .jtpl-navigation .j-nav-current>a:visited, .jtpl-navigation .j-nav-parent>a:link, .jtpl-navigation .j-nav-parent>a:visited, .jtpl-navigation a:active, .jtpl-navigation a:focus, .jtpl-navigation a:hover{
background-color:transparent!important;
border-top: none!important;
}
.jtpl-navigation .j-nav-current>a:link, .jtpl-navigation .j-nav-current>a:visited, .jtpl-navigation .j-nav-parent>a:link, .jtpl-navigation .j-nav-parent>a:visited, .jtpl-navigation a:active, .jtpl-navigation a:focus, .jtpl-navigation a:hover,
.jtpl-mobile-navigation .j-nav-current>a:link, .jtpl-mobile-navigation .j-nav-current>a:visited, .jtpl-mobile-navigation .j-nav-parent>a:link, .jtpl-mobile-navigation .j-nav-parent>a:visited, .jtpl-mobile-navigation a:active, .jtpl-mobile-navigation a:focus, .jtpl-mobile-navigation a:hover {
color:#b2b2b2;
}
.jtpl-navigation .j-nav-level-1,.jtpl-navigation .j-nav-level-2 {
background: #000;
}
.jtpl-background-area {
height: 50vh;
}
/*]]>*/
</style>
03. Tokyo Template
How to use
Copy the style of customizations and paste it in
Settings > Edit Head
<style>
/* <![CDATA[ */
/*** Zodiac framework design kit for Tokyo template ***/
.jtpl-title .j-website-title-content {
margin: 100px auto;
}
.cc-indexpage .jtpl-title .j-website-title-content,
.main-page .jtpl-title .j-website-title-content{
margin: 200px auto;
}
@media only screen and (max-width: 768px) {
.cc-indexpage .jtpl-title .j-website-title-content,
.main-page .jtpl-title .j-website-title-content{
margin: 100px auto;
}
}
.jtpl-navigation a:link, .jtpl-navigation a:visited,.jtpl-navigation a:hover {
padding: 0;
margin: 0 5px;
border-bottom:2px transparent;
}
.jtpl-topbar-section, .jtpl-subnavigation .jtpl-subnavigation__inner-nav2,
.jtpl-subnavigation .j-nav-level-1,
.jtpl-subnavigation .j-nav-level-2,
.jtpl-content__inner, .jtpl-footer__inner,
.jtpl-sidebar__inner {
max-width: 1170px;
}
ul.cc-nav-level-2.j-nav-level-2 li a:link,
ul.cc-nav-level-2.j-nav-level-2 li a:visited {
font-size: 80%;
padding: 8px 20px;
}
.jtpl-breadcrumb li:only-child, .jtpl-title {
display: block;
}
/*]]>*/
</style>
04. Prague template
How to use
Copy the style of customizations and paste it in
Settings > Edit Head
<style>
/* <![CDATA[ */
/*** Zodiac framework design kit for Prague template ***/
.jtpl-main__inner {
max-width: 1170px;
border-radius: 0px;
box-shadow:none;
}
.j-website-title-content,.jtpl-navigation {
padding: 10px 0;
}
.jtpl-navigation:before {
border-top: 1px solid #ddd;
}
.jtpl-navigation__inner .j-nav-level-1,.jtpl-navigation__inner .j-nav-level-2 {
border: none;
border-radius: 0px;
background:#f0f0f0;
min-width:200px;
}
.jtpl-navigation__inner .j-nav-level-0 a:link,
.jtpl-navigation__inner .j-nav-level-0 a:visited,
.navigation-colors a,
.navigation-colors a:link,
.navigation-colors a:visited,
.jtpl-mobile-navigation__inner .jmd-nav__list-item-1>a:link:before,
.jtpl-mobile-navigation__inner .jmd-nav__list-item-1>a:visited:before,
.jtpl-mobile-navigation__inner .jmd-nav__list-item-2>a:link:before,
.jtpl-mobile-navigation__inner .jmd-nav__list-item-2>a:visited:before{
background:transparent;
text-align:left;
font-weight:400;
color:#000;
}
.jtpl-navigation__inner .j-nav-level-0 a:active,
.jtpl-navigation__inner .j-nav-level-0 a:focus, .jtpl-navigation__inner .j-nav-level-0 a:hover,
.jtpl-navigation__inner .j-nav-current>a:link, .jtpl-navigation__inner .j-nav-current>a:visited,
.jtpl-navigation__inner .j-nav-parent>a:link,
.jtpl-navigation__inner .j-nav-parent>a:visited,
.jtpl-mobile-navigation__inner .j-nav-current>a:link,
.jtpl-mobile-navigation__inner .j-nav-current>a:visited{
background:transparent;
font-weight:400;
color:#999;
}
.jtpl-navigation__inner .j-nav-level-1::before {
left: 50%;
margin-left: 0px;
border-left: none;
border-top: none;
opacity:0;
}
.jtpl-breadcrumb {
margin: 0 0 10px;
}
/*]]>*/
</style>
5. Upgrade
6. Support
Support is available only for 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
Leonhard Fuß (Friday, 01 June 2018 14:49)
Hello,
How can I use the shortcodes for my website with the matrix theme?
I don’t really know where to install.
Greetings
Leo
Serhiy (Friday, 01 June 2018 16:09)
@Leo you don't need to use zodiac with Matrix themes as all custom widgets are already included in default Matrix theme.
The framework can be used only in standard Jimdo templates
dbachmann@onvima.ch (Thursday, 25 October 2018 20:00)
Hi
Why do you use a CSS class <h1> for your brand "Zodiac Framework". With this setup on every site of my client's website occurs two H1. This is very suboptimal regarding SEO. Is there a way to change it to <h2> or delete it?
Thanks for your response.
Dominique
<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>
Serhiy (Thursday, 25 October 2018 20:10)
@Dominique it's not important. However, you can change h1 tag for any other, span or simply remove it
Chris (Thursday, 12 September 2019 09:41)
Hey Serhiy,
just a quick question: I purchased the zodiac pro version. But when I click 'play of columns' it just says "Oops! page not found". Probably just a broken link. Maybe you could have a look at this?
Thank you!
Chris
Serhiy (Thursday, 12 September 2019 13:58)
@Chris this is a page with free version and the link is correct.
I fixed the url in Pro version, please used the updated menu
maurizio febo (Thursday, 06 February 2020 17:52)
Hello, the zodiac framework menu has not been working for a few days. The head settings are ok but the zodiac menu widget does not appear. Can you help me? Thank you
Serhiy (Thursday, 06 February 2020 17:54)
@Maurizio please use the correct file url from documentation.
please no multiply email! You received my email from support page. Thank you.