Fòrum Àgora-MOODLE

Ha canviat l'aspecte de la pàgina inicial a tothom?

Re: Ha canviat l'aspecte de la pàgina inicial a tothom?

per FRANCESC BUSQUETS BURGUERA -
Nombre de respostes: 1
Hola Anna,

El tema que fem servir ara a educaciodigital.cat es diu XTEC2020, i està basat en el tema Boost, que és l'estàndard de Moodle.

Al tema Boost els blocs apareixen per defecte a la dreta, i hi ha un menú plegable a l'esquerra amb els elements de navegació més importants. Aquesta distribució no és arbitrària, sinó basada en estudis d'usabilitat que recomanen situar a la zona superior esquerra de la pantalla la informació més rellevant, ja que és allí on s'enfoca primer l'atenció dels usuaris. En general, elements com els títols i descripcions de cursos i activitats tenen una rellevància superior als continguts dels blocs, que  acostumen a jugar un paper complementari (bé... segur que hi ha excepcions, però diria que en general és aixi), per això els dissenyadors de Boost van considerar que era millor posar-los a la dreta. A més, van afegir un botó (fletxes en diagonal) que amaga del tot els blocs.

Vaja... que abans de moure els blocs a l'esquerra potser us aconsellaria deixar rodar una mica el nou tema per tal que els usuaris s'hi acostumin, i valorar si realment el canvi millorarà la usabilitat del lloc.

Fetes aquestes reflexions, us explico com redimensionar i moure els blocs a l'esquerra, i que cadascú faci el que cregui més convenient:


Moure els blocs a l'esquerra

Es tracta d'anar a Administració - Aparença - TemesXTEC2020 i, a la secció Estils personalitzats (al final de la pàgina), afegir-hi aquestes directives de CSS:

#region-main.has-blocks {
  float: right;
}
section[data-region="blocks-column"] {
  float: left;
}

Veuràs que en fer Desa els canvis t'apareixeran els blocs a l'esquerra.


Canviar l'amplada dels blocs

En aquest cas cal fer alguns càlculs: l'amplada per defecte dels blocs és de 360px (píxels virtuals, que poden ser més píxels reals en pantalles d'alta densitat), als quals s'afegeixen 15px de marge per assegurar una zona de separació amb el contingut principal.

Si volem que l'amplada dels blocs sigui de 200px, podem afegir aquestes directives CSS al mateix lloc que abans:

#region-main.has-blocks {
  width: calc(100% - 215px) !important;
}
section[data-region="blocks-column"] {
  width: 200px;
}

A una secció li assignem una amplada absoluta (200px) i per a l'altra indiquem al navegador web que calculi l'amplada disponible i li resti 215px (amplada dels blocs més 15px de marge)


Blocs a l'esquerra amb amplada canviada

En aquest cas caldrà combinar les dues instruccions:

#region-main.has-blocks {
  float: right;
  width: calc(100% - 215px) !important;
}
section[data-region="blocks-column"] {
  float: left;    
  width: 200px;
}


Un altre consell: amb CSS podem canviar totalment l'aparença del nostre Moodle, però abans de donar qualsevol canvi per bo cal provar-lo en diferents pàgines (cursos, categories, activitats...), amb diferents rols (professor, alumne) i amb diferents amplades de pantalla (PC, tauleta, mòbil...). Si no ho veieu clar o us dona problemes, sempre serà millor treure el CSS personalitzat i deixar els valors per defecte, que acostumen a estar molt provats i garanteixen una bona accessibilitat, responsivitat i accessibilitat.

In reply to FRANCESC BUSQUETS BURGUERA

Re: Ha canviat l'aspecte de la pàgina inicial a tothom?

per ANNA CASAMITJANA ROBERT -
Gràcies, Francesc!! Sí, ho intentarem mantenir tal com dius a veure si ens acostumem així, segur que era per millorar-ho, no cal dir que es sobrentén que els canvis són per a millor però ens han agafat per sorpresa. Igualment em guardo el correu on he rebut aquestes instruccions per si algun dia amb calma volem provar de personalitzar-lo una mica.
Bon estiu!