====== 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. \\ \\ ==== Exemple 1: Modificació de la font a majúscules ==== 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: - Accediu a l'apartat l'apartat **Fulls d'estil en cascada (CSS)** del menú **Administració -> Aparença -> Temes -> Paràmetres d'estil**. {{ :cursos:gestio_centres:d304:modul_2:xtec2_css.png |Edició dels fulls d'estil en cascada}} - Copieu el text de la caixa que apareix a continuació i enganxeu-lo al quadre de text d'edició anterior. /* Mostra tots els caràcters en majúscules */ *{text-transform: uppercase;} - 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. {{ :cursos:gestio_centres:d304:modul_2:xtec2_css_majuscules.png |Edició del tema XTEC2 per passar-ho a majúscules}} A l'apartat d'enllaços d'interès de la pràctica anterior hi ha una eina anomenada **Clear Cache Button** que pot resultar útil per esborrar la memòria cau. \\ \\ ==== Exemple 2: Modificació del format dels enllaços al tema XTEC2 ==== 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: - Accediu a l'apartat l'apartat **Fulls d'estil en cascada (CSS)** del menú **Administració -> Aparença -> Temes -> Paràmetres d'estil**. {{ :cursos:gestio_centres:d304:modul_2:xtec2_css.png |Edició dels fulls d'estil en cascada}} - Copieu el text de la caixa que apareix a continuació i enganxeu-lo al quadre de text d'edició anterior. /* Afegeix la línia de subratllat a tots els enllaços */ a:link, a:visited, a:hover, a:active{text-decoration:underline;} - 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. {{ :cursos:gestio_centres:d304:modul_2:xtec2_css_1.png |Edició del tema XTEC2 per subratllar els enllaços}} - 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. /* 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: {{ :cursos:gestio_centres:d304:modul_2:xtec2_css_2.png |Edició del tema XTEC2 per subratllar els enllaços, tret de la capçalera i els blocs laterals}} Recordeu que a l'apartat d'enllaços d'interès de la pràctica anterior hi ha una eina anomenada **Clear Cache Button** que pot resultar útil per esborrar la memòria cau. ==== Exemple 3: Modificació dels colors al tema XTEC==== Si teniu seleccionat el tema **XTEC** i voleu canviar els colors del vostre espai Moodle podeu seguir les instruccions següents: - Accediu a l'apartat l'apartat **Fulls d'estil en cascada (CSS)** del menú **Administració -> Aparença -> Temes -> Paràmetres d'estil**. {{ :cursos:gestio_centres:d304:modul_2:xtec_css.png |Edició dels fulls d'estil en cascada}} 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à! - 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**. /* 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. {{ :cursos:gestio_centres:d304:modul_2:tema_xtec_css_vermell.png |Edició del tema XTEC per aconseguir tonalitats vermelloses}} - Si voleu canviar aquests colors per uns altres haureu de substituir els textos que apareixen amb el format #RRGGBB per d'altres, com ara: | ^ 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**) /* 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: {{ :cursos:gestio_centres:d304:modul_2:tema_xtec_css_verd.png |Edició del tema XTEC per aconseguir tonalitats verdoses}} - 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. Recordeu que a l'apartat d'enllaços d'interès de la pràctica anterior hi ha una eina anomenada **Clear Cache Button** que pot resultar útil per esborrar la memòria cau.