Customising themes

You can customise the visual design of your website. See demo.

Themes

Themes define the visual design of your website. 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.

CSS

To adjust a theme you can use CSS. This allows you to change colors, font and the visual design of your website. You can either change the available CSS file or create a new theme, for example Theme: custom.

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

html, body, div, form, pre, span, tr, th, td, img { margin:0; padding:0; border:0; vertical-align:baseline; }
body { background-color:#fff; color:#717171; margin:1em; }
h1, h2, h3, h4, h5, h6 { color:#07d; font-weight:normal; }
a { color:#07d; text-decoration:none; }
a:hover { color:#07d; text-decoration:underline; }
.header .sitename a { color:#000; text-decoration:none; }
.navigation a { color:#07d; padding-right:0.3em; }
.navigation ul { padding:0; list-style:none; }
.navigation li { display:inline; }

Here's the same CSS file with dark background color:

html, body, div, form, pre, span, tr, th, td, img { margin:0; padding:0; border:0; vertical-align:baseline; }
body { background-color:#000; color:#ddd; margin:1em; }
h1, h2, h3, h4, h5, h6 { color:#fff; font-weight:normal; }
a { color:#29f; text-decoration:none; }
a:hover { color:#29f; text-decoration:underline; }
.header .sitename a { color:#fff; text-decoration:none; }
.navigation a { color:#29f; padding-right:0.3em; }
.navigation ul { padding:0; list-style:none; }
.navigation li { display:inline; }

JavaScript

To extend a theme you can use JavaScript. This allows you to create websites with dynamic features. You can put 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
}
if(window.addEventListener) {
    window.addEventListener("load", ready, false);
} else {
    window.attachEvent("onload", ready);
}

HTML

To create your own themes it's good to know the HTML layout of a page. There's a default HTML layout that's used on most web pages, blogs and wikis. This is just a suggestion, you can use any layout you like.

Here's the default HTML layout:

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

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.

This is how the default HTML layout looks in a web browser:

Screenshot

Next: Customising templates →