Edició dels estils de Moodle

Els temes XTEC i XTEC2, tal i com s'ha comentat a les pràctiques anteriors, permeten, a més de modificar la imatge de la capçalera, editar els fulls d'estil per personalitzar alguns aspectes del lloc Moodle, com ara els colors de fons dels blocs o el format de les fonts.

Si teniu seleccionat els temes XTEC o XTEC2 i voleu canviar al vostre espai Moodle el format de la lletra perquè aparegui tot en majúscules podeu seguir les instruccions següents:

1. Accediu a l'apartat l'apartat Fulls d'estil en cascada (CSS) del menú Administració → Aparença → Temes → Paràmetres d'estil.
2. Copieu el text de la caixa que apareix a continuació i enganxeu-lo al quadre de text d'edició anterior.

   Codi CSS

   /* Mostra tots els caràcters en majúscules */
   *{text-transform: uppercase;}

3. Quan acabeu l'edició feu clic sobre el botó Desa els canvis. En ocasions aquests canvis no són immediats i, per tant, us farà falta netejar la memòria cau del vostre navegador per poder visualitzar els canvis introduïts. El codi anterior modifica el format de la lletra del vostre espai Moodle per tal que apareguin tot en majúscules.

Si teniu seleccionat el tema XTEC2 i voleu canviar el format dels enllaços del vostre espai Moodle per tal que apareguin subratllats podeu seguir les instruccions següents:

1. Accediu a l'apartat l'apartat Fulls d'estil en cascada (CSS) del menú Administració → Aparença → Temes → Paràmetres d'estil.
2. Copieu el text de la caixa que apareix a continuació i enganxeu-lo al quadre de text d'edició anterior.

   Codi CSS

   /* Afegeix la línia de subratllat a tots els enllaços */
   a:link, a:visited, a:hover, a:active{text-decoration:underline;}

3. Quan acabeu l'edició feu clic sobre el botó Desa els canvis. En ocasions aquests canvis no són immediats i, per tant, us farà falta netejar la memòria cau del vostre navegador per poder visualitzar els canvis introduïts. El codi anterior canvia el format de tots els enllaços del vostre espai Moodle per tal que apareguin sempre subratllats.
4. Si voleu que els enllaços de la capçalera així com els dels blocs laterals no apareguin subratllats haureu d'afegir una altra línia més, tal i com es mostra a la caixa següent.

   Codi CSS

   /* Afegeix la línia de subratllat a tots els enllaços */
   a:link, a:visited, a:hover, a:active{text-decoration:underline;}
   /* Treu la línia de subratllat als enllaços de la capçalera i els blocs laterals */
   .sideblock a, .headermain a {text-decoration:none;}

   Després de desar aquests canvis els enllaços de la capçalera i els blocs laterals no apareixeran subratllats com es pot comprovar a la captura de pantalla següent:

Si teniu seleccionat el tema XTEC i voleu canviar els colors del vostre espai Moodle podeu seguir les instruccions següents:

1. Accediu a l'apartat l'apartat Fulls d'estil en cascada (CSS) del menú Administració → Aparença → Temes → Paràmetres d'estil. Si és la primera vegada que editeu els estils és recomanable que, abans de fer cap canvi, esborreu el contingut actual dels camps de text Estil de l'estructura, Estil de les fonts i Estil de color per facilitar el treball posterior sobre ells. Per fer-ho, heu de fer clic amb el ratolí sobre el quadre de text, accedir al menú del navegador Edita → Selecciona-ho tot per marcar tot el contingut, polsar la tecla Suprimir (Supr) per esborrar tot text seleccionat i desar els canvis (amb el botó que apareix al final de la pàgina). No patiu perquè, si anteriorment NO havíeu fet cap modificació als fulls d'estil del tema, quan esborreu el seu contingut, l'aspecte del vostre espai Moodle no variarà!
2. Copieu el text de la caixa que apareix a continuació i enganxeu-lo al quadre de text d'edició de l'apartat Estil de color.

   Codi CSS

   /* Color de fons de la barra de navegació */
   .navbar, .sideblock .header {
     background-color: #FFDFDF;
   }
    
   /* Color dels enllaços en situar-se a sobre, del bloc del tema actual... */
   a:hover, .sideblock .content a:hover, #course-view .weekscss .current, #course-view .current td.side, .block_admin_tree.sideblock .link.current {
     color: #FF0000;
   }
    
   /* Color de fons dels blocs */
   .sideblock .content{
     background-color: #FAFAFA; 
   }
    
   /* Color per defecte dels enllaços */
   .sideblock .content a, a:link, a:visited {
     color: #000000;
   }

   Per defecte, el codi anterior canvia els colors per aconseguir que el lloc Moodle presenti un aspecte amb tonalitats vermelles.

3. Si voleu canviar aquests colors per uns altres haureu de substituir els textos que apareixen amb el format #RRGGBB per d'altres, com ara:

   Colors alternatius

   	Fons de la barra de navegació	Color dels enllaços en situar-se a sobre
   Vermell	#FFDFDF	#FF0000
   Verd	#CFFFD1	#00AF07
   Blau	#CFD7FF	#5366BF
   Groc	#FFFBCF	#FFD40F

   Per tant, si, per exemple, modifiqueu el color que defineix el fons de la barra de navegació (#FFDFDF) pel seu equivalent en color verd (#CFFFD1) i el color dels enllaços en situar-se a sobre (#FF0000) pel corresponent segons la taula anterior (#00AF07)

   Codi CSS

   /* Color de fons de la barra de navegació */
   .navbar, .sideblock .header {
     background-color: #CFFFD1;
   }
   /* Color dels enllaços en situar-se a sobre, del bloc del tema actual... */
   a:hover, .sideblock .content a:hover, #course-view .weekscss .current, #course-view .current td.side, .block_admin_tree.sideblock .link.current {
     color: #00AF07;
   }

   el lloc Moodle presentarà l'aspecte següent:

4. Quan acabeu l'edició haureu de fer clic sobre el botó Desa els canvis. En ocasions aquests canvis no són immediats i, per tant, us farà falta netejar la memòria cau del vostre navegador per poder visualitzar els canvis introduïts.