Social Sharing

Das Social Sharing-Tool wird standardmäßig oben rechts angezeigt. Es besteht aus einer Schaltfläche und einem Bereich, der erweitert wird, wenn der Benutzer auf eine Schaltfläche klickt oder darauf tippt und einzelne Freigabewerkzeuge enthält.

Die Position und Größe des Social Sharing-Tools in der Benutzeroberfläche des Viewers wird wie folgt gesteuert:

.s7interactivevideoviewer .s7socialshare

CSS-Eigenschaften des Social Sharing-Tools

Beispiel

Um ein Social Sharing-Tool einzurichten, das vier Pixel von oben und fünf Pixel von rechts vom Viewer-Container positioniert und 28 x 28 Pixel groß ist.

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

Das Erscheinungsbild der Schaltfläche für das Social Sharing-Tool wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7socialshare .s7socialbutton

CSS-Eigenschaften der Schaltfläche "Social Sharing"

Die QuickInfo für Schaltflächen kann lokalisiert werden. Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel

Um eine Schaltfläche für das Social Sharing-Tool einzurichten, mit der für jeden der vier Schaltflächenstatus ein anderes Bild angezeigt wird.

.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 mit den einzelnen Social Sharing-Symbolen wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

CSS-Eigenschaften des Social Sharing-Bedienfelds

Beispiel

So richten Sie einen Bereich mit transparenter Farbe ein:

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