Developing a template
You can develop templates within any environment of your choice. Most of the work will be done within your favorite text editor, just as you'd develop a static HTML website.
The folder structure is also up to you – just make sure the template's files are linked correctly. Of course, a clean folder structure will help you keep the overview.
General structure of a template
Your template basically needs two files: An index.html and a style.css (or any other name for a CSS file). You can structure your HTML like a simple static website. The content parts will be exchanged with the placeholders so what you'll write here will be the "skeleton" of your template.
Going from there, you can add images and additional CSS files as variations (see below).
Placeholders within your template
To enable users to place content into your template, you can define various placeholders. The options are:
- Content –
<var>content</var>– the content area. This is where the main content of every subpage will be placed. This placeholder can be used once within every template. - Sidebar –
<var>sidebar</var>– the sidebar. This content will be permanent across all subpages. If you don't explicitly place the shoppingcart somewhere else in your template, it will appear here as well. This placeholder can be used once within every template. - Navigation –
<var data-level="1">navigation</var>– the navigation . You can split it into a main and a subnavigation, use it as a breadcrumb menu or create the output for a dropdown menu. This placeholder can be used multiple times within a template. - Dropdown navigation –
<var data-level="1:2:3" data-expand="true">navigation</var> - Breadcrumb navigation –
<var data-level="1:2:3" data-variant="breadcrumb">navigation</var> - Subnavigation –
<var data-level="2:3">navigation</var> - Logo –
<var max-height="300">logo</var>– this creates a logo area. You should provide a maximum height to avoid logos being too high, possibly crashing the layout. Users will be able to upload any image in this area. This will be permanent across all subpages. - Title –
<var>title</var>– this creates a title area. Users can enter and adjust a website's title here. This will be permanent across all subpages. - Footer –
<var>footer</var>– The footer contains links to the imprint of a website (legally mandatory in some countries), the sitemap, a login link and – especially important for online shops – some fine print for shop related legal issues. - Shoppingcart –
<var>shoppingcart</var>– exactly what you'd expect: The shoppingcart. As soon as a user puts anything into the shoppingcart, it will appear.
Variations
Variations are separate CSS files linked from the head of your HTML document. They introduce a different set of styles for a template (think colors, fonts, content arrangement).
These stylesheets overwrite settings in the default style.css. They can be switched on and off via the Design Options panel.
Variation example
<link rel="stylesheet-variation" href="css/variation-blue.css" data-name="Blue steel" data-icon="#79BACC" />
The data-name is the variation's name which is displayed within our system later on. The data-icon is used to represent the variation's main (or striking accent) color for the template selection in the mobile app.
Adding customization options for users
You can add the ability to change certain parts of your template simply by adding CSS classes. These are:
.content-options– adds the ability to style headlines, text, background color etc. for the content area..content-options-box– if you want to separate the background color settings and the ability to align the content (for full width colored background in addition to.layout-alignment), use this class for the outer container to make the background color styleable within this container..content-options-inner– Works with the above described.content-options-box, adds all other options for the content area except the background color option..sidebar-options– adds the ability to style headlines, text, background color etc. for the sidebar area..sidebar-options-box– works exactly like.content-options-boxbut for the sidebar..sidebar-options-inner– works exactly like.content-options-innerbut for the sidebar..navigation-colors– adds the ability to style the navigation – fonts, links, highlighting, background color..subnavigation-colors– adds the ability to style a subnavigation – fonts, links, highlighting, background color..breadcrumb-options– adds the ability to style the breadcrumb menu if you use one – fonts, links, highlighting, background color..footer-options– adds the ability to style the footer of the website..layout-alignment– adds the ability to align the layout to the left, center and right. It's also possible to add a padding here for finer placement of the whole layout..border-options– adds the ability to style a border-color to any kind of container. Only the color is changeable, all other configurations are part of the template. Note: You can use the class more then one time, but every border will have the same color..flex-background-options– adds the ability to style a background-color to any kind of container. Note: You can use the class more then one time, but every container will have the same background-color.
Special navigation options
You can add some options to the navigation to have more options to control the bar:
.navigation-alignment– adds the ability to control the horizontal alignment of the navigation. Possible settings for the customer are: left, center, right.
The CMS will add text-align: left | center | right to control the alignment.
Note: To use this option add this class in a full-width wrapper.
.navigation-vertical-alignment– adds the ability to control the alignment in vertical position. Possible settings for the customer are: top, center, bottom. This option is useful if the navigation bar is next to a logo or a title and should align dependent on this element.
Example
To use this option add this class to a container which uses the CSS display: flex; method.
HTML:
<section class="navigation-colors">
<div class="navigation-vertical-alignment">
<header class="logo-wrapper">
<var max-height="200">logo</var>
</header>
<nav class="navigation-wrapper">
<var data-level="1">navigation</var>
</nav>
</div>
</section>
Sass:
``` .navigation-vertical-alignment display: flex vertical-align: middle align-items: center
.ie .navigation-vertical-alignment display: table
.logo-wrapper vertical-align: inherit display: table-cell
.navigation-wrapper vertical-align: inherit display: table-cell ```
The CMS will control align-items: flex-start | center | flex-end and vertical-align: top | middle | bottom.
Notes: vertical-align is a hack for IE and only used in old browsers. All modern browser will use display flex. The vertical-align should inherit to the element they needed (like in the example). The Jimdo system automatically add the class ie to the body tag.
.after-background-color- adds the possibility to work with data attributes and create CSS3 transition effects in the navigation.
The Jimdo system provide a data attribute to the link tag to use the text in pseudo-classes. Use the data attribute in this way:
a:before {
content: attr(data-link-title);
}
The Jimdo system adds the background color to the :before class and the highlighted background color to the :after class.
li a:before {
background-color: @nav-link-background-color;
}
li a:after {
background-color: @nav-link-hi-background-color;
}
.after-font-color- the same as.after-background-color, but for the font color.
The Jimdo system provide a data attribute to the link tag to use the text in pseudo-classes. Use the data attribute in this way:
a:before {
content: attr(data-link-title);
}
The Jimdo system adds the font color to the :before class and the highlighted font color to the :after class.
li a:before {
color: @nav-text-color;
}
li a:after {
color: @nav-text-hi-color;
}
Meta tags
Besides the variations you can add, there are three meta tags usable in every template to add functionality/data.
- Template version –
<meta name="jimdo.version" content="1.0.0">
To determine which version of a template is online, we use semantic versioning. All updates on a patch level will take place without requiring any action by the user. Major and minor updates require the users to update the template by themselves.
- Template name –
<meta name="devkit.template-name" content="Madrid" />
Put the template's name in here to enhance your upload/update process. You don't need to search all your uploaded templates to determine the right template with this tag. It's optional and a great help when working with several templates.
- General template color –
<meta name="jimdo.color" content="#0099ee">
Variations get their main color defined within link tag anyway. For the basic style you need to define this main color as well. We're using this color e.g. in the iPhone app's template selection to give the user more guidance.
- Own background settings –
<meta name="jimdo.ownbg.allowed" content="yes">
Allow the user to adjust the background. You can set this to "yes" or "no", obviously. Depending on this, the user will be able to add a full width background image/video etc. to his website when using your template. For some templates, that's a great additional setting, for some it doesn't fit. You decide.
- Disable Jimdo styles –
<meta name="jimdo.styles.disabled" content="m-product" />
For a lot of modules, Jimdo provides general styles to keep tag. These tags are usable:
m-blogSelectionm-catalogm-commentm-downloadDocumentm-emotionheaderm-externalSourcem-facebookm-flashm-flickrm-formm-formnewm-gallerym-googlemapsm-googleplusm-guestbookm-headerm-hgridm-hrm-htmlCodem-imageSubtitlem-jimdom-newsletterboxm-productm-profilem-promotionm-rssm-sharebuttonsm-shoppingcartm-spacingm-tablem-textm-textWithImagem-twitterm-videofooter