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.
usability all changes in themes should affect usability
browser independence / standard compliance: There should not be styles just for one browser. At least all major browser should be able to display the content correctly
How are themes built in detail?
A theme "THEMENAME" is made of these components:
set of CSS stylesheets, in [theme_directory]/THEMENAME/css/
Collection of images in [theme_directory]/THEMENAME/img/
a Python module in MoinMoin/theme/THEMENAME.py or in your wiki data/plugin/theme/THEMENAME.py
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.
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.
The icon dict to update, is the code in $PREFIX/lib/pythonx.x/site-packages/MoinMoin/theme/__init__.py (where x.x is your python version)? ThemeMarket/ThemeResources
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.
- If you work with relative values and space (margin, padding) try to use one unit for all (so either px, em or something else)
- Values without unit like "0" are not correct and can be ignored by some user agents (browsers)
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.
We should test each major changes on the themes on different browsers extensively. Suggested testing:
- Firefox (2.x and 3.x)
- latest Konqueror
- latest Safari
Microsoft Internet Explorer (8, 7 and maybe 6)
Opera 8.5x & 9
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
- Standard icons size are good, but one design can not work with many icons (you can mix what you like, but it will look horrible).
There are some icons for your themes available at ThemeMarket/ThemeResources.
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.
- /wiki/common/css/base.css - this is a real common CSS stylesheet
- /wiki/common/css/print.css - this is the central print style sheet.
/wiki/common/img/ A subdivided image directory in order to easily find what are smileys and what are not
- /wiki/common/img/smileys - all standard smileys go here
- /wiki/common/img/logos - all standard logos go here
- /wiki/common/img/misc - miscellaneous images like draft.png
- you only need to change one central stylesheet to effect all themes that import it
- one change in a central stylesheet can have negative effect on other themes.
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:
The idea is to make installation more easy, like page SystemPagesSetup it should be easy to
- download a theme package
attach the theme package to a page like SystemThemesSetup
have exactly the same install button procedure as in SystemPagesSetup
- The data than gets extracted to the right directories.
Maybe one should also be able to disable/enable a theme?
Images, Tables, and Mysterious Gaps - article about common problems with DOCTYPES and layout
CSS2 specification at W3C
We should define what DOCTYPE we want people to use. So this is related to themes as well as to plugins. I suggest we say at least HTML 4.01 transitional but better HTML 4.01 strict. This affects what attributes are valid and so on. -- ThiloPfennig 2006-12-08 18:55:55
Those pages should be reviewed, updated, cleaned up, merged, ...