Gesellschaftsanteil social-share

Das Social-Sharing-Tool wird standardmäßig oben rechts angezeigt. Sie besteht aus einer Schaltfläche und einem Bedienfeld, das sich erweitert, wenn Benutzende auf eine Schaltfläche klicken oder tippen, und individuelle Freigabetools enthält.

Position und Größe des Tools für die Freigabe in der Viewer-Benutzeroberfläche werden wie folgt gesteuert:

.s7interactivevideoviewer .s7socialshare

CSS-Eigenschaften des Social-Share-Tools

Beispiel example

So richten Sie ein Tool zur gemeinsamen Nutzung in sozialen Netzwerken ein, das vier Pixel vom oberen und fünf Pixel vom rechten Rand des Viewer-Containers entfernt platziert und eine Größe von 28 x 28 Pixel hat.

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

Das Erscheinungsbild der Schaltfläche Social Share Tool wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7interactivevideoviewer .s7socialshare .s7socialbutton

CSS-Eigenschaften der Schaltfläche des Tools für die Freigabe in Social Media

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen.

Beispiel example-1

So richten Sie eine Schaltfläche für ein Social-Sharing-Tool ein, die für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild anzeigt.

.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);
}

Das Erscheinungsbild des Bedienfelds, das die einzelnen Social-Sharing-Symbole enthält, wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

CSS-Eigenschaften des Social-Share-Bedienfelds

Beispiel example-2

So richten Sie ein Bedienfeld mit transparenter Farbe ein:

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