<?xml version="1.0" encoding="utf-8"?><!DOCTYPE article  PUBLIC '-//OASIS//DTD DocBook XML V4.4//EN'  'http://www.docbook.org/xml/4.4/docbookx.dtd'><article><articleinfo><title>HelpOnThemes</title></articleinfo><section><title>Themes</title><para><!--The macro TableOfContents doesn't work with the DocBook formatter.--> <ulink url="http://id3.org/HelpOnThemes/MoinMoin#">MoinMoin</ulink> 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-installed<footnote><para>On a standard !MoinMoin 1.9 installation these are &quot;classic&quot;, &quot;modern&quot;, &quot;modernized&quot;, &quot;modernized_cms&quot; and &quot;rightsidebar&quot; </para></footnote> 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). </para><section><title>Installing Themes</title><para>You can find additional themes if you visit <ulink url="http://moinmoin.wikiwikiweb.de/ThemeMarket#">ThemeMarket</ulink> and download the archives there. Please make sure that the theme you choose is compatible with your version of MoinMoin! </para><para>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: </para><orderedlist numeration="arabic"><listitem><para>The directory where all the static files of the themes reside </para><itemizedlist><listitem><para>Unpack the archive and put the theme directory here (containing two directories: <code>css/</code> and <code>img/</code>). </para></listitem></itemizedlist></listitem><listitem><para>The <code>data/plugin/theme</code> directory where theme code can reside </para><itemizedlist><listitem><para>move the theme script here (that has the same name as the theme but with a <code>.py</code> ending). </para></listitem></itemizedlist></listitem></orderedlist><para>Your theme should be available now. Maybe you have to relogin or clear the cache to see it. For configuration options please go to <ulink url="http://id3.org/HelpOnThemes/HelpOnConfiguration#">HelpOnConfiguration</ulink>.  </para></section><section><title>Customize Themes</title><para>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 <code>modern</code> as an example): </para><orderedlist numeration="arabic"><listitem><para>Make a copy of the 'modern' theme in the static files directory and call it 'mytheme'  </para></listitem><listitem><para>Copy the script of this theme <code>MoinMoin/theme/modern.py' to </code>data/plugins/theme/mytheme.py' </para></listitem><listitem><para>Edit the file 'mytheme.py' and change at least the variable <code>name = &quot;modern&quot;</code> to <code>{name =&quot;mytheme&quot;</code> </para></listitem><listitem><para>Then you should be able to see your new theme. If not, restart the web server. </para></listitem><listitem><para>After that start editing the files in the theme's static files directory. </para></listitem></orderedlist><para>Where the static files directory is located depends on the installation of the wiki: </para><itemizedlist><listitem><para>either your web server serves url_prefix_static, then consult it's configuration (usually an Alias will be there that maps the url_prefix_static URL to some filesystem directory) </para></listitem><listitem><para>or moin serves the url_prefix_static with its builtin static server - see the place where you create the WSGI application: </para><itemizedlist><listitem><para><code>shared=True</code> means it will serve the builtin static files from <code>MoinMoin/web/static/htdocs/</code> </para></listitem><listitem><para><code>shared=somepath</code> mean it will serve the static files from somepath </para></listitem></itemizedlist></listitem></itemizedlist><para>The best way to change the visual appearance of your wiki site is by inherting the default <ulink url="http://id3.org/HelpOnThemes/MoinMoin#">MoinMoin</ulink> 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 <code>@import</code>  mechanism like this: </para><programlisting format="linespecific" language="highlight" linenumbering="numbered" startinglinenumber="1"><![CDATA[@]]><token><![CDATA[import]]></token><![CDATA[ ]]><methodname><![CDATA[url]]></methodname><![CDATA[(]]><phrase><![CDATA["/moin_static190/modern/css/common.css"]]></phrase><![CDATA[);]]>

