Search panneau Résultats search-results-panel

Le panneau des résultats de la recherche se compose de la zone de saisie de recherche en haut et de la zone principale où les messages d’information ou les résultats de recherche sont affichés.

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

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 par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7searchpanel .s7backoverlay

Le panneau des résultats de la 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 la recherche occupe toute la zone de 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 la 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 pleine grandeur 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 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ées 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 contrôlé par défaut par le sélecteur de classe CSS suivant :

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

Propriétés CSS du bouton de saisie de recherche

Exemple - Pour configurer un bouton de recherche avec une icône « miroir » de 26 x 26 pixels ; Une 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 lorsque la fonctionnalité est appelée pour la première fois. 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 la 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é. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

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

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

Search résultats sont rendus sous la forme d’une seule colonne ou d’une seule ligne de miniatures pour les pages contenant des résultats de 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 des dix pixels :

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

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

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

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

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

Propriétés CSS du libellé

Exemple - Pour configurer des étiquettes utilisant la police Helvetica® grise, 12 pixels :

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

Sur les systèmes qui utilisent l’entrée de la souris, deux boutons de défilement apparaissent en bas du panneau des résultats de la recherche pour permettre à un utilisateur 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é par les 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 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. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

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