welcome: please sign in
Page Locked

HelpOnThemes

HelpContents > HelpForAdministrators > HelpOnConfiguration > HelpOnThemes

MoinMoin has a theme plugin system that makes it easy to change the look and feel without touching the core code. As a user you can choose between different themes that are pre-installed1 As a user you may be able to change the theme you can view by going to the user preferences (it does not work if the wiki administrator has forced a specific theme, disabling the ability to change the theme).

Contents

  1. Installing Themes
  2. Customize Themes
  3. Modify wiki configuration
  4. Make a new Theme

1. Installing Themes

You can find additional themes if you visit ThemeMarket and download the archives there. Please make sure that the theme you choose is compatible with your version of MoinMoin!

You can not just copy the whole directory to a themes directory. That will not work. To install a new theme follow the instructions by the theme author. Generally you have two different locations:

  1. The directory where all themes reside

    • Unpack the archive and put the theme directory here (containing two directories: css/ and img/).

  2. The data/plugin/theme directory

    • move the theme script here (that has the same name as the theme but with a .py ending).

Your theme should be available now. Maybe you have to relogin or clear the cache to see it. For configuration options please go to HelpOnConfiguration.

2. Customize Themes

You can customize the pre-installed theme but it is much better to start with a copy. To do this make the following steps (we take theme modern as an example):

  1. Make a copy of the 'modern' theme in the themes directory and call it make 'mytheme'

  2. Copy the script of this theme MoinMoin/theme/modern.py' to data/plugins/theme/mytheme.py'

  3. Edit the file 'mytheme.py' and change at least the variable name = "modern" to {name ="mytheme"

  4. Then you should be able to see your new theme. In a selfrunning MoinMoin you might need to restart the server.

  5. After that start editing the files in the themes directory.

Where the theme directory is located depends on the installation of the wiki (see HelpOnInstalling for details).

The best way to change the visual appearance of your wiki site is by inherting the default MoinMoin styles and only changing those things you want to adapt to your likings. This avoids the work involved in copying new styles added during development to your own stylesheets. To do this, we use the CSS @import mechanism like this: 

@import url("/moin_static170/modern/css/common.css");

h1,h2,h3,h4,h5 {
    background-color: #88CCFF;
}

In the first line, we import the default common styles as distributed with MoinMoin. You may have to change the URL to fit your system setup and/or MoinMoin version.

In the following lines, we change the background color of headlines. And that's it.

For more see the css-discuss wiki.

For a very clever idea to make CSS wiki editable, see plain.css.

3. Modify wiki configuration

page_footer1

""

Custom HTML markup sent before the system footer.

page_footer2

""

Custom HTML markup sent after the system footer.

page_header1

""

Custom HTML markup sent before the system header / title area but after the body tag.

page_header2

""

Custom HTML markup sent after the system header / title area (and body tag).

stylesheets

[(media, csshref), ...]

List of tuples (media, csshref) to insert after theme css, before user css.

html_head

""

Additional <HEAD> tags for all pages

html_head_posts

robots: noindex,nofollow

Additional <HEAD> tags for POST requests

html_head_index

robots: index,follow

Additional <HEAD> tags for some few index pages

html_head_normal

robots: index,nofollow

Additional <HEAD> tags for most normal pages

html_head_queries

robots: noindex,nofollow

Additional <HEAD> tags for requests with query strings, like actions

You can customize your wiki by modifying the wiki configuration as follows:

  1. head

    • config.html_head is added into the <head> element for all pages, while

  2. body

    • you can use some html fragments to customize moin's output (we are referring to classic theme, others could differ) - here is the sequence how stuff is output:

    • header:
      • config.page_header1
      • config.logo_string - use this to modify the logo (usually at top left)
      • username, title
      • iconbar
      • config.navi_bar - is a list of page names that are added to the title area, if None, add no navigation bar.
      • trail
      • config.page_header2
      • msg
    • wiki page
    • footer:
      • config.page_credits
      • config.page_footer1

      • EditText, search forms, actions

      • config.page_footer2
  3. as a wiki user, you can override theme CSS settings by putting your own user CSS URL into your user preferences - this CSS is loaded after the theme CSS, so you can override all you want changed. Your CSS file must be in UTF-8 encoding (ASCII is OK, too, as it is a subset of UTF-8).

page_header1, page_header2, page_footer1 and page_footer2 can now be callables and will be called with the "request" object as a single argument (note that you should accept any keyword arguments in order to be compatible to future changes).

4. Make a new Theme

If you wish you can also create a new theme. The best way is to copy an existing theme like modern. You will also have to rename the theme script and change the variable name inside this script. If you are a Python programmer you can also start writing a new user interface by writing a new theme script for your theme. When you upgrade MoinMoin, your own themes are not touched - it will work with the new version, or needs only small changes due to theme API changes. (For more see also MoinDev/ThemeDevelopment)

  1. On a standard MoinMoin installation these are "classic", "modern" and "rightsidebar" (1)