Configuració de l'entorn visual Intraweb Bluegrace Àgora (pràctica opcional)

A la pràctica anterior vàreu veureu com fer algunes personalitzacions estètiques a l'entorn visual Intraweb XTEC (iw_xtec) utilitzant un full d'estils personalitzat. També vàreu veure com canviar el logotip de la capçalera. En aquesta pràctica veureu com fer el mateix amb l'entorn visual Intraweb Bluegrace Àgora (iw_bluegrace_agora).

Abans de fer aquesta pràctica és molt recomanable haver fet, com a mínim, una lectura ràpida de l'anterior, atès que s'hi expliquen alguns conceptes que es donen per coneguts.

Canvi de l'entorn visual predeterminat

Inicialment, l'entorn visual predeterminat de la intranet és l'Intraweb XTEC, però per poder veure els canvis que fareu en aquesta pràctica a l'entorn visual cal que el canvieu.

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

Aneu a AdministracióSistema.

Cliqueu al Gestor d'entorns visuals.

Feu clic a la icona verda de l'entorn visual Intraweb Bluegrace Àgora per establir-lo com a predeterminat (reviseu la pràctica 2 d'aquest mòdul si no sabeu com fer-ho).

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 i té un aspecte diferent. Tot i això, fixeu-vos que la distribució dels continguts és molt semblant, amb una capçalera i un peu però sense les columnes. Aquest és un tret distintiu d'aquest entorn visual: totes les interfícies d'administració, siguin del mòdul que siguin, apareixen sense columnes laterals.

Aquesta característica proporciona molt d'espai en el moment de fer tasques d'administració. En cas de voler accedir a algun dels blocs, només cal anar a la pàgina d'inici per visualitzar-los.

Així mateix, fixeu-vos que el menú horitzontal de la capçalera no ha canviat. Recordeu que aquest menú és totalment independent de l'entorn visual. Si voleu canviar la seva posició, els seus colors o la seva lletra, heu d'anar a l'administració del mòdul iw_vhmenu (Administració → Mòduls IW → Menú).

Aneu a la pàgina d'inici de la intranet. Ho podeu fer de dues maneres: fent clic al nom de la intranet a la capçalera o fent clic a l'opció Inici del menú horitzontal de la capçalera.

Observeu que les dues columnes laterals ara apareixen a la dreta. De les dues columnes, la que es troba més a la dreta ha mantingut la seva posició, mentre que l'altra, la de l'esquerra, ha intercanviat la seva posició amb la columna central.

Fixeu-vos que esteu veient els mateixos blocs a les mateixes columnes i que tots mostren la mateixa informació. Només ha canviat l'estètica. Tècnicament es pot utilitzar el full d'estils per amagar blocs i canviar la seva posició, però és una pràctica que no es recomana.

El canvi d'entorn visual només afecta a l'estètica, no afecta als continguts.

Modificació del full d'estils

Aneu a AdministracióMòduls IWFitxers del lloc.

Entreu al directori theme.

L'entorn visual Intraweb Bluegrace Àgora no utilitza els mateixos fitxers que l'Intraweb XTEC. Per tant, a diferència de la pràctica anterior no disposeu d'un full d'estils per descarregar i modificar. De tota manera, és possible veure el contingut del full d'estils.

Obriu una pestanya nova del navegador, sense perdre la intranet, i visiteu aquest URL:

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

Us apareixeran per pantalla els estils que estàveu buscant. Si en el vostre navegador feu Anomena i desa, podreu desar el full d'estils en un fitxer. Però en aquesta pràctica procedireu d'una altra manera.

A l'escriptori del vostre ordinador, creeu un fitxer de text buit amb el nom style2.css. Es molt important no crear-lo amb cap paquet ofimàtic. Si sou usuaris del Windows, utilitzeu el bloc de notes (Wordpad) i si sou usuaris de Linux, el gedit o el kate.

Fixeu-vos que el nom és diferent al del full d'estils utilitzat a la pràctica anterior, d'aquesta manera els dos fitxers poden conviure en el servidor. Si pugeu aquest full d'estils al directori theme del fitxers del lloc, podreu modificar els estils que heu vist a l'URL anterior. En aquesta pràctica, a diferència de l'anterior, en el fitxer d'estils només hi introduireu els atributs que canvien (també ho haguéssiu pogut fer així a la pràctica anterior).

Exemple 1: Modificar les amplades de les columnes de la pàgina d'inici

Els estils que defineixen les amplades de les columnes de la pàgina d'inici són els següents:

  • #content: afecta a la columna principal o de continguts.
  • #sidebar-left: afecta a la columna de l'esquerra (que ara ha intercanviat la posició amb la central).
  • #sidebar-right: afecta a la columna de la dreta.

