Theme development

Themes enable us to switch the layout of a wiki. If you want to build your own themes you should at least know something about Cascading_Style_Sheets (CSS). Especially important for themes is the understanding of the box model.

Core Goals

Contents

  1. Theme development
    1. Core Goals
    2. Theme Components
      1. Stylesheets
      2. Images
      3. Python module
    3. CSS tips
    4. Sharing your theme
    5. Updating a theme
    6. Testing
    7. Proposals
      1. Icon sets
      2. NewThemeStructure
      3. Theme packages
      4. Related Bugs
      5. Related Issues
    8. Recommended Reading
    9. Discussion
    10. Related pages

Theme Components

How are themes built in detail?

A theme "THEMENAME" is made of these components:

Stylesheets

All current themes are heavily based on CSS. So for easy changes (like changing colours or fonts, moving around stuff), you maybe only need to change the CSS.

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.

Python module

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). The theme system avoids using the data dictionary when possible, and instead calls different MoinMoin parts to get the needed data.

When you do a new theme, try to start with a clone of an uptodate theme (older themes might not work well!), then try to edit the stylesheets to get what you want. Only if you can't reach your goal using CSS only, override some functions in your theme code.

All themes are sub classes of MoinMoin.theme.ThemeBase which define the primitive user interface elements, like logo, username, title, searchform, editbar, actions menu etc. You should reuse these parts unless you need to change their content or create new element that you can not build from existing parts. The theme API is not stable yet, and might change in the future.

CSS tips

Sharing your 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>-<OPTIONALVERSION>-moin<VV>.tar.gz (or .zip), containing:
<THEMENAME>/<THEMENAME>.py
<THEMENAME>/img/*.png
<THEMENAME>/css/*.css

Please for VV give the latest version of moin your theme works with (e.g. ...-moin18 if it works with moin 1.8.

Updating a theme

If you make an old theme work with a newer moin version, please don't use patches or verbose instructions like "fix this here, that there...", but simply repackage (see section above) and upload it the the theme's wiki page.

Testing

We should test each major changes on the themes on different browsers extensively. Suggested testing:

Proposals

Icon sets

As KDE and GNOME have full icon sets I had the idea how to combine them. It should be easy to just drop soemthing like the new Tango theme or others from art.gnome.org into the right place. I also could think of a mechanism where we can just use preinstalled icon themes by just making "Alias /icons /usr/share/icons/". We then could switch themes by naming the icon theme in the moinconfig.py. As these icon sets are highly standardised this should be nice. The themes that are used with them should use standard pixel sizes like 22x22 or 24x24. -- ThiloPfennig 2005-12-07 16:46:58

There are some icons for your themes available at ThemeMarket/ThemeResources.

NewThemeStructure

The whole ideas is to get more flexibility and ease in style administration and development. So that people will not have to copy all commons styles and images but instead import them and then overwrite values. this makes theme packages smaller and an image only has to be installed once. There is also probably no need for a stylesheet for printing ('print.css) and projection (projection.css`) for every theme.

The paths for the stylesheets are created by the Python code in MoinMoin/theme/__init__.py. How should one set a predefined default location that is different from the base directory of the theme? I would say we should predefine the path under common/. One problem is that we should want to keep a compatibility as good as we can. So the logic maybe should be that a theme has to contain a switch which makes clear that this is a new style theme. Maybe we could introduce a simple version number for the base theme which relates to for what MoinMoin version a theme was written for. This would also allow MoinMoin to auto check and give feedback. So if there is a incompatibility MoinMoin would not have to check the code itself. So like this: 

    version='1.6.0'

Theme packages

The idea is to make installation more easy, like page SystemPagesSetup it should be easy to

  1. download a theme package

  2. attach the theme package to a page like SystemThemesSetup

  3. have exactly the same install button procedure as in SystemPagesSetup

  4. The data than gets extracted to the right directories.

Maybe one should also be able to disable/enable a theme?

Discussion

Those pages should be reviewed, updated, cleaned up, merged, ...

MoinMoin: MoinDev/ThemeDevelopment (last edited 2011-04-26 15:03:01 by DavidStarrSpaceCowboy)