Header ja_purity

[darinic]

Ciao.Premetto che sono un neofita e sto imparando pian pianino. Ho preso come riferimento il template ja_purity e sto cercando pian pianino di personalizzarlo. Ho qualche problema con l'header. Premetto che ho seguito la giuda presente nel wiki e relativa alla personalizzazione del tempate ja_purity. Ho fatto una serie di prove ma c'è qualcosa che non mi torna perché non lo capisco. Di seguito mostro la parte di codice interessata e presente nel file .css:

Codice: [Seleziona]

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

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

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

#ja-header a {
color: #CCCCCC;
Quello che vorrei fare io (per prova e per cercare di capire) è dimensionare l'header a mio piacimento (800 x 200 px), sostituire l'header-mask.png e aggiungere qualche altro file headers al'interno della cartella header oltre ai già presenti header1, header2 e header3.
Ebbene ho fatto quanto segue:
nel codice ja-headerwrap che, a quanto mi sembra di aver capito, riguarda la dimensione, lo sfondo e il colore della testata, ho sostituito 80 con 200.Il risultato è stato un ispessimento della testata (OK)

il codice #ja-header non l'ho toccato. Se non sbaglio fa riferimento alla posizione di logo e slogan nell'header (almeno così ho visto facendo delle prove cambiando il valore in height)

nel codice ja-headermask ho sostituito 80 con 200 nella parte height e 602 con 800 nella parte width, inoltre ho sostituito l'header-mask.png con uno fatto da me (si tratta in pratica di una striscia 800 x 200 grigio chiara) e ho aggiunto un header4 alla cartelle header. L'esito è stato che il nuovo header-mask.png si è sovrapposto agli header1-2-3-4, nascondendoli Inoltrenonostante l'header4 sia 800 x 200 (ovvero quanto la dimensione configurata della testata, questo non occupa l'intera testata ma solo una parte, e nella parte di sinistra rimane uno spazio bianco...

Insomma..c'èqualcosa che mi sfugge. Non ho ben chiaro il codice credo..Ad esempio, visto il background e il color, a che serve l'header-mask.png?

[tonicopi]

a che serve l'header-mask.png?

Serve  a mettere una immagine con una determinata trasparenza che filtra le immagini sottostanti. Come ti sei accorto non puoi sostituirla con una  tua immagine opaca 

Per il resto sei sulla strada buona... Studia come hanno fatto qui:
http://www.gasia.eu/

Ma usi gli strumenti giusti?
http://www.joomla.it/articoli-della-community/797-tre-moschettieri-al-servizio-di-joomla.html
 

[darinic]

Ciao Tonicopy. Subito dopo aver postato ho cercato di arrangiarmi (forse avrei dovuto farlo prima di postare..ma i consigli anche a posteriori sono sempre utili) e così ho installato l'estensione Firebug su Firefox che mi è stata utilissima e che mi ha chiarito non poco le idee. Adesso installo anche gli altri due strumenti descritti nell'articolo e cerco di capirci ancora di più..
Direi che non è per niente semplice personalizzare il template, soprattutto per chi, come me, non ha dimistichezza con il codice html e php..
Ho sostituito gli header a quelli presenti (pertinenti con il tema del sito) e ho sostituito anche il colore di background; inoltre ho modificato l'header-mask.png (con il colore di pertineza). Non è ancora a posto comunque.

Grazie dei consigli