Icona diversa per ogni sezione
E' mezzo secolo che sbavate dietro a queste bellissime iconcine inserite al posto degli On/Off? Avete provato in tutti i modi a capire quale fosse il segreto di cotanta maestosità? Eccovelo svelato!
Innanzitutto andate in
Modifica Immagini nel pannello di amministrazione e inserite:
in
C_ON e C_ON_RES il codice
CODICE
<div class="ICONA_ON"></div>
e in
C_OFF, C_OFF_RES e C_LOCKED inserite
.
Poi si va in
Modifica Colori e Stili e si inserisce:
CODICE
.board .aa div {background-position: center; background-repeat: no-repeat}
#f000000 .ICONA_ON {width: 30px; height: 30px; background-image: url(http://indirizzo_immagine.gif)}
#f000000 .ICONA_OFF {width: 30px; height: 30px; background-image: url(http://indirizzo_immagine.gif); filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5}
Ovviamente il codice va usato per ogni sezione, non basta inserirlo una volta.
Andiamo ad analizzare questo codice:
CODICE
.board .aa div {background-position: center; background-repeat: no-repeat
non va modificato.
CODICE
#f000000 .ICONA_ON {width: LUNGHEZZApx; height: ALTEZZApx; background-image: url(http://indirizzo_immagine.gif)}
è il codice con cui si imposta l'icona del C_ON: dove c'è width mettiamo la lunghezza e al posto di height l'altezza, ovviamente lasciando px.
Al posto di 000000, dopo f, bisogna inserire l'ID della sezione che, ad esempio, per questa sezione è
http://iloveskinning.forumfree.net/?f=7387437 (dovete prendere solo il numero e non l'intero link).
Al posto di
http://indirizzo_immagine.gif inserite, ovviamente, l'indirizzo della vostra icona.
CODICE
#f000000 .ICONA_OFF {width: 30px; height: 30px; background-image: url(http://indirizzo_immagine.gif); filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5}
Stesse modifiche valgono per questo codice, l'unica differenza sta nel
filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5 che serve per abbassare l'opacità, non è quindi necessario toglierla all'imagine con photoshop, potete tranquillamente inserire la stessa immagine inserita per l'ON.
Spero che il tutorial sia chiaro, per qualsiasi problema chiedete tranquillamente! ^^
-------------------------
Essendo un codice non creato dal forum l'inserimento dei credits non è obbligatorio, sono però molto graditi poichè per spiegarvi come realizzare l'effetto è stato speso tempo per creare una guida dettagliata, perciò, se volete inserirli, potete utilizzare questo codice:
CODICE
Si ringrazia per lo showcase <b>aetas</b> // <a href="http://justfeeling.forumfree.net/"><b>Just Feeling</b></a>
