Customising themes

You can customise the appearance of your website. See demo.


Themes define the appearance of your website and there are themes to download. The default theme is defined in the system settings. A different theme can be defined in the settings at the top of each page, for example Theme: flatsite.

Every website has a small icon, sometimes called favicon. The web browser displays this icon for example in address bar, in bookmarks or on the desktop. To change the default icon overwrite file system/themes/assets/icon.png.


To understand themes it's good to know the HTML layout of a page. There's a default HTML layout that's used by most web pages, blogs and wikis. This is just a suggestion so that everything fits together, you can use any layout you like.

Here's the default HTML layout:

<!DOCTYPE html>
    <div class="page template-default">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>

The first <div> element contains useful class information, for example template-default. A blog page uses template-blog, a wiki page template-wiki and a sidebar with-sidebar. This allows you to adjust themes to different templates.


To adjust themes you can use CSS. This allows you to change colors, font and the appearance of your website. The easiest way is to change the available CSS files. You can also create a new file, for example Theme: custom.

Here's an example CSS file system/themes/assets/custom.css:

.page {
    background-color: #fc4;
    color: #fff;


To adjust themes even more you can use JavaScript. This allows you to create websites with dynamic features. You can save JavaScript into a file which has a similar name as the CSS file. Then it will be automatically included.

Here's an example JS file system/themes/assets/custom.js:

var ready = function() {
    console.log("Hello world");
    // Add more JavaScript code here
window.addEventListener("load", ready, false);

Next: Customising templates →