Vue Favoris

Dernière mise à jour : 2023-11-04
  • Créé pour :
  • Developer
    User

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.

REMARQUE

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

Sur cette page