Design Kit

Easily build templates for the Jimdo CMS.

Download the Google Chrome extension Install the bookmarklet

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:


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:


Special navigation options

You can add some options to the navigation to have more options to control the bar:

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.

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.

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; }

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.

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.

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.

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.

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.

For a lot of modules, Jimdo provides general styles to keep tag. These tags are usable: