Painel de resultados da pesquisa

O painel de resultados da pesquisa consiste na caixa de entrada da pesquisa na parte superior e na área principal onde as mensagens informativas ou os resultados da pesquisa são exibidos.

Propriedades CSS da área principal do visualizador

Quando o painel está ativo, a interface do usuário do visualizador é coberta com um preenchimento semitransparente. A cor e a opacidade desse preenchimento são controladas pelo seguinte seletor de classe CSS:

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Propriedade CSS

Descrição

cor do fundo

Cor da sobreposição.

opacidade

Opacidade da cor.

O painel de resultados da pesquisa sempre ocupa toda a altura disponível do visualizador. No entanto, é possível configurar a largura. É possível definir a largura como um valor absoluto de pixel, que é uma configuração padrão para pontos de interrupção de médio e grande porte. Ou você pode definir a largura como 100% para fazer com que o painel de resultados de pesquisa ocupe toda a área do visualizador. A largura do painel é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

Propriedade CSS do espaço do resultado da pesquisa

width

Largura do espaço do resultado da pesquisa.

Exemplo - para configurar um painel de resultados de pesquisa de 250 pixels em pontos de interrupção de tamanho grande e médio e usar um painel de tamanho completo em um ponto de interrupção de tamanho pequeno:

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel {
 width:250px;
}
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel {
 width:100%;
}

A parte superior do painel de resultados da pesquisa é dedicada à caixa de entrada da pesquisa. O preenchimento nas laterais da caixa de entrada é controlado pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

Propriedades CSS do contêiner de entrada de pesquisa

preenchimento

Preenchimento em torno da caixa de entrada.

O campo de entrada de pesquisa é controlado pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Propriedades CSS do campo de entrada de pesquisa

altura

Altura do campo de entrada de pesquisa.

preenchimento à esquerda

O preenchimento interno entre os limites do campo de entrada e o texto de entrada.

border

Borda do campo de entrada de pesquisa.

margem

Margem do campo de entrada de pesquisa

tamanho da fonte

Tamanho da fonte do texto.

Exemplo - para configurar um campo de entrada de pesquisa com altura de 0 pixel e fonte de texto de 14 pixels:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput {
 padding-left:5px;
 height:30px;
 font-size:14px;
}

O botão de pesquisa à esquerda do campo de entrada de pesquisa no formulário do "vidro de aparência" por padrão é controlado pelo seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

Propriedades CSS do botão de entrada de pesquisa

largura

Largura do botão de entrada de pesquisa.

altura

Altura do botão de entrada de pesquisa.

imagem de fundo

O URL para a imagem do ícone de "vidro de aparência".

tamanho do plano de fundo

O tamanho do ícone de "vidro de aparência".

border

Borda do botão de entrada de pesquisa.

margem

Margem do botão de entrada de pesquisa.

Exemplo - Para configurar um botão de pesquisa com ícone de "vidro de aparência" de 26 x 26 pixels; 30 pixels de tamanho com uma borda de 1 pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton {
 width:30px;
 height:30px;
 background-size:26px 26px;
 background-image: url(images/v2/Search_form_field.png);
 font-size:14px;
 border: 1px solid #696969;
}

O painel de resultados da pesquisa pode exibir um prompt textual quando o recurso é chamado pela primeira vez. E também mostra uma mensagem quando a pesquisa de um usuário não retornou nenhum resultado. Em todos os casos, o texto aparece na parte principal do painel de resultados da pesquisa e é controlado pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

Propriedades CSS das informações de pesquisa

color

Cor do texto.

família de fontes

Nome da fonte do texto.

alinhamento de fonte

Alinhamento horizontal do texto.

tamanho da fonte

Tamanho do texto da fonte.

OBSERVAÇÃO

Esse painel de texto é compatível com o state seletor de atributos, que pode ser usado para aplicar estilos diferentes a mensagens de texto diferentes. Em especial, state='prompt' corresponde ao prompt de texto exibido quando o painel é chamado pela primeira vez. O state='results' corresponde ao texto com informações sobre ocorrências de pesquisa. E finalmente, o state='no_results' corresponde ao texto mostrado quando a consulta de pesquisa não retornou nenhum resultado.

O texto da mensagem pode ser localizado. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar um painel de texto que use uma fonte cinza de 18 pixels:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
 font-size: 18px;
 color: #696969;
}

Os resultados da pesquisa são renderizados como uma única coluna ou linha de miniaturas para páginas com ocorrências de pesquisa. O espaçamento entre as miniaturas dos resultados da pesquisa é controlado com o seguinte seletor de classe CSS:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

Propriedades CSS das células de miniatura

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:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell {
 margin: 5px;
}

A aparência de miniaturas individuais é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

Propriedades CSS da miniatura

largura

Largura da miniatura.

altura

Altura da miniatura.

border

Borda da miniatura.

Exemplo - Para configurar miniaturas com 215 x 129 pixels, tenha uma borda padrão cinza-claro e uma borda cinza-escura selecionada:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
 width: 215px;
 height: 129px;
}

A aparência do rótulo de miniatura é controlada com o seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

Propriedades CSS do rótulo

color

Cor do texto.

família de fontes

Nome da fonte do texto.

tamanho da fonte

Tamanho da fonte do texto.

Exemplo - Para configurar rótulos que usam fontes Helvetica® de 12 pixels, cinza:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
 font-family: Helvetica,sans-serif;
 color: #4c4c4c;
 font-size: 12px;
}

Em sistemas que usam entrada de mouse, dois botões de rolagem são exibidos na parte inferior do painel de resultados da pesquisa para que o usuário role pelos resultados da pesquisa. A aparência dos botões de rolagem para cima e para baixo é controlada pelos seguintes seletores de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

Não é possível posicionar botões de rolagem usando propriedades CSS superior, esquerda, inferior e direita. Em vez disso, a lógica do visualizador os posiciona automaticamente.

Propriedades CSS dos botões de rolagem para cima e para baixo

largura

Largura do botão de rolagem.

altura

Altura do botão de rolagem.

imagem de fundo

A imagem exibida para um determinado estado de botão.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte também Sprites CSS .

OBSERVAÇÃO

Esse botão suporta state seletor de atributos, que pode ser usado para aplicar diferentes capas a "up", "down", "over"e "disabled" estados do botão.

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar um botão de rolagem que tenha 125 x 35 pixels e tenha uma arte-final diferente para cada estado:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);

Nesta página