La vista Preferiti è costituita da una colonna di miniature.
L’aspetto del contenitore della visualizzazione Preferiti è controllato dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7favoritesview
La posizione e l'altezza della vista Preferiti vengono gestite dalla vista; in CSS è possibile definire solo la larghezza.
Proprietà CSS della visualizzazione Preferiti
background-color |
Colore di sfondo della visualizzazione Preferiti. |
width |
Larghezza della vista. |
Esempio: per impostare una visualizzazione Preferiti larga 100 pixel con uno sfondo grigio semitrasparente.
.s7ecatalogsearchviewer .s7favoritesview {
width: 100px;
background-color: rgba(221, 221, 221, 0.5);
}
La spaziatura tra le miniature Preferiti è controllata dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell
Proprietà CSS delle miniature Preferiti
margine |
Dimensione del margine verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma del margine superiore e inferiore impostato per .s7thumbcell . |
Esempio: per impostare una spaziatura di dieci pixel.
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell {
margin: 5px;
}
L’aspetto di una singola miniatura viene controllato con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7favoritesview .s7thumb
Proprietà CSS delle miniature Preferiti
width |
Larghezza della miniatura. |
height |
Altezza della miniatura. |
bordo |
Bordo della miniatura. |
La miniatura supporta state
selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare: state="selected"
corrisponde alla miniatura selezionata di recente dall'utente. Mentre state="default"
corrisponde al resto delle miniature. E state="over"
al passaggio del mouse.
Esempio: per impostare miniature di 75 x 75 pixel, impostare un bordo predefinito grigio chiaro e un bordo selezionato grigio scuro.
.s7ecatalogsearchviewer .s7favoritesview .s7thumb {
width: 75px;
height: 75px;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="selected"] {
border: 1px solid #666666;
}
L’aspetto dell’etichetta delle miniature è controllato dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7favoritesview .s7label
Proprietà CSS dell'etichetta Preferiti
font-family |
Nome font. |
font-size |
Dimensione font. |
Esempio: per impostare etichette con un carattere Helvetica® da 14 pixel.
.s7ecatalogsearchviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}