A exibição Favoritos consiste em uma coluna de imagens em miniatura.
A aparência do contêiner de exibição Favoritos é controlada com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7favoritesview
A posição e a altura da exibição Favoritos são gerenciadas pela exibição; em CSS, só é possível definir a largura.
Propriedades CSS da exibição Favoritos
cor do fundo |
Cor do plano de fundo da exibição Favoritos. |
width |
Largura da exibição. |
Exemplo - Para configurar uma exibição Favoritos com 100 pixels de largura com um plano de fundo cinza semitransparente:
.s7ecatalogviewer .s7favoritesview {
width: 100px;
background-color: rgba(221, 221, 221, 0.5);
}
O espaçamento entre miniaturas Favoritos é controlado com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7favoritesview .s7thumbcell
Propriedades CSS das miniaturas Favoritas
margem |
O tamanho da margem vertical em torno de cada miniatura. O espaçamento real das miniaturas é igual à soma das margens superior e inferior definidas para .s7thumbcell . |
Exemplo - Para configurar um espaçamento de dez pixels:
.s7ecatalogviewer .s7favoritesview .s7thumbcell {
margin: 5px;
}
A aparência da miniatura individual é controlada com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7favoritesview .s7thumb
Propriedades CSS das miniaturas Favoritas
largura |
Largura da miniatura. |
altura |
Altura da miniatura. |
border |
Borda da miniatura. |
A miniatura é compatível com o state
seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em especial, state="selected"
corresponde à miniatura recentemente selecionada pelo usuário. O atributo state="default"
corresponde ao restante das miniaturas. E, o atributo state="over"
é usada ao passar o mouse.
Exemplo - Para configurar miniaturas com 75 x 75 pixels, tenha uma borda padrão cinza-claro e uma borda cinza-escura selecionada:
.s7ecatalogviewer .s7favoritesview .s7thumb {
width: 75px;
height: 75px;
}
.s7ecatalogviewer .s7favoritesview .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7ecatalogviewer .s7favoritesview .s7thumb[state="selected"] {
border: 1px solid #666666;
}
A aparência do rótulo de miniatura é controlada com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7favoritesview .s7label
Propriedades CSS do rótulo Favoritos
família de fontes |
Nome da fonte. |
tamanho da fonte |
Tamanho da fonte. |
Exemplo - Para configurar rótulos com uma fonte Helvetica® de 14 pixels:
.s7ecatalogviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}