Partage social social-share

Par défaut, l’outil Partage sur les réseaux sociaux s’affiche 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 :

.s7smartcropvideoviewer .s7socialshare

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

Exemple - configurez un outil de partage sur les réseaux sociaux qui se situe à quatre pixels du haut et à cinq pixels de la droite du conteneur de la visionneuse et est dimensionné de manière à avoir une taille de 28 x 28 pixels.

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

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

.s7smartcropvideoviewer .s7socialshare .s7socialbutton

Propriétés CSS du bouton social

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.

.s7smartcropvideoviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7smartcropvideoviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7smartcropvideoviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7smartcropvideoviewer .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 :

.s7smartcropvideoviewer .s7socialshare .s7socialsharepanel

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

Exemple - Configurez un panneau pour qu’il ait une couleur transparente :

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