<methodname><![CDATA[h1]]></methodname><![CDATA[,]]><methodname><![CDATA[h2]]></methodname><![CDATA[,]]><methodname><![CDATA[h3]]></methodname><![CDATA[,]]><methodname><![CDATA[h4]]></methodname><![CDATA[,]]><methodname><![CDATA[h5]]></methodname><![CDATA[ {]]>
<![CDATA[    ]]><token><![CDATA[background-color]]></token><![CDATA[: #88CCFF;]]>
<![CDATA[}]]>
</programlisting><para>In the first line, we import the default common styles as distributed with <ulink url="http://id3.org/HelpOnThemes/MoinMoin#">MoinMoin</ulink>. You may have to change the URL to fit your system setup and/or <ulink url="http://id3.org/HelpOnThemes/MoinMoin#">MoinMoin</ulink> version. </para><para>In the following lines, we change the background color of headlines. And that's it. </para><para>For more see the <ulink url="http://css-discuss.incutio.com/">css-discuss</ulink> wiki. </para><para>For a very clever idea to make CSS <emphasis>wiki editable</emphasis>, see <ulink url="http://esw.w3.org/topic/plain.css">plain.css</ulink>. </para></section><section><title>Modify wiki configuration</title><informaltable><tgroup cols="3"><colspec colname="col_0"/><colspec colname="col_1"/><colspec colname="col_2"/><tbody><row rowsep="1"><entry colsep="1" rowsep="1"><para> <emphasis role="strong">Parameter</emphasis> </para></entry><entry colsep="1" rowsep="1"><para> <emphasis role="strong">Default value</emphasis>        </para></entry><entry colsep="1" rowsep="1"><para> <emphasis role="strong">Description</emphasis> </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>page_footer1</code>                        </para></entry><entry colsep="1" rowsep="1"><para> <code>&quot;&quot;</code>                       </para></entry><entry colsep="1" rowsep="1"><para> Custom HTML markup sent <emphasis>before</emphasis> the system footer. </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>page_footer2</code>                        </para></entry><entry colsep="1" rowsep="1"><para> <code>&quot;&quot;</code>                       </para></entry><entry colsep="1" rowsep="1"><para> Custom HTML markup sent <emphasis>after</emphasis> the system footer. </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>page_header1</code>                        </para></entry><entry colsep="1" rowsep="1"><para> <code>&quot;&quot;</code>                       </para></entry><entry colsep="1" rowsep="1"><para> Custom HTML markup sent <emphasis>before</emphasis> the system header / title area but <emphasis>after</emphasis> the body tag. </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>page_header2</code>                        </para></entry><entry colsep="1" rowsep="1"><para> <code>&quot;&quot;</code>                       </para></entry><entry colsep="1" rowsep="1"><para> Custom HTML markup sent <emphasis>after</emphasis> the system header / title area (and body tag). </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>stylesheets</code>                         </para></entry><entry colsep="1" rowsep="1"><para> <code>[(media, csshref), ...]</code>  </para></entry><entry colsep="1" rowsep="1"><para> List of tuples (media, csshref) to insert after theme css, before user css. </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>html_head</code>                           </para></entry><entry colsep="1" rowsep="1"><para> <code>&quot;&quot;</code>                       </para></entry><entry colsep="1" rowsep="1"><para> Additional &lt;HEAD&gt; tags for all pages </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>html_head_posts</code>                     </para></entry><entry colsep="1" rowsep="1"><para> <code>robots: noindex,nofollow</code> </para></entry><entry colsep="1" rowsep="1"><para> Additional &lt;HEAD&gt; tags for POST requests </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>html_head_index</code>                     </para></entry><entry colsep="1" rowsep="1"><para> <code>robots: index,follow</code>     </para></entry><entry colsep="1" rowsep="1"><para> Additional &lt;HEAD&gt; tags for some few index pages </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>html_head_normal</code>                    </para></entry><entry colsep="1" rowsep="1"><para> <code>robots: index,nofollow</code>   </para></entry><entry colsep="1" rowsep="1"><para> Additional &lt;HEAD&gt; tags for most normal pages </para></entry></row><row rowsep="1"><entry colsep="1" rowsep="1"><para> <code>html_head_queries</code>                   </para></entry><entry colsep="1" rowsep="1"><para> <code>robots: noindex,nofollow</code> </para></entry><entry colsep="1" rowsep="1"><para> Additional &lt;HEAD&gt; tags for requests with query strings, like actions </para></entry></row></tbody></tgroup></informaltable><para>You can customize your wiki by modifying the wiki configuration as follows: </para><orderedlist numeration="arabic"><listitem><para>head </para><itemizedlist><listitem><para><code>config.html_head</code> is added into the &lt;head&gt; element for <emphasis>all</emphasis> pages </para></listitem><listitem><para><code>config.html_head_index</code>, <code>config.html_head_normal</code>, <code>config.html_head_queries</code>, <code>config.html_head_posts</code> are added for different types of pages (see above) </para></listitem></itemizedlist></listitem><listitem><para>body </para><itemizedlist><listitem override="none"><para>you can use some html fragments to customize moin's output (we are referring to standard themes, others could differ) – here is the sequence how stuff is output: </para></listitem><listitem><para>header: </para><itemizedlist><listitem><para><code>config.page_header1</code> </para></listitem><listitem><para><code>config.logo_string</code> – use this to modify the logo (usually at top left) </para></listitem><listitem><para>search form </para></listitem><listitem><para>username (on side panel in <code>rightsidebar</code> theme), interwiki, title </para></listitem><listitem><para>trail </para></listitem><listitem><para>iconbar (used inly in <code>classic</code> theme) </para></listitem><listitem><para><code>config.navi_bar</code> – is a list of page names that are added to the title area, if None, add no navigation bar. In <code>rightsidebar</code> theme it is placed on side panel. </para></listitem><listitem><para>msg </para></listitem><listitem><para><code>config.page_header2</code> (in <code>rightsidebar</code> theme this markup is placed before side bar and msg string) </para></listitem></itemizedlist></listitem><listitem><para>wiki page </para></listitem><listitem><para>footer: </para><itemizedlist><listitem><para>Page information </para></listitem><listitem><para><code>config.page_footer1</code> </para></listitem><listitem><para>edit bar (on <code>rightsidebar</code> it is on side panel), search forms (only in <code>classic</code> theme), actions (only in <code>classic</code> theme) </para></listitem><listitem><para><code>config.credits</code> </para></listitem><listitem><para>version </para></listitem><listitem><para><code>config.page_footer2</code> </para></listitem></itemizedlist></listitem></itemizedlist></listitem><listitem><para>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). </para></listitem></orderedlist><para><code>page_header1</code>, <code>page_header2</code>, <code>page_footer1</code> and <code>page_footer2</code> can now be callables and will be called with the &quot;request&quot; object as a single argument (note that you should accept any keyword arguments in order to be compatible to future changes). </para></section><section><title>Make a new Theme</title><para>If you wish you can also create a new theme. The best way is to copy an existing theme like <code>modern</code>. You will also have to rename the theme script and change the variable <code>name</code> 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 <ulink url="http://id3.org/HelpOnThemes/MoinMoin#">MoinMoin</ulink>, 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 <ulink url="http://moinmoin.wikiwikiweb.de/MoinDev/ThemeDevelopment#">MoinDev/ThemeDevelopment</ulink>) </para></section></section></article>