Help On Themes - Wiki Linux-Québec

Themes

Moin Moin 1.2 has themes now, so it is easier now to influence the wiki's appearance without hacking all of the code. Theme support isn't complete yet, but covers the most important areas.

A theme is made of these components:

a code file doing HTML generation (see MoinMoin/theme/THEMENAME.py and also data/plugin/theme/THEMENAME.py for plugin themes)
CSS (wiki/htdocs/THEMENAME/css/*.css)
Images and Icons (wiki/htdocs/THEMENAME/img/*.png)

CSS

The 'classic' theme is heavily based on CSS. So for easy changes (like changing colours or fonts, moving around stuff), you maybe only need to change the CSS (like the starshine theme does to get dark).

Images

When you do a new theme, copy all images from classic to your img directory and then modify as needed. If you modify an image, do not forget to update the icon dict in the theme code - the image geometry is stored there for faster rendering.

Code

The theme code is called by moinmoin with (more or less) abstract data in a dictionary usually called d. The code then uses items in that dictionary to generate HTML (also heavily relying on CSS).

When you do a new theme, first empty derive from classic theme code (do it similar to starshine) and first try to use CSS to get what you want. Only if you can't reach your goal using CSS only, override some functions in your theme code (only the stuff that needs to behave different from your base theme (e.g. classic)).

Made a nice theme?

If you made a nice theme (of course adhering to HTML and CSS standards), package it like described below and put it onto ThemeMarket. Please put it under GPL license, if possible.

# <THEMENAME>-<VERSION>.tar.gz (or .zip), containing:
<THEMENAME>/<THEMENAME>.py
<THEMENAME>/img/*.png
<THEMENAME>/css/*.css

When you don't have to make a theme

head
- config.html_head is added into the <head> element for all pages, while
- config.html_head_queries is sent only for edit and action pages
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.header1
  - config.logo_string - use this to modify the logo (usually at top left)
  - username, title
  - iconbar
  - config.navibar - is a list of page names that are added to the title area, if None, add no navigation bar.
  - trail
  - config.header2
  - msg
- wiki page
- footer:
- - config.credits
  - config.footer1
  - EditText, search forms, actions
  - config.footer2
as a wiki user, you can override theme CSS settings by putting your own user CSS URL into User Preferences - this CSS is loaded after the theme CSS, so you can override all you want changed

header1, header2, footer1 and 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).