Färgrutor swatches
Färgrutor består av en rad med miniatyrbilder med rullningsknappar till vänster och höger. Rullningsknappar visas bara på skrivbordet om alla miniatyrer inte får plats i behållarbredden. På mobila enheter, eller om miniatyrbilder får plats i behållarbredden, visas inte rullningsknapparna.
.s7zoomviewer .s7swatches
CSS-egenskaper för huvudvisningsområdet
Utseendet på färgrutebehållaren styrs med följande CSS-klassväljare:
.s7zoomviewer .s7zoomresetbutton
Exempel - för att ställa in färgrutor till 460 x 100 pixlar.
.s7zoomviewer .s7swatches {
width: 460px;
height: 100px;
}
Avståndet mellan färgrutans miniatyrbilder styrs med följande CSS-klassväljare:
.s7zoomviewer .s7swatches .s7thumbcell
Exempel
Om du vill ange avstånd till tio pixlar både lodrätt och vågrätt.
.s7zoomviewer .s7swatches .s7thumbcell {
margin: 5px;
}
Utseendet på den enskilda miniatyrbilden styrs av följande CSS-klassväljare:
.s7zoomviewer .s7swatches .s7thumb
state attributväljare, som kan användas för att tillämpa olika skal på olika miniatyrlägen. Särskilt gäller följande: state="selected" motsvarar miniatyrbilden för den bild som visas i huvudvyn, state="default" motsvarar resten av miniatyrbilderna, och state="over" används vid hovring av musen.Exempel - Om du vill ställa in miniatyrbilder som är 56 x 56 pixlar har du en ljusgrå standardkant och en mörkgrå markerad kant.
.s7zoomviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7zoomviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Utseendet på vänster och höger rullningsknapp styrs av följande CSS-klassväljare:
.s7zoomviewer .s7swatches .s7scrollleftbutton
.s7zoomviewer .s7swatches .s7scrollrightbutton
Det går inte att placera rullningsknappar med CSS-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.
Placera inuti en teckningssprite, om CSS-sprites används.
Se CSS-fragment.
state attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen: up, down, overoch disabled.Knappens tips kan lokaliseras. Se Lokalisering av användargränssnittselement.
Exempel - för att ställa in rullningsknappar som är 56 x 56 pixlar och har olika teckningar för varje läge.
.s7zoomviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}