Panneau des résultats de recherche

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 à l’utilisateur un message lorsque sa recherche n’a renvoyé 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.

REMARQUE

Ce panneau de texte prend en charge le sélecteur d’attributs state qui peut être utilisé pour appliquer différents styles à différents messages texte. En particulier, state='prompt' correspond à l’invite de texte affichée lors de la première appel du panneau ; state='results' correspond au texte contenant des informations sur les accès à la recherche ; et 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. L’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 10 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, utilisez une bordure par défaut gris clair et une bordure sélectionnée grise foncée :

.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 qui utilisent une police Helvetica, de 12 pixels, gris, de 12 pixels :

.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 CSS Sprites .

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs state qui peut être utilisé pour appliquer différents habillages aux états de bouton "up", "down", "over" et "disabled".

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

Sur cette page