El canvi que fareu ara és treure amplada a la columna principal per donar-lo a la columna de la dreta. És molt important que si amplieu una columna en reduïu una altra, altrament, la columna de la dreta no hi cabrà i es desplaçarà fins al fons de la pàgina.

El codi original és aquest:

#content {
  font-size:15px;
  float:left;
  width:600px;
  padding:0 0 0 1em;
}
 
#sidebar-left {
  background:#f1fbfe;
  border:1px #ccc dashed;
  font-size:1em;
  float:left;
  margin-top:20px;
  margin-left:20px;
  width:170px;
  padding:2px 1px 0px 11px;
}
 
#sidebar-right {
  font-size:1em;
  float:left;
  margin-top:10px;
  margin-left:14px;
  width:147px;
  padding:1em .0em 2em .3em;
}

Podríeu incloure tots els atributs en el full d'estils, però no és necessari. Només incloureu els que canvien.

Obriu el fitxer style2.css que teniu en el vostre escriptori. Ha d'estar buit. Si té contingut, esborreu-lo.

Copieu-hi el codi següent:

#content {
  width:550px;
}
 
#sidebar-right {
  width:200px;
}

Fixeu-vos que hi ha 50 píxels de la columna principal que passen a la de la dreta. Per fer números rodons, s'han afegit 3 píxels més.

Deseu el fitxer style2.css.

Aneu als fitxers del lloc i entreu a la carpeta theme.

Pugeu el fitxer style2.css.

Si tot ha anat bé, veureu com la columna principal s'ha reduït, mentre que la de la dreta s'ha ampliat.

Exemple 2: Modificar les columnes laterals

L'entorn visual Intraweb Bluegrace Àgora està construït d'una manera que fa que no sigui possible canviar el color de fons de la intranet tot obtenint un resultat acceptable. En canvi, sí és possible canviar els colors de fons de les columnes. Tot seguit veureu com.

Obriu el fitxer style2.css que teniu en el vostre escriptori.

Copieu-hi el contingut següent:

#content {
  width:550px;
}
 
#sidebar-left {
  background:#eee;
  border:1px #ccc dashed;
}
 
#sidebar-right {
  width:200px;
  background:#eee;
  border:1px #ccc dashed;
  margin-top:21px;
  padding-top:0px;
}

Deseu el fitxer style2.css.

A més de la informació d'amplada (width) que hi havia anteriorment, s'han canviat els colors de fons (background) i s'han afegit vores discontínues d'1 píxel d'amplada (border).

En el cas de la columna de la dreta s'han ajustat les distàncies a la capçalera per aconseguir que el seu contingut quedi a la mateixa alçada que el de la columna de l'esquerra. Això s'ha fet ampliant la distància de la vora a la capçalera (margin-top) i reduint la distància dels continguts a la vora (padding-top).

La dificultat d'aquests canvis està en conèixer quins són els atributs a modificar. Tots ells són atributs estàndard dels fulls d'estils i estan explicats en els manuals de CSS que es poden trobar per Internet. Si teniu interès en algun canvi específic i no sabeu com fer-ho, la millor opció es preguntar al vostre formador al fòrum de l'aula.

Per veure els canvis en acció, heu de pujar de nou el full d'estils als fitxers del lloc. Abans de pujar la nova versió heu d'esborrar el full existent o canviar-li el nom perquè la intranet no sobreescriu fitxers existents.

Aneu als fitxers del lloc i entreu a la carpeta theme.

Esborreu el fitxer style2.css que heu pujat abans (en general és més prudent canviar el nom).

Pugeu el fitxer style2.css.

Aneu a la pàgina d'inici de la intranet i observeu el resultat.

Si en qualsevol moment voleu recuperar l'estètica original, només heu de canviar el nom al full d'estils style2.css. D'aquesta manera la intranet no l'utilitzarà.

Canvi del logotip

Com en el cas del full d'estils, l'entorn visual Intraweb Bluegrace Àgora té reservat un nom específic per a la imatge de la capçalera. En aquest cas és logo2.png.

Tot el que es va comentar a la pràctica anterior sobre el canvi de la imatge de la capçalera és aplicable en aquest cas. Per tant, si disposeu d'un logotip del centre el podeu utilitzar en aquest entorn visual. L'únic requisit és que estigui en format png. Si el teniu en un altre format, haureu d'utilitzar un programa d'edició fotogràfica per transformar-lo.

El full d'estils de l'entorn visual Intraweb Bluegrace Àgora s'ha de pujar al directori theme dels fitxers del lloc amb el nom style2.css i el logotip amb el nom logo2.png. El primer ha de ser un fitxer de text sense format i el segon una imatge en format png.