I campioni colore sono costituiti da una riga di miniature con pulsanti di scorrimento opzionali a sinistra e a destra. I campioni colore sono visibili sul desktop solo se tutte le miniature non possono adattarsi alla larghezza del contenitore. Sui dispositivi mobili, o se le miniature possono adattarsi alla larghezza del contenitore, i pulsanti di scorrimento non vengono visualizzati.
L’aspetto del contenitore dei campioni è controllato con il selettore di classe CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches
Proprietà CSS dei campioni colore
width |
Larghezza dei campioni. |
height |
Altezza dei campioni. |
bottom |
L’offset dei campioni verticali rispetto al contenitore del visualizzatore. |
Esempio: per impostare campioni con un’altezza di 100 pixel.
.s7mixedmediviewer .s7colorswatches .s7swatches {
height: 100px;
}
La spaziatura tra le miniature dei campioni viene controllata con il seguente selettore di classe CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell
Proprietà CSS |
Descrizione |
---|---|
margine |
Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma del margine sinistro e destro impostato per .s7thumbcell . |
Esempio
Impostare la spaziatura su dieci pixel sia verticalmente che orizzontalmente.
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
margin: 5px;
}
L’aspetto della singola miniatura viene controllato con il seguente selettore di classe CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb
Proprietà CSS |
Descrizione |
---|---|
larghezza |
Larghezza della miniatura. |
altezza |
Altezza della miniatura. |
border |
Bordo della miniatura. |
La miniatura supporta state
selettore di attributi, che può essere utilizzato per applicare skin diversi a diversi stati di miniatura. In particolare, state="selected"
corrisponde alla miniatura dell’immagine attualmente visualizzata nella vista principale, state="default"
corrisponde alle altre miniature e state="over"
viene utilizzato al passaggio del mouse.
Esempio : per impostare miniature con 56 x 56 pixel, sono disponibili un bordo predefinito grigio chiaro e un bordo selezionato grigio scuro.
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7colorswatches .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
L’aspetto dei pulsanti di scorrimento a sinistra e a destra è controllato con i seguenti selettori di classe CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton
Non è possibile posizionare i pulsanti di scorrimento utilizzando CSS top
, left
, bottom
e right
proprietà. Al contrario, la logica del visualizzatore li posiziona automaticamente.
Proprietà CSS |
Descrizione |
---|---|
larghezza |
Larghezza del pulsante di scorrimento. |
altezza |
Altezza del pulsante di scorrimento. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Vedi Sprite CSS . |
Questo pulsante supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante: up
, down
, over
e disabled
.
Esempio : per impostare pulsanti di scorrimento con 56 x 56 pixel e immagini diverse per ogni stato.
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}