15/Actualización de temas

Nota: Pendiente de Traducir. ¡Anímese a traducir esta página!.     ( y otras páginas pendientes)

Desde la versión 1.5 de Moodle y posteriores, el soporte CSS se ha extendido a través de Moodle para eliminar los difíciles códigos de estilo como p.e. fuentes o colores, del código HTM. Como resultado, los temas de Moodle son mucho más flexibles y accesibles, pero esto significa que los temas personalizados escritos para la versión de Moodle 1.4 y anteriores no funcionarán correctamente.

La mejor forma cuando se actualiza es reconstruir su tema otra vez usando trozos de su viejo tema, compartiendo imágenes y estilos según sea necesario. Con esta solución conseguirá un tema más robusto y resistente a futuras actualizaciones de Moodle.

Las intrucciones indicadas abajo se aplicarán tanto si usted está actualizando como si no.

Actualizar o instalar Moodle 1.5 o superior

Intale Moodle normalmente. Si está actualizando, el directorio de su viejo tema se mantendrá, pero el proceso de instalación establecerá el tema de su sitio al nuevo tema por defecto standardwhite.

Crear un nuevo directorio de tema

Los Temas son almacenados en el directorio theme de Moodle. Cada tema se almacena en un directorio particular.

Para crear un nuevo directorio de tema, haga una copia del directorio standardwhite (o cualquier otro tema) y nómbrelo apropiadamente.

Dentro de este nuevo directorio encontrará los siguientes archivos.

config.php - edite este archivo para ajustar los parámetros de su tema

favicon.ico - el icono del sitio que se muestra en la barra de direcciones o favoritos del navegador

header.html - un trozo de HTML que define el encabezamiento de sus páginas.

footer.html - un trozo de HTML que define el pie de sus páginas.

gradients.css - una hoja de estilos actual que contiene estilos para añadir a su tema.

gradient.jpg - una archivo de imágen, usted puede añadir tantos como desee.

styles.php - el script actual que llama Moodle, no hay necesidad de que usted lo cambie.

Crear un nuevo archivo CSS

Your theme can have as many CSS files as you like. Create a new one, e.g. mystyles.css, and include it in your theme by editing config.php and changing $THEME->stylesheets. You may remove gradients.css if you don't want it.

This new CSS file is where you will be adding styles that override ones from the standard stylesheet or set new ones.

While you're looking in config.php, read through it to get an idea of the other things that you can do.

Make your theme the active one

Choose your new theme from the list on Administration >> Configuration >> Themes. (Alternatively, a user or session theme may be configured for testing purposes.)

Changing the header and footer files

The header and footer files define the layout for the top and bottom of pages.

The first thing most people want to do is to add a logo to the front page. The easiest way to do this is to edit the header file. Look closely at the code in header.html and you'll see there is different code for different parts of Moodle. Adding a logo to the theme header contains further information.

Warning: If upgrading from 1.4, don't just copy your old header and footer files over as they have changed substantially.

Start adding new CSS styles

Start adding classes to your CSS file, one by one. The best way to find out what styles you want to change is by using one of the following tools:

• Andrew Walker's CSS Inspector - this enables you to easily view details of an element, including its ancestors and any class and id attributes
• Web Developer Extension for Firefox

Clear your browser cache

Please remember that browsers usually cache CSS files, so a forced refresh (Ctrl+F5) is required in order to see any changes. For a detaled description look at how-to-clear-your-browser-cache

See also

• Theme basics
• Moving Title Text in Sideblocks forum discussion
• Themes forum