Theme development

Overview

With our powerful theme editor you will be able to customize any aspect of a theme by editing code for templates, stylesheets, and scripts as well as uploading images and fonts.

A blog can have any number of themes, and each theme can have multiple versions, with one active version at any time. This is useful for example when you want to work on a theme but without affecting what your visitors see until you are happy with your changes and are ready to activate the new version of the theme.

When a blog is created, a default theme is created automatically with the some templates, styles and scripts. This theme can be used as is or serve as a scaffold if you want to customize it or create more complex themes.

There are 5 simple themes currently (I'll add more soon), but DynaBlogger has a built in theme editor with which you can edit templates and assets to make your site look exactly as you like, without any restrictions.

There are various types of assets in each theme, including layouts, partials, stylesheets, scripts, images and fonts. Layouts, partials, stylesheets and scripts are also versioned, so you can easily revert to a previous version of the code at any time, if needed.

Theme development requires some familiarity with HTML and CSS (and depending on the website, JavaScript), so we are planning to add more ready-to-use themes in the near future. However if you are familiar with the basics, you will be able customize themes to your liking easily.

Layouts, partials, stylesheets and scripts are processed with Liquid, a powerful but simple markup language that allows you to enhance the HTML with conditionals, loops and more, and inject data relevant to the current page, be it the homepage, an article, or other kind of page. Liquid is very easy to use and it only takes a few minutes to learn the basics.

Layouts and partials

There are two types of templates that you can use in your themes: layouts and partials. Both are basically HTML processed with Liquid; layouts are the main templates that give structure to a page, and can include one or more partials; partials are templates that can be shared by multiple layouts or nested in other partials to avoid duplication of code and make pages look consistently. For example, things like sidebars, headers and footers could be partials because they are typically shared by multiple pages. 

All templates must have the .liquid extension in the filename, and filenames must start with an underscore for partials, to tell them apart from layouts.

In the blog settings you can set the default layouts for the various page types, but you can also override this setting for each post or page. This means that for a specific page or post to look different from the others, all you need to do is create a new layout and then select that layout in the page or post's settings (which you can find in the sliding panel when you are editing the page or post).

Stylesheets and scripts

You can style your site with CSS, and Sass syntax is supported; you can even import one .scss file into another using the @import directive. Like layouts and partials, stylesheets are preprocessed with Liquid, allowing you to insert URLs for images or fonts in the code dynamically.

We provide a base.scss stylesheet that removes browser-specific styling (using normalize.css) to allow more consistent look across different browsers. This stylesheets also includes all the styles necessary to make your content look on the public site identical to how it looks in the editor.

You can also add JavaScript files (preprocessed with Liquid) to add dynamic behavior to your pages.

Syntax highlighting

If you build a technical blog or anyway need to insert code snippets into your articles, we recommend highlight.js for syntax highlighting because it works nicely out of the box with the code snippets you can add with our editor. highlight.js is already configured in the available themes.

Images and fonts

It is possible to add images (for example for backgrounds, logos, etc) and fonts to further customize the look of your website. Images with resolution higher than 3840x3840 pixels are automatically resized to that resolution for performance reasons (images that are too big can slow down your website).