Autore Topic: [v10 Pro - 11 Pro] Personalizzare frecce ShowBox (CSS2)  (Letto 495 volte)

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1743
    • lemonsong's links
[v10 Pro - 11 Pro] Personalizzare frecce ShowBox (CSS2)
« il: 13 Dicembre, 2014, 22:51:14 »
Nelle versioni Professional è possibile scegliere una freccia (stile pulsante) tra le 18 disponibili.

Probabilmente esistono diversi modi per utilizzare una nostra immagine personalizzata.
In questo esempio è stato usato un semplice CSS: http://lemonsong.altervista.org/test_imShowBox_arrows_Pro/

Qui il codice commentato da inserire prima della chiusura del tag HEAD:

Citazione
<style>
img[src="res/b12_l.png"] { /* nome dell'immagine della freccia sinistra scelta da programma */
height:0;
/* annullo altezza immagine scelta da programma */
width:0;
/* annullo larghezza immagine scelta da programma */
background: transparent url("files/arrow_l.png") no-repeat center;
/* percorso e nome della nuova freccia sinistra */
padding:20px;
/* spazio per la nuova immagine */
}
img[src="res/b12_r.png"] {
/* nome dell'immagine della freccia destra scelta da programma */
height:0;
/* annullo altezza immagine scelta da programma */
width:0;
/* annullo larghezza immagine scelta da programma */
background: transparent url("files/arrow_r.png") no-repeat center;
/* percorso e nome della nuova freccia destra */
padding:20px;
/* spazio per la nuova immagine */
}
</style>


Per rendere più semplice la personalizzazione conviene scegliere, da programma, un'immagine con dimensioni identiche a quelle della nuova immagine.
In questo esempio è stata scelta, da programma, un'immagine quadrata (40px):

[ Guests cannot view attachments ]

Il CSS annulla le dimensioni dell'immagine scelta da programma (potrebbe anche bastare solo height:0) e definisce lo spazio della nuova immagine, impostata come sfondo, con un padding il cui valore dovrà essere calcolato in funzione delle dimensioni e forma della nuova immagine.

Ad esempio padding: 20px crea uno spazio quadrato di 40x40px


Grazie stesil per l'aiuto.