Guia per a la creació d'un tema de Moodle

Aquí disposeu d'una base de temes visuals de Moodle sota llicència GNU General Public License.

Modificar el tema visual del Moodle és necessari que accediu a l'entorn amb rol d'administrador i aneu a l'opció Administració | Aparença | Temes | Selectors de temes . Us apareixerà una llista dels temes visuals disponibles.

Quan realitzeu una instaŀlació nova de Moodle (versió 1.9.x), el tema visual actiu per defecte és l'anomenat standardwhite, el qual farem servir com a punt de partida per explicar-vos el funcionament dels temes a Moodle.

Quina és l'estructura d'un tema de Moodle?

Si accediu a la carpeta standardwhite (moodle → theme → standardwhite) trobareu els següents arxius:

  • config.php: és l'arxiu de configuració del tema visual i on especificareu quina serà la part pròpia del tema i quina part heretarà del tema estàndard o qualsevol altre tema.
  • favicon.ico: és la icona que mostra els navegadors tal com ja coneixeu a la pràctica 1 del mòdul 6.
  • styles.php: aquest arxiu fa de pont entre l'arxiu header.html i els arxius CSS. És convenient que no modifiqueu aquest arxiu. Qualsevol modificació del comportament del tema passa per l'arxiu config.php.
  • grandient.css: full d'estil específic del tema standardwhite.
  • header.html i footer.html: són els arxius on s'estructuren els elements particulars del tema standardwhite com són el logotip, l'autenticació, el menú de navegació, etc. Com Wordpress -i la majoria d'infraestructures web que permeten personalitzar el tema visual-, Moodle proporciona un conjunt de funcions pròpies que podeu incorporar a l'estructura d'aquest dos arxius.
  • gradient.jpg: gràfic que embellirà visualment alguns elements de l'estructura.

i la resta d'elements? El tema estàndard

Segur que ja us heu fet la pregunta respecte el tema visual standardwhite: on són la resta d'elements i fulls d'estils necessaris perquè sigui completament operatiu? Si heu obert el full d'estil gradient.css, verificareu que falten gairebé la major part dels selectors que pinten l'aspecte visual.

Moodle proporciona un tema base anomenat standard que proveeix tots els elements estructurals i visuals necessaris per al desenvolupament d'altres temes sense haver de reinventar la roda. És a dir, si no heu definit un selector al tema visual, Moodle utilitzarà les propietats i valors del tema standard.

Aquesta metodologia de Moodle presenta una clara avantatge i també una enorme desavantatge. La part positiva és què no us heu de preocupar de personalitzar tots els elements que participen en un tema visual. La desavantatge és la part creativa i de personalització: la majoria de temes visuals de Moodle són molt semblants i l'estructura HTML és massa rígida per fer canvis importants de la presentació.

El tema estàndard

El tema estàndard porta tota la informació referent a l'estructura i la presentació de Moodle i que serveix de mare per al desenvolupament de temes personalitzats. Veieu l'estructura d'aquest tema:

A diferència de l'estructura del tema StandardWhite, aquí trobeu la resta de fulls d'estils necessaris perquè qualsevol nou tema visual sigui completament operatiu:

  • styles_layout.css
  • styles_fonts.css
  • styles_color.css
  • styles_moz.css
  • styles_ie6.css
  • styles_ie7.css
  • styles_rtl.css

Veieu a continuació els diferents escenaris possibles de realització d'un tema visual propi de Moodle en dependència del tema estàndard.

Personalització baixa

Una personalització baixa és, fonamentalment, fer ús de la totalitat del tema estàndard de Moodle i afegir una variació visual mínima.

Un exemple de personalització baixa és l'exemple que us hem ensenyat al principi d'aquesta pràctica, el tema visual StandardWhite.

Obriu el fitxer config.php. En aquest fitxer es determina quin seran els estils propis del tema mitjançant la variable sheets:

$THEME->sheets = array('gradients');

En el cas del tema visual standardwhite només crida a l'estil gradients.css. Obriu aquest arxiu i verifiqueu que només incorpora la personalització del fons de les capçaleres de primer, segon i tercer nivell, les capçaleres i contingut de les ceŀles de les taules (th.header i td.header) entre altres.

th.header,
td.header,
h1.header,
h2.header,
h3.header,
div.header {     
    background-image:url(gradient.jpg);     
    background-position:top;    
    background-repeat:repeat-x;     
}
 
.navbar {
    background-image:url(gradient.jpg);     
    background-position:top;    
    background-repeat:repeat-x;     
}

La resta d'estils ve determinada per la següent crida mitjançant la variable standardsheets:

$THEME->standardsheets = array('styles_layout','styles_fonts','styles_color','styles_moz'); 

on crida al nucli important dels estils del tema visual estàndard.

Recordeu el efecte cascada dels fulls d'estils: qualsevol selector CSS declarat al tema visual nou sobreescriurà al corresponent selector CSS del full d'estil del tema estàndard.

Personalització mitjana

El tema visual formal_white correspon a un cas de personalització mitjana: manté part dels valors de la composició (layout) i colors del tema estàndard, però incorpora estils propis per a les fonts tipogràfiques, colors i també per a la composició, creant així una barreja de dos temas. Veieu l'arxiu config.php:

$THEME->sheets = array('fw_layout','fw_color','fw_fonts');
 
$THEME->standardsheets = array('styles_layout', 'styles_color');

Personalització alta

La següent configuració de l'arxiu config.php determinaria una personalització completa dels fulls d'estils:

$THEME->sheets = array('el_meu_layout','el_meu_color','les_meves_fonts');
 
$THEME->standardsheets = false;

És a dir, no hereta cap full d'estil del tema estàndard i, per tant, la definició de tots els selectors -amb propietats i valors- passa a ser responsabilitat del nou tema.

Veieu l'aspecte visual del tema standardwhite sense cap full d'estil heretat del tema estàndard: