Partage sur les réseaux sociaux

Par défaut, l’outil de partage sur les réseaux sociaux s’affiche dans le coin supérieur gauche. Il s’agit d’un bouton et d’un panneau qui se développe lorsque l’utilisateur clique ou appuie sur un bouton et qui contient des outils de partage individuels.

La position et la taille de l’outil de partage sur les réseaux sociaux dans l’interface utilisateur du lecteur de contenu sont contrôlées par les éléments suivants :

.s7ecatalogviewer .s7socialshare

Propriétés CSS de l’outil de partage sur les réseaux sociaux

margin-top

Décalage par rapport au haut de la barre de contrôle.

margin=left

Distance du bouton suivant à gauche ou du côté gauche de la barre de contrôle s’il s’agit du premier bouton d’une rangée.

width

Largeur de l’outil de partage sur les réseaux sociaux.

height

Hauteur de l’outil de partage sur les réseaux sociaux.

Exemple : configurez un outil de partage sur les réseaux sociaux positionné à quatre pixels du haut et à cinq pixels de la droite du conteneur du lecteur et dimensionné à 28 x 28 pixels.

.s7ecatalogviewer .s7socialshare { 
margin-top: 4px; 
margin-left: 10px; width:28px; 
 height:28px; 
}

L’aspect du bouton d’outil de partage sur les réseaux sociaux est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7socialshare .s7socialbutton

Propriétés CSS du bouton social

image d’arrière-plan

Image affichée pour un état de bouton donné.

arrière-plan-position

Positionnez l’objet à l’intérieur de 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 à différents états de bouton.

L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : configurez un bouton d’outil de partage sur les réseaux sociaux qui affiche une image différente pour chacun des quatre états de bouton différents.

.s7ecatalogviewer .s7socialshare .s7socialbutton[state='up'] { 
background-image:url(images/v2/SocialShare_video_dark_up.png); 
} 
.s7ecatalogviewer .s7socialshare .s7socialbutton[state='over'] { 
background-image:url(images/v2/SocialShare_dark_over.png); 
} 
.s7ecatalogviewer .s7socialshare .s7socialbutton[state='down'] { 
background-image:url(images/v2/SocialShare_dark_down.png); 
} 
.s7ecatalogviewer .s7socialshare .s7socialbutton[state='disabled'] { 
background-image:url(images/v2/SocialShare_dark_disabled.png); 
}

L’aspect du panneau qui contient les icônes de partage sur les réseaux sociaux est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogviewer .s7socialshare .s7socialsharepanel

Propriétés CSS du panneau de partage sur les réseaux sociaux

arrière-plan-couleur

Couleur d’arrière-plan du panneau.

Exemple : configurez un panneau pour obtenir une couleur transparente :

.s7ecatalogviewer .s7socialshare .s7socialsharepanel { 
 background-color: transparent; 
}

Sur cette page