Visualização favorita

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.

OBSERVAÇÃO

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; 
}

Nesta página