Panneau Résultats de la recherche search-results-panel

Le panneau des résultats de la recherche comprend la zone de saisie de la recherche en haut et la zone principale où 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 absolue en pixels, 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 taille moyenne et grande 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 la recherche est dédiée à la zone de saisie de la recherche. La marge intérieure sur les côtés de la zone de saisie est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

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

Le champ de saisie de recherche est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Propriétés CSS du champ de saisie 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 « miroir » est par défaut 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 « Look Glass » de 26 x 26 pixels ; taille de 30 pixels 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 la recherche peut afficher une invite textuelle lors du premier appel de la fonction. Elle affiche également un message lorsque la recherche d’un utilisateur n’a renvoyé aucun résultat. Dans tous les cas, le texte s’affiche 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 grise de 18 pixels :

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

Les résultats de la recherche sont générés en une seule colonne ou une seule ligne de miniatures pour les pages comportant des accès de recherche. L’espacement entre les miniatures des résultats de recherche est contrôlé avec le sélecteur de classe CSS suivant :

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

Propriétés CSS des cellules des miniatures

Exemple - Pour configurer l’espacement de dix pixels :

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

L’aspect des miniatures individuelles est contrôlé avec le 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, ayant une bordure par défaut gris clair et une bordure sélectionnée gris foncé :

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

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

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

Propriétés CSS du libellé

Exemple - Pour configurer des libellés qui utilisent une police Helvetica® grise de 12 pixels :

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

Sur les systèmes qui utilisent la souris, deux boutons de défilement s’affichent au bas du panneau des résultats de recherche pour permettre à l’utilisateur ou à l’utilisatrice de faire défiler les résultats de la recherche. L’aspect des boutons de défilement vers le haut et vers le bas est contrôlé avec les sélecteurs de classe CSS suivants :

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

Il n’est pas possible de positionner des boutons de défilement à l’aide des propriétés CSS haut, gauche, bas et droite. Au lieu de cela, 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 vers le haut de 125 x 35 pixels avec une illustration 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);