¿Quieres crear un nuevo tema para Moodle 2?

¿Quieres crear un nuevo tema para Moodle 2?

moodle 2

¿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 😉

8 comentarios

  1. Zambrano dice:

    Como herramienta de desarrollador web me gustaría aconsejar una…

    Soy firefox adicto, pero en esta ocasión para el uso de esta herramienta tiraré de IE.

    La herramienta en sí es DebugBar la cual podéis descargar en http://www.debugbar.com/.

    Para gustos, colores… Adjunto esta herramienta por que creo que es más intuitiva y más objetiva a la hora de localizar div y otros elementos que Firebug.

    (Con ella maquete varios Joomla, Mambo, WordPress y 1 Moodle).

    Para salir de dudas… Mo hay otra, probadla…

    Saludos
    …::: Zambrano :::…

  2. Luis Tornos dice:

    Pues si Zambrano, no conocía debugbar y es cierto que es bastante intuitivo, aunque reconozco que soy pro-firefox y normalmente uso Firebug. Gracias por tu aportación, ahora conozco otra alternativa…

    Como siempre “peazo” de Post Dani!

  3. Julian dice:

    Muchachos, una pregunta como modifico la apariencia de los menus, barras y todo esto, en el tema aparece una carpeta que se llama layout , que funcionalidades tiene??? Si me pueden ayudar Gracias..

  4. donadlo silva dice:

    Estimado amigos…. quisiera saber si en el sitio mil aulas se puede realizar esa actividad…. y si se puede como se haria???
    gracias.
    donaldo silva

  5. Raul Herrera Lopez dice:

    hola muy buenos dias, me preguntaba si estos pasos funcionan con la version 3.1 de moodle muchas gracias buen dia saludos buen post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *