Panneau des résultats de recherche search-results-panel

Le panneau des résultats de recherche se compose de la zone de saisie de recherche située en haut et de la zone principale dans laquelle s’affichent les messages d’information ou les résultats de la recherche.

Propriétés CSS de la zone de visionneuse principale

Lorsque le panneau est actif, l’interface utilisateur de la visionneuse est recouverte d’un remplissage semi-transparent. La couleur et l’opacité de ce remplissage sont contrôlées avec le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Le panneau des résultats de recherche occupe toujours toute la hauteur de visionneuse disponible. Vous pouvez toutefois configurer la largeur. Vous pouvez définir la largeur sur une valeur de pixel absolue, qui est un paramètre par défaut pour les points d’arrêt de taille moyenne et grande. Vous pouvez également définir la largeur sur 100 % pour que le panneau des résultats de recherche occupe toute la zone de la visionneuse. La largeur du panneau est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

Propriété CSS de l’espace de résultats de recherche

Exemple : pour configurer un panneau de résultats de recherche de 250 pixels de large sur des points d’arrêt de grande et moyenne taille et utiliser un panneau de taille réelle sur un point d’arrêt de petite taille :

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

La partie supérieure du panneau des résultats de recherche est dédiée à la zone de saisie de la recherche. Le remplissage sur les côtés de la zone de saisie est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

Propriétés CSS du conteneur d’entrée de recherche

Le champ d’entrée de recherche est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Propriétés CSS du champ d’entrée de recherche

Exemple : pour configurer un champ de saisie de recherche avec une hauteur de 0 pixel et une police de texte de 14 pixels :

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

Le bouton de recherche situé à gauche du champ de saisie de recherche sous la forme du "verre à l’oeil" par défaut est contrôlé par le sélecteur de classe CSS suivant :

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

Propriétés CSS du bouton d’entrée de recherche

Exemple : pour configurer un bouton de recherche avec une icône "en forme de verre" de 26 x 26 pixels ; 30 pixels de taille avec une bordure 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;
}

Le panneau des résultats de recherche peut afficher une invite textuelle lors du premier appel de la fonction. Il affiche également un message lorsque la recherche d’un utilisateur ne renvoie aucun résultat. Dans tous les cas, le texte apparaît dans la partie principale du panneau des résultats de recherche et est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

Propriétés CSS des informations de recherche

Le texte du message peut être localisé. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple - Pour configurer un panneau de texte qui utilise une police de 18 pixels gris :

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

Les résultats de recherche sont affichés sous la forme d’une seule colonne ou d’une seule ligne de miniatures pour les pages avec accès à la recherche. L’espacement entre les miniatures des résultats de recherche est contrôlé à l’aide du sélecteur de classe CSS suivant :

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

Propriétés CSS des cellules de miniature

Exemple - Pour configurer l’espacement de dix pixels :

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

L’aspect des miniatures individuelles est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

Propriétés CSS de la miniature

Exemple : pour configurer des miniatures de 215 x 129 pixels, vous devez définir une bordure grise claire et une bordure sélectionnée en gris foncé :

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

L’aspect du libellé de la miniature est contrôlé à l’aide du sélecteur de classe CSS suivant :

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

Propriétés CSS de l’étiquette

Exemple - Pour configurer des libellés qui utilisent la police 12 pixels, gris, Helvetica® :

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

Sur les systèmes qui utilisent la saisie de la souris, deux boutons de défilement s’affichent au bas du panneau des résultats de recherche pour qu’un utilisateur fasse défiler les résultats de recherche. L’aspect des boutons de défilement haut et bas est contrôlé à l’aide des sélecteurs de classe CSS suivants :

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

Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS supérieure, gauche, inférieure et droite. La logique de la visionneuse les positionne automatiquement.

Propriétés CSS des boutons de défilement vers le haut et vers le bas

Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un bouton de défilement de 125 x 35 pixels et dont l’illustration est différente pour chaque état :

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