Par défaut, l’outil de partage sur les réseaux sociaux s’affiche dans le coin supérieur droit. Il s’agit d’un bouton et d’un panneau qui se développent 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 :
.s7interactivevideoviewer .s7socialshare
Propriétés CSS de l’outil de partage sur les réseaux sociaux
haut |
Position verticale de l’outil de partage sur les réseaux sociaux par rapport au conteneur du lecteur de contenu. |
gauche |
Position horizontale de l’outil de partage sur les réseaux sociaux par rapport au conteneur du lecteur de contenu. |
width |
Largeur de l’outil de partage sur les réseaux sociaux. |
height |
Hauteur de l’outil de partage sur les réseaux sociaux. |
Configuration d’un outil de partage sur les réseaux sociaux positionné à quatre pixels du haut et à cinq pixels de la droite du conteneur du lecteur de contenu et dimensionné à 28 x 28 pixels.
.s7interactivevideoviewer .s7socialshare {
top:4px;
right:5px;
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 :
.s7interactivevideoviewer .s7socialshare .s7socialbutton
Propriétés CSS du bouton d’outil de partage sur les réseaux sociaux
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 CSS Sprites . |
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 configurer 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.
.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’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 :
.s7interactivevideoviewer .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. |
Pour configurer un panneau de couleur transparente :
.s7interactivevideoviewer .s7socialshare .s7socialsharepanel {
background-color: transparent;
}