Panel de resultados de búsqueda

El panel de resultados de 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 búsqueda.

Propiedades CSS del área del visor principal

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

.s7ecatalogviewer .s7searchpanel .s7backoverlay

CSS, propiedad

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 del visor disponible. Sin embargo, puede configurar la anchura. Puede establecer la anchura en un valor de píxel absoluto, que es una configuración predeterminada 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. El ancho del panel se controla mediante el siguiente selector de clase CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

Propiedad CSS del espacio de resultados de búsqueda

width

Ancho 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 utilizar un panel de tamaño completo en un punto de interrupción de tamaño 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 en los lados del cuadro de entrada está controlado por 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.

relleno-izquierda

El margen interior 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 de 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 "cristal de aspecto" de forma predeterminada está controlado por el siguiente selector de clase 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 dirección URL de la imagen del icono de "luce vidrio".

background-size

El tamaño del icono "de cristal".

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 de "cristal" de 26 x 26 píxeles; 30 píxeles de tamaño 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 al usuario cuando su búsqueda 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 de texto.

font-align

Alineación de texto horizontal.

font-size

Tamaño del texto de fuente.

NOTA

Este panel de texto admite el selector de atributos state, que puede utilizarse para aplicar diferentes estilos a distintos mensajes de texto. En particular, state='prompt' corresponde al mensaje de texto que se muestra cuando se llama al panel por primera vez; state='results' corresponde al texto con información sobre las visitas de búsqueda; y state='no_results' corresponde al texto mostrado cuando la consulta de búsqueda no arrojó ningún resultado.

El texto del mensaje se puede localizar. Consulte Localización de los 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 la búsqueda se representan como una sola columna o fila de miniaturas para las páginas con visitas de búsqueda. El espaciado entre las miniaturas de los 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

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

Ejemplo: para configurar el espaciado de 10 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

Anchura 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 de color gris claro y un borde seleccionado de color 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 de texto.

font-family

Nombre de la fuente de texto.

font-size

Tamaño de la fuente de texto.

Ejemplo: para configurar etiquetas que utilicen fuentes Helvetica de 12 píxeles, gris:

.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 el 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 con las propiedades CSS top, left, bottom y right. En su lugar, la lógica del visor las 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

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte también Sprites CSS .

NOTA

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

La información del objeto de botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar un botón de desplazamiento hacia arriba de 125 x 35 píxeles y con una ilustración 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);

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free