Gesellschaftsanteil social-share

Das Social-Sharing-Tool wird standardmäßig oben links angezeigt. Es 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:

.s7ecatalogviewer .s7socialshare

CSS-Eigenschaften des Social-Share-Tools

Beispiel : Einrichten eines Tools zur gemeinsamen Nutzung in sozialen Netzwerken, 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 aufweist:

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

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

.s7ecatalogviewer .s7socialshare .s7socialbutton

CSS-Eigenschaften der sozialen Schaltfläche

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

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

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

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

.s7ecatalogviewer .s7socialshare .s7socialsharepanel

CSS-Eigenschaften des Social-Share-Bedienfelds

Beispiel: So richten Sie ein Bedienfeld mit einer transparenten Farbe ein:

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