giovedì 6 novembre 2008

Joomla 1.5, personalizzare il template JA Purity

Sul sito ufficiale di Joomla è presente un tutorial che mostra come personalizzare il template JA Purity incluso nell'installazione base del cms. Non è molto dettagliato, ma abbastanza interessante specialmente per i principianti, per cui credo sia utile fare una sintesi in Italiano delle parti a mio parere più importanti.

Essendo JA Purity un template standard, può essere modificato da un aggiornamento di Joomla quindi è bene mantenere una copia della versione modificata.

Sostituire il logo

Il file del logo si chiama logo.png e si trova in

.../templates/ja_purity/images/

Per sostituirlo basta creare un'immagine con lo stesso nome e dimensioni (207 x 80 pixel) e trasferirla via FTP nella stessa cartella sovrascrivendo il file originale.

Modificare la posizione del logo

Logo come immagine

Occorre modificare il file template.css che si trova in

.../templates/ja_purity/css/

A partire dalla linea 957 questa è la parte da modificare

h1.logo a {
  width: 208px;
  display: block;
  background: url(../images/logo.png) no-repeat;
  height: 80px;
  position: absolute; /*Modificata da relative a absolute*/
  top: 10px;  /*Aggiunta*/
  left: 10px; /*Aggiunta*/
  z-index: 100;
}

Chiaramente top e left vanno modificati in base alla posizione che volete per il logo.

Logo come testo

Il file da modificare è sempre lo stesso template.css. A partire dalla riga 972 modificare

h1.logo-text a {
  color: #CCCCCC !important;
  text-decoration: none;
  outline: none;
  position: absolute;
  bottom: 40px; /*Modificare*/
  left: 5px; /*Modificare*/
}

p.site-slogan {
  margin: 0;
  padding: 0;
  padding: 2px 5px;
  color: #FFFFFF;
  background: #444444;
  font-size: 92%;
  position: absolute;
  bottom: 20px; /*Modificare*/
  left: 0; /*Modificare*/
}

Per questa modifica come per quella precedente è consigliabile l'uso di Firefox con il plugin Firebug per fare delle prove 'in diretta' e trovare i valori giusti per bottom e left.

Ridimensionare la testata

A partire dalla linea 921 di template.css trovate

/* HEADER
-------------------------------------- */
#ja-headerwrap {
  background: #333333;
  color: #CCCCCC;
  line-height: normal;
  height: 80px; /*Modificare*/
}

#ja-header {
  position: relative;
  height: 80px; /*Modificare*/
}

.ja-headermask {
  width: 602px;
  display: block;
  background: url(../images/header-mask.png) no-repeat top right;
  height: 80px; /*Modificare*/
  position: absolute;
  top: 0;
  right: -1px;
}

Modificare sulle linee indicate il valore 80px con quello della nuova altezza della testata.

Modificata l'altezza della testata potrebbe essere necessario modificare anche le dimensioni del logo. Effettuata la modifica al file immagine logo.png già visto in precedenza, va aggiustata questa parte di template.css dalla linea 957

h1.logo a {
  width: 208px; /*Larghezza del logo*/
  display: block;
  background: url(../images/logo.png) no-repeat;
  height: 80px; /*Altezza del logo*/
  position: relative;
  z-index: 100;
}

Se si modifica l'altezza della testata bisogna modificare anche l'altezza delle seguenti immagini

...\templates\ja_purity\images\header-mask.png
...\templates\ja_purity\styles\header\blue\images\header-mask.png
...\templates\ja_purity\styles\header\green\images\header-mask.png

Bisogna utilizzare un programma di grafica (Gimp, Photoshop, Paint.NET) per ricreare queste immagini della stessa altezza della testata, mantenendo il colore e il riempimento a gradiente.

Sostituire le immagini di testata

In ...\templates\ja_purity\images\ ci sono tre immagini: header1.jpg, header2.jpg, header3.jpg. Possono ovviamente essere sostituite con altre più in tema con l'argomento del vostro sito, basta creare tre immagini delle stesse dimensioni (600 x 80 pixel) e con lo stesso nome e rimpiazzare le immagini originali.

Va però tenuto presente che l'altezza delle immagini deve essere uguale a quella della testata. Se create immagini di altezza diversa da 80 pixel seguite le istruzioni sopra riportate per ridimensionare la testata.

È tutto. Spendere un po' di tempo a personalizzare JA Purity può essere una buona idea per differenziare il proprio sito da tutti gli altri che utilizzano questo popolare template.

5 commenti:

Anonimo ha detto...

bravo, chiaro e preciso !

Michele ha detto...

Mi pare molto chiaro. Talmente chiaro che non capisco come possa sbagliare. :-)
Ho sostuito l'immagine del logo, ma per magia mi appere sempre quella di joomla. Come può essere?

Massimo ha detto...

O non hai modificato il file giusto, o hai fatto l'upload del file del logo nel posto sbagliato, o stai vedendo una versione vecchia della pagina.

1) Aiutati con Firebug per capire bene il percorso dell'immagine del logo e accertati di aver fatto l'upload nella cartella giusta.

2) Pulisci la cache del browser.

enzo ha detto...

Ti pongo una ipotesi aggiuntiva che mi interesserebbe risolvere.
Come fare per spostare più a destra le immagini di testata e di conseguenza la header-mask.pn?

Massimo ha detto...

Per risolvere questo tipo di situazioni c'è una sola strada: imparare HTML e css. C'è ancora chi scrive che queste conoscenze non sono necessarie se si usa Joomla, ma sfortunatamente non è così.

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.