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 de CSS da área do visualizador principal
Quando o painel está ativo, a interface do usuário do visualizador é coberta por um preenchimento semitransparente. A cor e a opacidade desse preenchimento são controladas com o seguinte seletor de classe CSS:
.s7ecatalogviewer .s7searchpanel .s7backoverlay
Propriedade CSS |
Descrição |
---|---|
cor de fundo |
Cor da sobreposição. |
opacidade |
Opacidade da cor. |
O painel de resultados da pesquisa sempre ocupa toda a altura do visualizador disponível. Entretanto, é possível configurar a largura. É possível definir a largura com um valor absoluto de pixel, que é uma configuração padrão para pontos de interrupção de tamanho médio e grande. Ou você pode definir a largura como 100% para que o painel de resultados da pesquisa ocupe a área inteira do visualizador. A largura do painel é controlada pelo seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace
Propriedade CSS do espaço de resultados da pesquisa
width |
Largura do espaço do resultado da pesquisa. |
Exemplo - para configurar um painel de resultados de pesquisa de 250 pixels de largura 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 de CSS do container de entrada de pesquisa
revestimento |
Preenchimento em torno da caixa de entrada. |
O campo de entrada de pesquisa é controlado pelo seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7searchpanel .s7searchinput
Propriedades de 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. |
fronteira |
Borda do campo de entrada de pesquisa. |
margem |
Margem do campo de entrada de pesquisa |
font-size |
Tamanho da fonte de 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 na forma do "vidro de aparência" por padrão é controlado pelo seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton
Propriedades de CSS do botão de entrada de pesquisa
largura |
Largura do botão de entrada da pesquisa. |
altura |
Altura do botão de entrada da pesquisa. |
background-image |
O URL da imagem do ícone "de vidro". |
tamanho do plano de fundo |
O tamanho do ícone de "vidro de aparência". |
fronteira |
Borda do botão de entrada de pesquisa. |
margem |
Margem do botão de entrada da pesquisa. |
Exemplo - para configurar um botão de pesquisa com um í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. Também mostra ao usuário uma mensagem quando a pesquisa não retornou resultados. 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 de CSS das informações de pesquisa
cor |
Cor do texto. |
família de fontes |
Nome da fonte do texto. |
font-alignment |
Alinhamento horizontal do texto. |
font-size |
Tamanho do texto da fonte. |
Esse painel de texto oferece suporte ao seletor de atributos state
, que pode ser usado para aplicar estilos diferentes a mensagens de texto diferentes. Em particular, state='prompt'
corresponde ao prompt de texto exibido quando o painel é chamado pela primeira vez; state='results'
corresponde ao texto com informações sobre ocorrências de pesquisa; e state='no_results'
corresponde ao texto mostrado quando o query de pesquisa não retornou nenhum resultado.
O texto da mensagem pode ser localizado. Consulte Localização de elementos da interface do usuário para obter mais informações.
Exemplo - para configurar um painel de texto que usa 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 única de miniaturas para páginas com ocorrências de pesquisa. O espaçamento entre miniaturas de resultados de pesquisa é controlado com o seguinte seletor de classe CSS:
.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell
Propriedades de CSS das células em miniatura
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 .s7searchpanel .s7swatches .s7thumbcell {
margin: 5px;
}
A aparência de miniaturas individuais é controlada com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb
Propriedades de CSS da miniatura
largura |
Largura da miniatura. |
altura |
Altura da miniatura. |
fronteira |
Borda da miniatura. |
Exemplo - para configurar miniaturas com 215 x 129 pixels, uma borda padrão cinza claro e uma borda cinza escura selecionada:
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
width: 215px;
height: 129px;
}
A aparência da etiqueta em miniatura é controlada com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label
Propriedades de CSS do rótulo
cor |
Cor do texto. |
família de fontes |
Nome da fonte do texto. |
font-size |
Tamanho da fonte de texto. |
Exemplo - para configurar rótulos que usam fonte Helvetica de 12 pixels, cinza e 12 pixels:
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
font-family: Helvetica,sans-serif;
color: #4c4c4c;
font-size: 12px;
}
Em sistemas que usam a entrada do 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 são controlados com os seguintes seletores de classe CSS:
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton
Não é possível posicionar botões de rolagem usando as propriedades CSS superior, esquerda, inferior e direita. Em vez disso, a lógica do visualizador os posiciona automaticamente.
Propriedades de 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. |
background-image |
A imagem que é exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites . |
Este botão suporta o seletor de atributos state
, que pode ser usado para aplicar diferentes capas aos estados dos botões "up"
, "down"
, "over"
e "disabled"
.
As dicas de ferramentas do botão podem ser localizadas. Consulte Localização de elementos da interface do usuário para obter mais informações.
Exemplo - para configurar um botão de rolagem para cima que tenha 125 x 35 pixels e 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);