¿Qué? ¿Te has decidido a echarle valor y a atreverte a crear tu propio tema para Moodle 2?
¡Ojú!… ¡Pues prepárate! 🙂
¡Nada! No te asustes, aquí tienes unos consejillos varios que he ido rescatando y espero te sean de gran ayuda.

Si vas a empezar de cero es aconsejable que al menos partas de un tema ya existente. Para ello, puedes seguir los siguientes pasos:

1. Crea una copia del tema original y llama la carpeta con un nuevo nombre. Por ejemplo : “nuevo_tema”
2. Abre el archivo nuevo_tema/config.php
3. Cambia $THEME->name = ‘viejo_tema’; por $THEME->name = ‘nuevo_tema’;
4. Abre ahora el nuevo_tema/lang/en/theme_viejo_tema.php
5. Y guardalo como nuevo_tema/lang/en/theme_nuevo_tema.php
6. Por último, cambia $string[‘pluginname’] = ‘viejo_tema’; por $string[‘pluginname’] = ‘nuevo_tema’;

Tras estos cambios de configuración en los archivos, ya puedes ponerte manos a la obra.

Un momento… ¿Recuerdas el eterno problema de la caché de moodle cuando realizabas cambios en su CSS y no se actualizaban inmediatamente? Pues todo esto se acabó. Los desarrolladores de Moodle 2 no han olvidado este sufrimiento y han añadido una nueva funcionalidad, el llamado theme designer mode. Todo un detalle. Puedes activar este modo diseñador en Administración del sitio/Apariencia/Temas/Ajustes de temas/ activando la casilla de “Modo de diseño de temas”.

Por último, recuerda armarte de buenas herramientas:

• Herramienta de desarrollador para el navegador. Desde siempre he usado Firebug, el famoso complemento para Mozilla, pero con la llegada de los nuevos navegadores esta herramienta suele estar integrada por defecto. Por ejemplo en el Explorer, desde el IE8, y en el Chrome, que es la que más me gusta. Sólo tienes que pulsar F12 para ponerla en marcha.
• Editor CSS como TopStyle o simplemente DreamWeaver. Yo concretamente trabajo directamente con DW que me aporta todo lo que necesito.
• Editor gráfico como Phostoshop, Firework o Gimp. Cualquiera de ellos te servirá para modificar banners, gradientes, iconos, imágenes,…

Y ahora sí… manos a la obra…

1. Localiza las partes del moodle que quieras modificar. Abre la herramienta de desarrollo de tu navegador y usa la función inspeccionar (la lupa en Chrome) Por ejemplo, “div#page_footer”.
2. Abre las hojas de estilo en el editor CSS. Las encontrarás normalmente en el interior de la carpeta /style.
3. Busca el elemento que quieras modificar. Es hora del famoso CTRL+F o CTRL+B (depende del idioma) para abrir la ventana de búsqueda que te llevará a tu objetivo.
4. Modifica el CSS a tu antojo. Cambia los colores de las fuentes, añade backgrounds, cambia tamaños, proporciones,…También puedes buscar las imágenes o iconos para sustituirlos directamente, si es así, es bueno que sepas que como novedad en Moodle 2 ya no existen extensiones definidas .GIF .JPG .PNG. Así que cuando llamemos a una imagen, por ejemplo: cabecera.jpg lo haremos así {background-image:url([[pix:theme|cabecera]]);} Y tendrás que guardarla en la carpeta /pix.

Ofú… no encuentras un elemento en tu tema. Ayss… recuerda que hay estilos que están definidos por defecto en el tema BASE y no es aconsejable toquetearlo, así que lo mejor será redefinirlos. No olvides respetar el caracter hereditario de los CSS.

Bueno, espero que estos consejillos puedan ser útiles, si sabes algunos más… ya sabes… a compartir 😉