La vue Favoris est composée d’une colonne d’images miniatures.
L’aspect du conteneur de vues favoris est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7favoritesview
La position et la hauteur de la vue Favoris sont gérées par la vue ; dans CSS, il est uniquement possible de définir la largeur.
Propriétés CSS de la vue Favoris
arrière-plan-couleur |
Couleur d’arrière-plan de la vue Favoris. |
width |
Largeur de la vue. |
Exemple : pour configurer une vue Favoris de 100 pixels de large avec un arrière-plan gris semi-transparent.
.s7ecatalogsearchviewer .s7favoritesview {
width: 100px;
background-color: rgba(221, 221, 221, 0.5);
}
L’espacement entre les miniatures Favoris est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell
Propriétés CSS des miniatures Favoris
margin |
Taille de la marge verticale autour de chaque miniature. L’espacement réel des miniatures est égal à la somme de la marge supérieure et inférieure définie pour .s7thumbcell . |
Exemple : pour configurer l’espacement de dix pixels.
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell {
margin: 5px;
}
L’aspect des miniatures individuelles est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7favoritesview .s7thumb
Propriétés CSS des miniatures Favoris
width |
Largeur de la miniature. |
height |
Hauteur de la miniature. |
bordure |
Bordure de la miniature. |
La miniature prend en charge le state
sélecteur d’attributs qui peut être utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected"
correspond à la miniature récemment sélectionnée par l’utilisateur. while state="default"
correspond au reste des miniatures. Et state="over"
est utilisée lorsque vous pointez avec la souris.
Exemple : pour configurer des miniatures de 75 x 75 pixels, vous devez définir une bordure gris clair et une bordure sélectionnée gris foncé.
.s7ecatalogsearchviewer .s7favoritesview .s7thumb {
width: 75px;
height: 75px;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="selected"] {
border: 1px solid #666666;
}
L’aspect du libellé de la miniature est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7favoritesview .s7label
Propriétés CSS de l’étiquette Favoris
font-family |
Nom de la police. |
font-size |
Taille de police. |
Exemple : pour configurer des libellés avec une police Helvetica® de 14 pixels.
.s7ecatalogsearchviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}