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.
Post
