Vue Favoris

La vue Favoris est composée d’une colonne d’images miniatures.

L’aspect du conteneur de la vue Favoris est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .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 d’une largeur de 100 pixels avec un arrière-plan gris semi-transparent.

.s7ecatalogviewer .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 :

.s7ecatalogviewer .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 de la marge inférieure définie pour .s7thumbcell .

Exemple : pour configurer l’espacement de 10 pixels.

.s7ecatalogviewer .s7favoritesview .s7thumbcell { 
 margin: 5px; 
}

L’aspect des miniatures individuelles est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogviewer .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 sélecteur d’attributs state, 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. state="default" correspond au reste des miniatures. Et state="over" est utilisé lorsque vous pointez sur la souris.

Exemple : pour configurer des miniatures de 75 x 75 pixels, vous devez définir une bordure par défaut en gris clair et une bordure sélectionnée en gris foncé.

.s7ecatalogviewer .s7favoritesview .s7thumb { 
 width: 75px; 
 height: 75px;  
} 
.s7ecatalogviewer .s7favoritesview .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7ecatalogviewer .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 :

.s7ecatalogviewer .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.

.s7ecatalogviewer .s7favoritesview .s7label { 
 font-family: Helvetica,sans-serif; 
 font-size: 14px; 
}

Sur cette page