Panel de resultados de búsqueda search-results-panel

El panel Resultados de la búsqueda consta del cuadro de entrada de búsqueda en la parte superior y del área principal donde se muestran los mensajes informativos o los resultados de la búsqueda.

Propiedades CSS del área del visor principal

Cuando el panel está activo, la interfaz de usuario del visor se cubre con un relleno semitransparente. El color y la opacidad de este relleno se controlan con el siguiente selector de clase CSS:

.s7ecatalogviewer .s7searchpanel .s7backoverlay
Propiedad CSS
Descripción
background-color
Color de la superposición.
opacidad
Opacidad del color.

El panel de resultados de búsqueda siempre ocupa toda la altura de visor disponible. Sin embargo, puede configurar la anchura. Puede establecer la anchura en un valor de píxel absoluto, que es un ajuste predeterminado para los puntos de interrupción de tamaño medio y grande. O bien, puede establecer la anchura en 100 % para que el panel de resultados de búsqueda ocupe toda el área del visor. La anchura del panel se controla mediante el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

Propiedad CSS del espacio de resultados de búsqueda

width
Anchura del espacio de resultados de búsqueda.

Ejemplo: para configurar un panel de resultados de búsqueda de 250 píxeles de ancho en puntos de interrupción grandes y medianos, y usar un panel de tamaño completo en un punto de interrupción pequeño:

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

La parte superior del panel de resultados de búsqueda está dedicada al cuadro de entrada de búsqueda. El relleno de los lados del cuadro de entrada se controla mediante el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

Propiedades CSS del contenedor de entrada de búsqueda

relleno
Relleno alrededor del cuadro de entrada.

El campo de entrada de búsqueda está controlado por el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Propiedades CSS del campo de entrada de búsqueda

height
Altura del campo de entrada de búsqueda.
padding-left
El relleno interno entre los límites del campo de entrada y el texto de entrada.
borde
Borde del campo de entrada de búsqueda.
margin
Margen del campo de entrada de búsqueda
font-size
Tamaño de la fuente del texto.

Ejemplo: para configurar un campo de entrada de búsqueda con una altura de 0 píxeles y una fuente de texto de 14 píxeles:

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

El botón de búsqueda a la izquierda del campo de entrada de búsqueda en forma de "espejo" de forma predeterminada se controla con el siguiente selector de clases CSS:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

Propiedades CSS del botón de entrada de búsqueda

width
Ancho del botón de entrada de búsqueda.
height
Altura del botón de entrada de búsqueda.
background-image
La URL de la imagen del icono "espejo".
background-size
El tamaño del icono "espejo".
borde
Borde del botón de entrada de búsqueda.
margin
Margen del botón de entrada de búsqueda.

Ejemplo: Para configurar un botón de búsqueda con el icono "espejo" de 26 x 26 píxeles; tamaño de 30 píxeles con un borde de 1 píxel:

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

El panel de resultados de búsqueda puede mostrar un mensaje de texto cuando se llama por primera vez a la función. También muestra un mensaje cuando la búsqueda de un usuario no arrojó ningún resultado. En todos los casos, el texto aparece en la parte principal del panel de resultados de búsqueda y está controlado por el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

Propiedades CSS de la información de búsqueda

color
Color del texto.
font-family
Nombre de la fuente del texto.
font-align
Alineación de texto horizontal.
font-size
Tamaño del texto de la fuente.
NOTE
Este panel de texto admite state selector de atributos, que se puede utilizar para aplicar estilos diferentes a mensajes de texto diferentes. En particular, state='prompt' corresponde al mensaje de texto que se muestra cuando se llama al panel por primera vez. El state='results' corresponde al texto con información sobre las visitas de búsqueda. Y finalmente, el state='no_results' corresponde al texto que se muestra cuando la consulta de búsqueda no devolvió ningún resultado.

El texto del mensaje se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: Para configurar un panel de texto que utilice una fuente gris de 18 píxeles:

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

Los resultados de búsqueda se representan como una sola columna o una sola fila de miniaturas para páginas con visitas de búsqueda. El espaciado entre las miniaturas de resultados de búsqueda se controla con el siguiente selector de clase CSS:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

Propiedades CSS de las celdas de miniaturas

margin
El tamaño del margen vertical alrededor de cada miniatura. El espaciado real de las miniaturas es igual a la suma de los márgenes superior e inferior establecidos para .s7thumbcell .

Ejemplo: Para configurar el espaciado de diez píxeles:

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

El aspecto de las miniaturas individuales se controla con el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

Propiedades CSS de la miniatura

width
Ancho de la miniatura.
height
Altura de la miniatura.
borde
Borde de la miniatura.

Ejemplo: Para configurar miniaturas de 215 x 129 píxeles, tenga un borde predeterminado gris claro y un borde seleccionado gris oscuro:

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

El aspecto de la etiqueta de miniatura se controla con el siguiente selector de clase CSS:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

Propiedades CSS de la etiqueta

color
Color del texto.
font-family
Nombre de la fuente del texto.
font-size
Tamaño de la fuente del texto.

Ejemplo: Para configurar etiquetas que utilicen fuentes de 12 píxeles, grises y Helvetica®:

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

En los sistemas que utilizan la entrada del ratón, aparecen dos botones de desplazamiento en la parte inferior del panel de resultados de búsqueda para que un usuario se desplace por los resultados de la búsqueda. El aspecto de los botones de desplazamiento hacia arriba y hacia abajo se controla con los siguientes selectores de clase CSS:

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

No es posible colocar botones de desplazamiento mediante las propiedades CSS top, left, bottom y right. En su lugar, la lógica del visor los coloca automáticamente.

Propiedades CSS de los botones de desplazamiento hacia arriba y hacia abajo

width
Ancho del botón de desplazamiento.
height
Altura del botón de desplazamiento.
background-image
Imagen que se muestra para un estado de botón determinado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

NOTE
Este botón admite el state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a "up", "down", "over", y "disabled" estados de botón.

La información sobre herramientas de los botones se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: Configuración de un botón de desplazamiento hacia arriba de 125 x 35 píxeles con ilustraciones diferentes 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);
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8