Cómo cambiar el tema de MoinMoin

Una vez que tenemos el diseño decidido ha llegado el momento de aplicarlo a MoinMoin, que está basado totalmente en hojas de estilo. De hecho si vemos el código HTML de cualquier página página de MoinMoin con el tema "modern" seleccionado:

<link rel="stylesheet" type="text/css" charset="utf-8" media="all" href="/wiki/modern/css/common.css">
<link rel="stylesheet" type="text/css" charset="utf-8" media="screen" href="/wiki/modern/css/screen.css">
<link rel="stylesheet" type="text/css" charset="utf-8" media="print" href="/wiki/modern/css/print.css">
<link rel="stylesheet" type="text/css" charset="utf-8" media="projection" href="/wiki/modern/css/projection.css">

Vemos que en estas cuatro hojas de estilo se resume el diseño del sitio. Nuestro objetivo es modificar las hojas de estilo. El cambio de colores será sencillo, pero es interesante ver como lograr el cambio en la maquetación de la página. Para ello debemos de analizar el tema "rightsidebar" que es el que tiene la maquetación similar a la que buscamos. Los temas los tenemos en:

acs@macito:/usr/share/moin/htdocs$ pwd
/usr/share/moin/htdocs
acs@macito:/usr/share/moin/htdocs$ ls
applets  classic  favicon.ico  index.html  modern  rightsidebar  robots.txt
acs@macito:/usr/share/moin/htdocs$ tree rightsidebar/
rightsidebar/
|-- css
|   |-- common.css
|   |-- print.css
|   |-- projection.css
|   `-- screen.css
`-- img
    |-- PythonPowered.png
    |-- alert.png
...
    `-- tongue.png

La estructura de un tema es sencilla. Las cuatro hojas de estilo básicas y todas las imágenes necesarias para la hoja de estilo y moinmoin.

Comparando dos temas vemos que la plantilla de "print.css" se comparte pero las demás están modificadas:

acs@macito:/usr/share/moin/htdocs$ ls -l rightsidebar/css/ modern/css/
modern/css/:
total 24
-rw-r--r--  1 root root 4444 2005-01-09 19:48 common.css
-rw-r--r--  1 root root  717 2005-01-09 19:48 print.css
-rw-r--r--  1 root root  477 2005-01-09 19:48 projection.css
-rw-r--r--  1 root root 4786 2005-02-15 10:06 screen.css

rightsidebar/css/:
total 20
-rw-r--r--  1 root root 4105 2005-01-09 19:48 common.css
-rw-r--r--  1 root root  717 2005-01-09 19:48 print.css
-rw-r--r--  1 root root  482 2005-01-09 19:48 projection.css
-rw-r--r--  1 root root 3651 2005-02-15 10:06 screen.css

De las cuatro plantillas la que contiene los temas de maquetación, common.css es donde tendremos que cambiar los colores y donde se especifica también el tipo de letra y muchos otros detalles visuales, pero no se especifica la maquetación. Sin duda "screen.css" parece que es la hoja de estilo con esa información.

Efectivamente. Veamos por ejemplo como se pone la caja de búsquedas y uno de los paneles a la derecha utilizando "float: right":

acs@macito:/usr/share/moin/htdocs/rightsidebar/css$ cat screen.css
/*  screen.css - MoinMoin Default Styles

Copyright (c) 2001, 2002, 2003 by Juergen Hermann
*/

/* content styles */

body {
        margin:0;
        padding:0;
        border:0;
}
...
#searchform {
    float: right;
    margin: 5px 10px 0 10px;
    padding: 0;
    white-space: nowrap;
}
...
.sidepanel {
        margin: 0 0 10px 0;
        float: right;
        width: 200px;
        background: tan;
        border: 1px solid #9c9c9c;
        border-bottom: 2px solid #9c9c9c;
}

Partimos de este diseño pues y lo vamos adaptando al de http://acsblog.es para crear el NuevoTema de Moin acsblog.