Campioni colore

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.

NOTA

La miniatura supporta il selettore di attributi state , 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 le proprietà CSS top, left, bottom e right. 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.

Consulta Sprite CSS .

NOTA

Questo pulsante supporta il selettore di attributi state , 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); 
}

In questa pagina