====== Personalització: capçalera, colors, icones... ====== Alguns dels temes de Moodle permeten personalitzar determinades zones com ara el logotip de la capçalera. En concret, aquests temes són: * **standardlogo**. Es tracta d'un dels temes estàndard de Moodle. Permet personalitzar la imatge de la capçalera. * **xtec** i **xtec2**. Són dos temes no-estàndards que han estat dissenyat per l'equip de desenvolupament del projecte Àgora. Es tracta de temes que, a més de personalitzar la imatge de la capçalera, també permeten modificar els estils CSS i, fins i tot, en el cas del tema **xtec2**, altres aspectes com ara el joc d'icones o la mida de la lletra. Per tant, per modificar qualsevol de les opcions següents (colors, capçalera, lletra, icones...) el primer que cal fer és accedir al **Selector de temes** que es troba a **Administració -> Aparença -> Temes** i seleccionar el tema **XTEC2** (que és el que permet personalitzar més opcions). Els centres interessats en instal·lar l'aparença **XTEC2** poden descarregar el codi font de l'Àgora des de l'apartat **[[https://projectes.lafarga.cat/projects/agora/scm|SCM -> Descarrega l'última instantània de l'arbre SVN ]]** del portal que el projecte té a [[https://projectes.lafarga.cat/projects/agora|LaFarga.cat]], descomprimir-ho i localitzar el directori que conté el tema, que es troba a **src/html/moodle/theme/xtec2**. Per últim, s'haurà d'instal·lar seguint les instruccions que estan explicades a l'apartat [[cursos:gestio_centres:d304:modul_2:practica_1#temes_de_lloc|Temes del lloc]] de la pràctica anterior. Els espais Moodle d'Àgora ja incorporen per defecte aquesta aparença XTEC2 i, per tant, no han de fer res per instal·lar-la (només seleccionar-la des del **Selector de temes**). ===== Colors ===== L'aparença **XTEC2**, tal i com s'ha comentat anteriorment, permet personalitzar fàcilment alguns aspectes de disseny de l'entorn, com ara els colors. Per modificar els colors cal accedir a l'apartat **Aparença -> Temes -> Paràmetres d'estil** del menú d'Administració i triar una de les opcions següents: * Seleccionar alguna de les combinacions de colors preconfigurades que apareixen a la llista **Estils predefinits** (**Escull de coral**, **Febre de l'or**...). {{ :cursos:gestio_centres:d304:modul_2:xtec2_colors1.png |Llista d'estils predefinits}} * Modificar els colors desitjats pels títols, fons, subtítols, enllaços... mitjançant el selector que apareix en fer clic sobre el quadre de color que hi ha al costat de cada estil. {{ :cursos:gestio_centres:d304:modul_2:xtec2_colors2.png |Modificar els colors}} Cal tenir en compte que l'apartat **Aparença -> Temes -> Paràmetres d'estil** del menú d'Administració només apareix a les aparences XTEC i XTEC2. ===== Capçalera ===== Abans de modificar la capçalera el primer que cal fer és buscar i/o crear la imatge que es vol fer servir. Ara bé, aquesta imatge ha de reunir els requeriments següents: * Ha de ser un fitxer en format PNG o JPG i ha de tenir exactament el nom **logo.png** o **logo.jpg**. * L'**alçada** d'aquesta imatge no pot superar els **112px** i l'**amplada** recomanada és entre 450px i 900px. En cas que la imatge superi l'alçada anterior (**112px**) caldrà redimensionar-la (amb alguna de les tècniques explicades a la pràctica anterior) abans de pujar-la ja que sinó la imatge no s'actualitzarà. * Als temes **xtec** i **standardlogo** la imatge de la capçalera queda alineada a la part esquerra i substitueix el text del nom del lloc; en canvi, l'aparença **xtec2**, conserva el títol de l'espai Moodle a l'esquerra (que es pot definir als **Paràmetres de la primera plana**) i alinea la imatge de capçalera a la dreta. Un cop seleccioneu i prepareu la imatge (tenint en compte les indicacions anterior) teniu dues opcions per modificar la capçalera al vostre espai Moodle: * Accedir a l'apartat **Aparença -> Temes -> Paràmetres d'estil** del menú d'Administració, marcar l'opció **Fes servir la imatge sel·leccionada** i fer clic sobre el botó **Navega...** per buscar la imatge de capçalera al disc dur de l'ordinador i seleccionar-la (opció recomanada). {{ :cursos:gestio_centres:d304:modul_2:tema_xtec_capcalera.png |Modificació de la imatge de capçalera des dels Paràmetres d'estil}} * Pujar un fitxer amb la imatge de la capçalera al directori **theme ** dels **Fitxers del lloc** de la **Primera plana**. {{ :cursos:gestio_centres:d304:modul_2:tema_xtec_fitxers_lloc.png |Fitxers del lloc de la primera plana al directori theme necessaris per modificar la capçalera al tema XTEC}} En el cas del tema **standardlogo** la imatge s'ha de pujar als **Fitxers del lloc** de la **Primera plana** al directori arrel amb el nom **logo.gif** o **logo.jpg**. {{ :cursos:gestio_centres:d304:modul_2:tema_standardlogo_fitxers_lloc.png |Fitxers del lloc de la primera plana al directori arrel necessaris per modificar la capçalera al tema standardlogo}} ===== Lletra ===== L'aparença **XTEC2** permet seleccionar la mida de la lletra per defecte. Per modificar aquesta mida cal accedir a l'apartat **Mida de la lletra** del menú **Administració -> Aparença -> Temes -> Paràmetres d'estil** i fer clic al botó que apareix al costat de la mida desitjada. {{ :cursos:gestio_centres:d304:modul_2:xtec2_lletra.png |Mida de la lletra}} ===== Icones ===== Una altra de les opcions que permet configurar de forma molt simple l'aparença **XTEC2** és el joc d'icones de Moodle. Per defecte, aquesta aparença porta unes icones diferents de les habituals de Moodle però amb un simple clic és possible seleccionar les estàndard. Per fer-ho s'ha d'accedir a l'apartat **Icones** del menú **Administració -> Aparença -> Temes -> Paràmetres d'estil** i fer clic sobre el joc d'icones desitjat (a sota de cada nom hi ha una mostra de l'aspecte de les icones seleccionades). {{ :cursos:gestio_centres:d304:modul_2:xtec2_icones.png |Icones}} ===== Menú superior ===== Aquest menú, que conté enllaços personalitzats, es mostra a la part superior de la pantalla i presenta un aspecte semblant al següent: {{:cursos:gestio_centres:d304:modul_2:top_menu_0.png|Aspecte}} Hi ha dos paràmetres de configuració que es poden definir: * **Menú actiu**. Permet indicar si la barra de menú superior s'ha de visualitzar (en cas que estigui marcat) o no. * **Obrir enllaços en una finestra nova**. Si es marca aquesta opció, els enllaços als què fan referència tots els elements del menú es visualitzen en una finestra/pestanya nova (segons el navegador). De la mateixa manera, a la dreta dels elements i sub-elements creats apareixen un seguit d'icones que permeten realitzar les accions següents: * **Editar**. Permet modificar tant el títol com el URL. * **Eliminar**. En fer clic, el sistema demana confirmació abans d'esborrar l'element seleccionat. * **Afegir sub-element**. Aquesta opció només està disponible als elements del nivell superior. * **Desplaçar amunt/avall**. Permet modificar la posició de l'element o el sub-element dins el conjunt. Només apareix quan hi ha dos o més elements. Cal tenir en compte, però, que no és possible canviar l'element superior d'un subelement. Per tal de que els canvis s'apliquin correctament cal prémer el botó **Desa els canvis**. En aquest vídeo podeu veure com crear els menús i submenús.
Recordeu que l'apartat **Aparença -> Temes -> Paràmetres d'estil** del menú d'Administració només apareix als llocs on s'han instal·lat correctament les aparences XTEC i/o XTEC2 i sempre i quan alguna d'aquestes aparences estigui seleccionada com a actual.