Customize Your Theme

by pieterh on 09 Aug 2009 16:56

Wikidot offers different ways to write and manage custom themes. The simplest way is to open your site manager and create a custom theme, then apply that to your default category. But as part of the Iron Giant project to build template sites, we've developed an easier, better way. In this blog posting I'll explain how that works.

cap014.png

First, our requirements. While the site manager has a theme editor, we want to avoid using this because it has no history, it is clumsy, and it does not understand Ctrl-S. We want to hold the CSS in a wiki page where we can add comments and explanation. We want the theme to be active immediately, so we have a fast edit-improve-edit-improve cycle. And we want to use external themes but with easy customization.

Here is the design, them, inspired by a howto by meagain1

In your site manager, create a custom theme called "My theme" that inherits from Base and contains this code:

/*
   We do not use this custom theme editor.
   Custom themes are in the admin:themes page.
   See that page for examples and instructions.
  */
@import url(/admin:themes/code/1);
cap015.png

Now in Appearance / Themes, select the _default category and Choose a built-in theme, then choose My theme (custom).

When have done this, click on the site name (top left) to return to your start page. The site will have lost its theme and look like the Base theme. This is normal, don't panic.

Next, create a page called admin:themes with the custom CSS you need. Here, for example, we just ask to use the Silent Silver theme:

[[code type="css"]]
@import url(http://themes.wikidot.com/silent-silver/code/1);
[[/code]]

To customize the theme, we add CSS code after the @import. Here, for example, we take Fereal's Monobook theme and add some customizations:

[[code type="css"]]
@import url(http://themes.wikidot.com/monobook/code/1);

/* Show a logo for the wiki */
#header h1 a, #header h1 a:hover{
    background-image:url(/local--files/start/wiki-logo-150.png);
}

#container{
    background-image:url(http://monobook.wikidot.com/local--files/index/monobook-header.gif);
}
[[/code]]
cap016.png

Finally, most themes will work well for the admin pages as well as the rest of the site, and it is nice to have a consistent look and feel. In Appearance / Themes, select the admin category and choose Inherit from _default.

Then in Appearance / Navigation elements, choose the admin category, uncheck the No individual nav elements option, and delete the side-bar setting. Now the admin pages do not show a side bar. Some themes may force the main content margin, in which case you need to create a second custom theme ("My admin theme") with this additional CSS:

#main-content {
    margin-left: 0;
}

So, to conclude, I've explained a simple way of managing custom CSS themes as wiki pages on your site, with all the advantages that gives you. Revisions, history, notifications, comments. All the Iron Giant sites use this technique but it's easy to retrofit to your existing sites.

Here's an example of this technique in action, in the Iron Giant blog template.

Comments: 29

Add a New Comment
Footnotes
page revision: 10, last edited: 09 Aug 2009 23:15
Edit Tags Discuss (29) History Files Print Site tools + Options
Help  | Terms of Service  | Privacy  | Report a bug  | Flag as objectionable
Powered by Wikidot.com
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License