Huvudfärgrutor main-swatches
Huvudfärgrutor består av en rad med miniatyrbilder med valfria rullningsknappar på vänster och höger sida. Rullningsknappar visas bara på skrivbordet om alla miniatyrer inte får plats i behållarens bredd. På mobila enheter, eller om miniatyrbilder får plats i behållarbredden, visas inte rullningsknappar.
Utseendet på färgrutebehållaren styrs med CSS-klassväljaren:
.s7mixedmediaviewer .s7swatches
CSS-egenskaper för färgrutorna
Exempel - för att ställa in färgrutor med en höjd på 100 pixlar.
.s7mixedmediviewer .s7swatches {
height: 100px;
}
Avståndet mellan färgrutans miniatyrbilder styrs med följande CSS-klassväljare:
.s7mixedmediaviewer .s7swatches .s7thumbcell
Exempel
Om du vill ange avstånd till tio pixlar både lodrätt och vågrätt.
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
Utseendet på den enskilda miniatyrbilden styrs av följande CSS-klassväljare:
.s7mixedmediaviewer .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.
.s7mixedmediaviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Resurstypen visas som en ikon ovanpå miniatyrbilden och styrs med följande CSS-klassväljare:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
Övertäckningen stöder type attributväljare med följande möjliga värden: image (för enstaka bilder), swatchset (för uppsättningar av färgrutor), spinset (för snurruppsättningar), och video (för enstaka videor eller adaptiva videouppsättningar).
Exempel - om du vill ställa in ikonövertäckningar för snurruppsättningar, färgruteuppsättningar och videoklipp:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
background-image: url(images/v2/ThumbOverlayVideo.png);
}
Utseendet på vänster och höger rullningsknapp styrs av följande CSS-klassväljare:
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton
Det går inte att placera rullningsknappar med CSS top, left, bottomoch right egenskaper. 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 för mer information.
Exempel - för att ställa in rullningsknappar som är 56 x 56 pixlar och har olika teckningar för varje läge.
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}