A ver si ahora que el Dataprius está más avanzado y que vamos teniendo algo más de tiempo voy colgando algún nuevo artí­culo de programación de Android o empiezo con una serie de artí­culos de .NET avanzado, como el buen uso de los Therads, de los que con Dataprius he aprendido mucho.

Hay que decir que hay que tener cierta destreza con los CSS, para aquellos que no sepan CSS les recomiendo este manual de CSS [1].

Básicamente, para empezar a manipular los ficheros header.html y footer.html para que vaya quedando el sitio web tal y como queremos, además deberemos y manipulando los estilos (styles_layout.css, styles_color.css y styles_fonts.css). Aquellos que tengan más experiencia con los CSS además deberán tocar los ficheros que tienen estilos especí­ficos para Internet Explorer y Mozilla (si no los modificáis, eliminad dichos ficheros, que sino es posible que lo que estéis programando no se vea luego reflejado).

Si desear poner la imágnes de las carpetas, expandir o recoger de forma personalizada, verás que hay una carpeta llamada pix. Deberás poner ahí­ todas las imágens personalizadas, para ello debes copiarte la carpeta pix del raíz de moodle (donde están las imágenes por defecto), cambiar las que quieras (con el mismo nombre) y luego ir al fichero config.php del tema y cambiar $THEME->custompix = false (ponerlo a true).

Bueno lo que queda es ir probando colores y mirando bien las cosas que vas modificando. Si tengo tiempo intentará hacer un pequeño esquema de los CSS, de manera que explique qué hay que cambiar para cada cosa, aunque la verdad está explicado en un inglés muy sencillo, y si no dominas inglés no creo que haya problemas en la traducción si utilizas Google Traductor.

Enlaces:

[1] Manual de CSS muy didáctico y con muchos ejemplos: http://www.librosweb.es/css/index.html. En esta web también puedes encontrar otros libros muy útiles de AJAX, XHTML, …

Referencia de funcines de Moodle: http://xref.moodle.org/nav.html?_functions/index.html

Hay que decir que en la Web de Moodle hay un directorio con muchos temas que pueden ser modificados libremente [1]. En esta serie de artí­culos vamos a ver como hacer un tema utilizando como base otro ya existente. Para ello lo que debemos hacer duplicar el tema `standard` y ponerle el nombre que deseemos, en mi caso será `plf`. Utilizamos el tema standard puesto que nos aseguraremos que va a funcionar correctamente, puesto que tendrá todos los ficheros necesarios del tema.

Dentro de la carpeta nos encontramos una serie de archivos:

• config.php: Fichero de configuración del tema.
• docstyles.php: Fichero encargado de cargar los CSS, este fichero también puede contener sintaxis CSS.
• favicon.ico: Icono que queremos que se vea en nuestro navegador. El que viene por defecto es el logotipo de Moodle. Si quieres crear un favicon a partir de una imagen te recomiendo que lo hagas desde Dynamic Drive [2].
• footer.html: Fichero que contiene la platilla html del pie del sitio web.
• gradient.jpg: Este fichero contiene el degradado del tema standar. En mi caso no lo voy a utilizar y lo borraré.
• header.html: Fichero que contiene la plantilla html de la cabecera del sitio web.
• meta.php: Fichero en el que se pueden insertar tags metas para al cabecera.
• README.html: Fichero de información del tema.
• rtl.css: Fichero para estilo cuando la dirección del texto es de derecha a izquierda.
• screenshot.jpg: Fichero con un pantallazo del tema (Este fichero se cambiará al final de terminar el tema).
• styles.php: Fichero de configuración de los estilos.
• styles_color.css: Fichero para poner los colores de los estilos.
• styles_fonts.css: Ficheros para poner las fuentes de los estilos.
• styles_ie6.css: Ficheros para las cosas especí­ficas de Internet Explorer 6.0.
• styles_ie7.css: Ficheros para las cosas especí­ficas de Internet Explorer 7.0.
• styles_layout.css: Fichero de definición de los estilos.
• styles_moz.css: Fichero para las cosas especí­ficas de Mozilla Fire Fox.

Manos a la obra

Lo perimero que tenemos que hacer es cambiar el fichero README.html, para poner el nombre de nuestro tema y la información que nos apetezca.

Lo segundo que haremos será modificar el favicon.ico (si es que querremos).

Bueno, ahora entramos en el Moodle y cambiamos el tema, para ello una vez que entramos como administrador de Moodle y nos dirigimos a Apariencia -> Temas -> Selector de Temas y seleccionamos nuestro tema. Como solo hemos cambiado el fichero README.html (para ver su contenido en el selector de temas podremos ver el enlace información) y favicon.ico, con lo que la apariencia será la misma que la del tema standard. Lo seleccionamos y empezaremos a cambiar las cosas.

En el siguiente artí­culo veremos cómo ir modificando los demás ficheros.

Enlaces.

[1] Temas de Moodle: http://moodle.org/mod/data/view.php?id=6552

[2] Dynamic Drive favicon generator: http://tools.dynamicdrive.com/favicon/