Mòdul 7 - Pràctica 5

El tercer dels entorns configurables de que disposa Àgora és l'Intraweb XTEC2. Aquest entorn visual és estèticament semblant al que s'utilitza de manera predeterminada en els Moodle d'Àgora.

En aquesta pràctica aplicareu els mateixos procediments que a la pràctica anterior. L'única cosa que canviarà són les etiquetes i els atributs del full d'estils.

Com a la pràctica anterior, per poder veure els canvis que fareu a l'entorn visual cal que l'establiu com a predeterminat. Els passos són els següents:

⇒ Entreu a la intranet amb l'usuari/ària admin.

⇒ Aneu a Administració → Sistema.

⇒ Cliqueu a Entorns visuals.

⇒ Feu clic a la icona verda corresponent a l'entorn visual Intraweb XTEC2.

⇒ A la finestra de confirmació, cliqueu a la icona verda per acceptar.

Si tot ha anat bé, en aquests moments la intranet ha canviat d'entorn visual. Aquest entorn visual té la mateixa distribució de columnes i comportament que l'Intraweb XTEC que vàreu veure a la pràctica 3. L'única cosa que canvia són els colors, el format dels textos, les imatges de fons i alguns petits detalls.

Com a les pràctiques anteriors, el menú horitzontal de la capçalera no ha canviat. Recordeu que si voleu fer-hi algun canvi heu d'anar a l'administració del mòdul iw_vhmenu.

Com a la pràctica anterior, el full d'estils no hi és en els fitxers del lloc. El podeu trobar via web en aquest URL:

http://agora.xtec.cat/zikula2/themes/IWxtec2/style/style.css

⇒ Obriu una pestanya nova del navegador, sense perdre la intranet, i visiteu l'URL anterior.

Com a la pràctica anterior, teniu la possibilitat de desar-lo i pujar-lo al servidor amb els tots els atributs predeterminats però, una vegada més, creareu un fitxer buit i hi posareu només els canvis.

⇒ A l'escriptori del vostre ordinador, creeu un fitxer de text sense format i buit de contingut i anomeneu-lo style3.css.

L'entorn visual Intraweb XTEC2 està construït de manera que es pot canviar fàcilment la combinació de colors dels títols modificant només alguns estils. Tot seguit teniu alguns exemples de combinacions de colors:

Estil "Llima dolça" (tons verds):

a:link, a:visited{
	color: #000000;/*COLOR4*/
}
 
a:hover{
	color: #74AB00; /*COLOR1*/
}
 
#theme_header_top{
	background-color: #333333; /*COLOR3*/
}
 
#theme_header h1, #theme_header h1 a{
	color: #74AB00; /*COLOR1*/
}
 
#theme_header h2{
	color: #333333; /*COLOR3*/
}
 
#theme_navigation_bar{
	background-color: #FFEDBA; /*COLOR5*/
}
 
#theme_navigation_bar .selected, #theme_navigation_bar li:hover{
	background-color: #5A6E31; /*COLOR2*/
}
 
h4.z-block-title{
	background-color:#5A6E31; /*COLOR2*/
	border-color: #5A6E31; /*COLOR2*/
}

⇒ Copieu el codi anterior i enganxeu-lo al fitxer style3.css.

⇒ Deseu el full d'estils.

⇒ Pugeu el fitxer style3.css a la carpeta theme dels fitxers del lloc.

Si tot ha anat bé, veureu com el color predominant ha canviat, de manera que ara s'utilitzen tons verds.

Tot seguit teniu els estils que donen lloc a més combinacions de colors predominants a l'entorn visual:

Estil "Nostàlgia" (tons blaus):

a:link, a:visited{
	color: #457FB9;/*COLOR4*/
}
 
a:hover{
	color: #457FB9; /*COLOR1*/
}
 
#theme_header_top{
	background-color: #457FB9; /*COLOR3*/
}
 
#theme_header h1, #theme_header h1 a{
	color: #457FB9; /*COLOR1*/
}
 
#theme_header h2{
	color: #457FB9; /*COLOR3*/
}
 
#theme_navigation_bar{
	background-color: #B3CADB; /*COLOR5*/
}
 
#theme_navigation_bar .selected, #theme_navigation_bar li:hover{
	background-color: #457FB9; /*COLOR2*/
}
 
h4.z-block-title{
	background-color:#457FB9; /*COLOR2*/
	border-color: #457FB9; /*COLOR2*/
}

Estil "La febre de l'or" (tons ataronjats foscos):

a:link, a:visited{
	color: #145C61;/*COLOR4*/
}
 
a:hover{
	color: #CC7000; /*COLOR1*/
}
 
#theme_header_top{
	background-color: #0B3D41; /*COLOR3*/
}
 
#theme_header h1, #theme_header h1 a{
	color: #CC7000; /*COLOR1*/
}
 
#theme_header h2{
	color: #0B3D41; /*COLOR3*/
}
 
#theme_navigation_bar{
	background-color: #87BDC1; /*COLOR5*/
}
 
#theme_navigation_bar .selected, #theme_navigation_bar li:hover{
	background-color: #E99B00; /*COLOR2*/
}
 
h4.z-block-title{
	background-color:#E99B00; /*COLOR2*/
	border-color: #E99B00; /*COLOR2*/
}

Estil "Tardor" (tons ataronjats clars):

a:link, a:visited{
	color: #4E7104;/*COLOR4*/
}
 
a:hover{
	color: #CD6000; /*COLOR1*/
}
 
#theme_header_top{
	background-color: #344D00; /*COLOR3*/
}
 
#theme_header h1, #theme_header h1 a{
	color: #CD6000; /*COLOR1*/
}
 
#theme_header h2{
	color: #344D00; /*COLOR3*/
}
 
#theme_navigation_bar{
	background-color: #B3CD7B; /*COLOR5*/
}
 
#theme_navigation_bar .selected, #theme_navigation_bar li:hover{
	background-color: #E68804; /*COLOR2*/
}
 
h4.z-block-title{
	background-color:#E68804; /*COLOR2*/
	border-color: #E68804; /*COLOR2*/
}

Si voleu provar aquestes combinacions d'estils heu d'editar el fitxer style3.css, esborrar tot el seu contingut i substituir-lo pel codi de l'estil que us interessi.

L'extensió css està a la llista d'extensions editables del gestor de fitxers. Això vol dir que podeu editar el full d'estils directament des dels fitxers del lloc. Per fer-ho només heu de clicar la icona que simbolitza un bolígraf que acompanya a cada fitxer de fulls d'estils. També podeu optar per fer com a la pràctica anterior i reanomenar el fitxer del servidor i pujar la versió nova.

Igual que en els dos entorns visuals vists a les pràctiques anteriors, en aquest també podeu modificar la imatge de la capçalera. L'única diferència respecte a les pràctiques anteriors és que la imatge s'ha de dir logo3.png.