[CSS] Icone "C_ON" e "C_OFF" diverse per ogni sezione

« Older   Newer »
  Share  
rabyt
view post Posted on 23/11/2011, 17:29     +1   -1




In questa guida vi spiegherò come avere le icone di indicazione attività dei topics (c_on, c_off, ecc) diverse per ogni sezione, in modo leggero e semplice


Iniziamo inserendo in Immagini - Box Modifica Rapida, sostituendo all'attuale parte del codice, questo:
CODICE
C_ON:<div class="c_on"></div>
C_OFF:<div class="c_on" style="opacity: 0.3; filter:alpha(opacity=30); z-index: 1"></div>
C_ON_RES:<div class="c_on"></div>
C_OFF_RES:<div class="c_on" style="opacity: 0.3; filter:alpha(opacity=30); z-index: 1"></div>
C_LOCKED:<div class="c_on"></div>
che servirà a definire gli stili che devono assumere le icone nelle diverse circostanze (in questo caso la trasparenza in caso di topics già letti).

Adesso inseriamo in Colori e stili questo:
CODICE
/* ICONE */
#fID .c_on {background-image: url(IMMAGINE); width: Npx; height: Npx}</style>
ci servirà a definire esattamente quale icone far visualizzare, le dimensioni e sopratutto in che sezioni far visualizzare l'icona. Dovremo inserire questo codice per ogni sezione.

Adesso analizziamo il codice nelle sue variabili

CODICE
/* ICONE */
Sono i credits invisibili nel forum che vi preghiamo di mantenere, giusto un ringraziamento
CODICE
#fID
indica l'ID della sezione a cui andremo ad attribuire l'icona, dovete cambiare "ID" con l'ID della sezione
CODICE
background-image: url(IMMAGINE)
indica esattamente il link dell'icona che vogliamo far vedere, dovrete sostituire IMMAGINE con il link apposito
CODICE
width: Npx
indica la larghezza dell'immagine inserita, dovete sostituire N con il numero della larghezza (in pixel)
CODICE
height: Npx
indica l'altezza dell'immagine inserita, dovrete sostituire il N con il numero dell'altezza (in pixel)
 
Top
0 replies since 23/11/2011, 17:29   50 views
  Share