Barra per skin II

.Kobrax.

Posted on 29/12/2009, 16:01

User deleted

Per la barra inferiore il procedimento è sostanzialmente lo stesso che per la barra superiore, di solito questa viene fatta piu' bassa, ma nulla vi vieta di farla come quella superiore. Per comodita' riprendo le immagini del tutorial pre la barra superiore

Facciamo un lavoro unico e poi lo taglieremo in tre pezzi, importante è che siano tutti della stessa altezza

.msub_left

Questa è la parte sinistra e l'URL dell'immagine dopo averla hostata dovra' essere inserito nel codice della skin.
Dobbiamo stare attenti alle misure per poterle inserire nel codice nel modo giusto, l'immagine usata è 148x35

.msub_center

Questa è la parte centrale della barra, per avere un disegno uniforme deve essere omogenea, dato che il motivo viene ripetuto lungo l'asse X

.msub_right

Questa è la parte destra della barra, anche per lei dobbiamo stare attenti alle misure per inserirle in modo giusto nel codice, nel mio caso è 132x35

Fatto questo, in Amministrazione/Grafica/Colori e stili andremo a modificare questa parte di codice

CODICE

.msub {height: altezza della barra px;}
.msub_left {width: lunghezza pezzettino sinistro barra px; background-image: url(Pezzo sinistro barra hostato); background-repeat: no-repeat}
.msub_center {background-image: url(pezzo centrale barra costato); background-repeat: repeat-x}
.msub_right {width: lunghezza pezzo destro barra px; background-image: url(pezzo destro barra hostato); background-repeat: no-repeat}

nel mio caso il codice corretto, tenedo conto delle misure è:

CODICE

.msub {height: 35px; background-image: none}
.msub_left {width: 148px; background-image: url(http://i48.tinypic.com/2j1kh0o.png); background-repeat: no-repeat; background-position: bottom}
.msub_center {background-image: url(http://i47.tinypic.com/30dgxax.png); background-repeat: repeat-x; background-position: bottom}
.msub_right {width: 132px; background-image: url(http://i49.tinypic.com/s4qvja.png); background-repeat: no-repeat; background-position: bottom}

0 replies since 29/12/2009, 16:01 106 views

Barra per skin II

parte inferiore