Social partager social-share

L’outil Partage sur les réseaux sociaux s’affiche par défaut dans le coin supérieur droit. Il se compose d’un bouton et d’un panneau qui se développe lorsque l’utilisateur clique ou appuie sur un bouton et 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 de la visionneuse sont contrôlées par les éléments suivants :

.s7interactivevideoviewer .s7socialshare

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

Exemple example

Pour configurer un outil de partage social positionné à quatre pixels du haut et à cinq pixels de la droite du conteneur de la visionneuse et dont la taille est de 28 x 28 pixels.

.s7interactivevideoviewer .s7socialshare {
 top:4px;
 right:5px;
 width:28px;
 height:28px;
}

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

.s7interactivevideoviewer .s7socialshare .s7socialbutton

Propriétés CSS du bouton de l’outil Partage sur les réseaux sociaux

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

Exemple example-1

Pour configurer un bouton d’outil de partage social qui affiche une image différente pour chacun des quatre états de bouton différents.

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

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

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

Propriétés CSS du panneau Partage social

Exemple example-2

Pour définir une couleur transparente pour un panneau :

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