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 principal, 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
propriété CSS |
Description |
---|---|
arrière-plan-couleur |
Couleur de la superposition. |
opacité |
Opacité de la couleur. |
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
width |
Largeur de l’espace des 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 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
remplissage |
Marge intérieure autour de la zone de saisie. |
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 de saisie de recherche
height |
Hauteur du champ de saisie de la recherche. |
remplissage-gauche |
Marge intérieure entre les limites du champ de saisie et le texte de saisie. |
bordure |
Bordure du champ de saisie de recherche. |
margin |
Marge du champ de saisie de la recherche |
font-size |
Taille de la police de texte. |
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
width |
Largeur du bouton de saisie de recherche. |
height |
Hauteur du bouton de saisie de la recherche. |
background-image |
URL de l’image de l’icône "en forme de verre". |
background-size |
Taille de l’icône "en forme de verre". |
bordure |
Bordure du bouton de saisie de recherche. |
margin |
Marge du bouton de saisie de la recherche. |
Exemple : pour configurer un bouton de recherche avec une icône "en forme de verre" 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 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
color |
Couleur du texte. |
font-family |
Nom de la police de texte. |
font-align |
Alignement horizontal du texte. |
font-size |
Taille du texte de la police. |
Ce panneau de texte prend en charge les state
sélecteur d’attributs qui peut être utilisé pour appliquer différents styles à différents messages texte. En particulier, state='prompt'
correspond à l’invite de texte affichée lorsque le panneau est appelé pour la première fois. Le state='results'
correspond au texte contenant des informations sur les accès à la recherche. Et enfin, le state='no_results'
correspond au texte affiché lorsque la requête de recherche ne renvoyait aucun résultat.
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
margin |
Taille de la marge verticale autour de chaque miniature. Espacement réel des miniatures est égal à la somme des marges supérieure et inférieure définies pour .s7thumbcell . |
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
width |
Largeur de la miniature. |
height |
Hauteur de la miniature. |
bordure |
Bordure de la miniature. |
Exemple : pour configurer des miniatures de 215 x 129 pixels, vous devez définir une bordure par défaut en gris clair 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 du libellé
color |
Couleur du texte. |
font-family |
Nom de la police de texte. |
font-size |
Taille de la police de texte. |
Exemple - Pour configurer des libellés de 12 pixels, gris, police 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 place, la logique de la visionneuse les positionne automatiquement.
Propriétés CSS des boutons de défilement vers le haut et vers le bas
width |
Largeur du bouton de défilement. |
height |
Hauteur du bouton de défilement. |
background-image |
Image affichée pour un état de bouton donné. |
arrière-plan-position |
Position dans l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi Sprites CSS . |
Ce bouton prend en charge state
sélecteur d’attributs, qui peut être utilisé pour appliquer différents habillages à "up"
, "down"
, "over"
, et "disabled"
états de bouton.
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);