A visualização Favoritos consiste em uma coluna de imagens em miniatura.
A aparência da visualização favorita é controlada pelo seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7favoritesview
A posição e a altura da visualização Favoritos são geridas pela visualização; em CSS, é possível definir somente a largura.
Propriedades de CSS da visualização Favoritos
cor de fundo |
Cor do plano de fundo da visualização Favoritos. |
width |
Largura da visualização. |
Exemplo - para configurar uma visualização Favoritos com 100 pixels de largura com um plano de fundo cinza semitransparente.
.s7ecatalogsearchviewer .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:
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell
Propriedades de CSS das miniaturas Favoritos
margem |
O tamanho da margem vertical ao redor de cada miniatura. O espaçamento real das miniaturas é igual à soma das margens superior e inferior definidas para .s7thumbcell . |
Exemplo - para configurar o espaçamento de 10 pixels.
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell {
margin: 5px;
}
A aparência da miniatura individual é controlada com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7favoritesview .s7thumb
Propriedades de CSS das miniaturas Favoritos
largura |
Largura da miniatura. |
altura |
Altura da miniatura. |
fronteira |
Borda da miniatura. |
A miniatura suporta o seletor de atributos state
, que pode ser usado para aplicar diferentes capas a diferentes estados de miniaturas. Especificamente, state="selected"
corresponde à miniatura recentemente selecionada pelo usuário. state="default"
corresponde ao resto das miniaturas. E state="over"
é usado ao passar o mouse.
Exemplo - para configurar miniaturas com 75 x 75 pixels, uma borda padrão cinza claro e uma borda cinza escura selecionada.
.s7ecatalogsearchviewer .s7favoritesview .s7thumb {
width: 75px;
height: 75px;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="selected"] {
border: 1px solid #666666;
}
A aparência da etiqueta em miniatura é controlada com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7favoritesview .s7label
Propriedades de CSS do rótulo Favoritos
família de fontes |
Nome da fonte. |
font-size |
Tamanho da fonte. |
Exemplo - para configurar rótulos com uma fonte Helvetica de 14 pixels.
.s7ecatalogsearchviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}