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

Full d'estil bàsic

La millor estratègia per crear un nou disseny és incorporar progressivament fulls d'estils propis convivint amb l'herència dels estils del tema estàndard de Moodle. Aquest procediment consistiria en la creació de full d'estils nous segons una temàtica ben diferenciada i, cadascun d'aquests, sobreescriuria les propietats i els valors de l'estàndard. D'aquesta manera el nou tema seria funcional i cap element quedaria sense un estil associat. Veieu l'ordre de creació:

  1. colors.css: full d'estil que reemplaçaria els colors de fons i frontals dels diferents elements de la pàgina. Obriu l'arxiu styles_color.css del tema standard per conèixer els selectors implicats i tenir un punt de partida per al desenvolupament del nou estil.
  2. tipografia.css: full d'estil que reemplaçaria els valors de tipografia dels diferents elements de la pàgina. Obriu l'arxiu styles_fonts.css del tema standard per conèixer els selectors implicats i tenir un punt de partida per al desenvolupament del nou estil.
  3. composicio.css: full d'estil que reemplaçaria els valors de marges, farciments, vores, elements flotants, etc. Obriu l'arxiu styles_layout.css del tema standard per conèixer els selectors implicats i tenir un punt de partida per al desenvolupament del nou estil.

Ajudeu-vos d'eines com Firebug per analitzar els elements actius de la pàgina i quin són els estils associats.

Els tres full d'estils estàndards estan organitzats en les següents seccions:

  • nucli
  • formularis
  • capçalera
  • peu
  • administració
  • blocs
  • bloc
  • calendari
  • curs
  • documents
  • grades
  • autenticació
  • missatges
  • notes
  • mymoodle
  • cuestionaris
  • pestanyes
  • descriptors
  • usuari/ària
  • altres

Respecteu aquesta organització per als full d'estils propis. Deixeu en blanc aquelles seccions que mantindreu l'estil estàndard, però no oblideu incloure el comentaris pertinents de cada secció. Per exemple, en el cas que no modifiqueu cap estil dels formularis:

/***
 *** Formularis
 ***/
 
/***
 *** Header
 ***/
 
.headermain, h1.headermain {
  float:left;
  margin:0;
  padding:0;
}

Finalment, obriu l'arxiu config.php i afegiu el nom dels full d'estils propis a la següent variable:

$THEME->sheets = array('colors', 'tipografia', 'composicio');

perquè estiguin associats a cadascuna de les pàgines de Moodle un cop el nou tema sigui actiu.