Linkfreigabe

Das Tool zum Teilen von Links besteht aus einer Schaltfläche, die dem Social Sharing-Bedienfeld hinzugefügt wird, sowie dem modalen Dialogfeld, das angezeigt wird, wenn das Tool aktiviert wird. Die Position der Schaltfläche wird vollständig vom Social Sharing-Tool verwaltet.

Das Erscheinungsbild der Schaltfläche für die Linkfreigabe wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkshare

CSS-Eigenschaften des Linkfreigabe-Tools

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Sie können die Schaltfläche aus dem Social Sharing-Bedienfeld entfernen, indem Sie die CSS-Eigenschaft für display:none in der CSS-Klasse festlegen.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Um eine "link share"-Schaltfläche einzurichten, die 28 x 28 Pixel groß ist und für jeden der vier Schaltflächenzustände ein anderes Bild anzeigt:

.s7videoviewer .s7linkshare { 
 width:28px; 
 height:28px; 
} 
.s7videoviewer .s7linkshare[state='up'] { 
background-image:url(images/v2/LinkShare_dark_up.png); 
} 
.s7videoviewer .s7linkshare[state='over'] { 
background-image:url(images/v2/LinkShare_dark_over.png); 
} 
.s7videoviewer .s7linkshare[state='down'] { 
background-image:url(images/v2/LinkShare_dark_down.png); 
} 
.s7videoviewer .s7linkshare[state='disabled'] { 
background-image:url(images/v2/LinkShare_dark_disabled.png); 
}

Die Hintergrundüberlagerung, die sich auf der Webseite befindet, wenn das Dialogfeld aktiv ist, wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7backoverlay

CSS-Eigenschaften der Hintergrundüberlagerung

Deckkraft

Deckkraft der Hintergrundüberlagerung.

background-color

Hintergrundüberlagerungsfarbe.

Beispiel: So richten Sie eine Hintergrundüberlagerung ein, die grau mit einer Deckkraft von 70 % sein soll:

.s7videoviewer .s7linkdialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

Standardmäßig wird das modale Dialogfeld auf Desktop-Systemen zentriert angezeigt und nimmt den gesamten Webseitenbereich auf Touch-Geräten. In allen Fällen wird die Positionierung und Größe des Dialogfelds von der Komponente verwaltet. Das Dialogfeld wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7dialog

CSS-Eigenschaften des Dialogfelds

border-radius

Rahmenradius des Dialogfelds, falls das Dialogfeld nicht den gesamten Browser einnimmt.

background-color

Hintergrundfarbe des Dialogfelds.

width

Sollte entweder nicht eingestellt oder auf 100 % eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browserfenster ein (dieser Modus wird auf Touch-Geräten bevorzugt).

height

Sollte entweder nicht eingestellt oder auf 100 % eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browserfenster ein (dieser Modus wird auf Touch-Geräten bevorzugt).

Beispiel: Um das Dialogfeld so einzurichten, dass das gesamte Browserfenster mit einem weißen Hintergrund auf Touch-Geräten verwendet wird:

.s7videoviewer .s7touchinput .s7linkdialog .s7dialog { 
 width:100%; 
 height:100%; 
background-color: #ffffff; 
}

Die Kopfzeile des Dialogfelds besteht aus einem Symbol, einem Titeltext und einer Schaltfläche zum Schließen. Der Container der Kopfzeile wird mit

.s7videoviewer .s7linkdialog .s7dialogheader

CSS-Eigenschaften der Kopfzeile des Dialogfelds

Padding

Innenabstand für Kopfzeileninhalte.

Das Symbol und der Titeltext werden in einen zusätzlichen Container eingeschlossen, der mit

.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline

CSS-Eigenschaften der Dialogelinie

Padding

Innenabstand für das Kopfzeilensymbol und den Titel

Das Kopfzeilensymbol wird mit der folgenden CSS-Klassenauswahl gesteuert

.s7videoviewer .s7linkdialog .s7dialogheadericon

CSS-Eigenschaften des Dialogfeldkopfzeilensymbols

width

Symbolbreite

height

Symbolhöhe.

background-image

Symbolbild.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

Der Kopfzeilentitel wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7dialogheadertext

CSS-Eigenschaften des Dialogfeldkopfzeilentextes

font-Gewichtung

Schriftart-Gewichtung.

font-size

Schrifthöhe.

font-family

Schriftfamilie.

Padding

Interne Textfüllung.

Die Schließen-Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7linkdialog .s7closebutton

CSS-Eigenschaften der Schließen-Schaltfläche

Anfang

Vertikale Schaltflächenposition relativ zum Container der Kopfzeile.

rechts

Horizontale Schaltflächenposition relativ zum Container der Kopfzeile.

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

Padding

Innenabstand der Schaltfläche.

background-image

Schaltflächenbild für jeden Status.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die QuickInfo der Schaltfläche Schließen und der Titel des Dialogfelds können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Um eine Kopfzeile mit Auffüllung, einem Symbol mit 22 x 12 Pixeln, einem fett gedruckten Titel mit 16 Punkten und einer Schaltfläche mit 28 x 28 Pixel "Schließen"einzurichten, die zwei Pixel von oben und zwei Pixel von rechts vom Container des Dialogfelds positioniert wird:

.s7videoviewer .s7linkdialog .s7dialogheader { 
 padding: 10px; 
} 
.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7videoviewer .s7linkdialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlglink_cap.png"); 
    height: 12px; 
    width: 22px; 
} 
.s7videoviewer .s7linkdialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7videoviewer .s7linkdialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7videoviewer .s7linkdialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7videoviewer .s7linkdialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7videoviewer .s7linkdialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7videoviewer .s7linkdialog .s7closebutton[state='disabled'] { 
 background-image:url(images/sdk/close_disabled.png); 
}

Die Dialogfußzeile besteht aus der Schaltfläche "Abbrechen". Der Container der Fußzeile wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7dialogfooter

CSS-Eigenschaften der Fußzeile des Dialogfelds

rand

Rand, mit dem Sie die Fußzeile visuell vom Rest des Dialogfelds trennen können.

Die Fußzeile hat einen inneren Container, der die Schaltfläche behält. Sie wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer

CSS-Eigenschaften des Containers für die Schaltfläche "Dialogfeld"

Padding

Innere Umrandung zwischen der Fußzeile und der Schaltfläche.

Die Schaltfläche "Alle auswählen"wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7linkdialog .s7dialogactionbutton

Die Schaltfläche ist nur auf Desktop-Systemen verfügbar.

CSS-Eigenschaften der Schaltfläche "Alles auswählen"

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

color

Schaltflächentextfarbe für jeden Status.

background-color

Hintergrundfarbe der Schaltflächen für jeden Status.

HINWEIS

Die Schaltfläche "Alles auswählen"unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die Schaltfläche "Abbrechen"wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7linkdialog .s7dialogcancelbutton

CSS-Eigenschaften der Schaltfläche "Abbrechen"im Dialogfeld

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

color

Schaltflächentextfarbe für jeden Status.

background-color

Hintergrundfarbe der Schaltflächen für jeden Status.

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Darüber hinaus verwenden beide Schaltflächen dieselbe CSS-Klasse, die CSS-Einstellungen enthalten kann, die für andere Dialogfeldschaltflächen gleich sind:

.s7videoviewer .s7linkdialog .s7dialogfooter .s7button

CSS-Eigenschaften der Schaltfläche

font-Gewichtung

Gewichtung der Schaltflächenschrift.

font-size

Schaltflächenschriftgröße

font-family

Schaltflächenschriftfamilie.

line-height

Texthöhe innerhalb der Schaltfläche. Betrifft die vertikale Ausrichtung.

box-shadow

Schlagschatten.

margin-right

Ränder der rechten Schaltfläche.

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie eine Fußzeile des Dialogfelds mit einer Schaltfläche "Abbrechen"im Format 64 x 34 ein, wobei die Textfarbe und die Hintergrundfarbe je nach Schaltflächenstatus unterschiedlich sind:

.s7videoviewer .s7linkdialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7videoviewer .s7linkdialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7videoviewer .s7linkdialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7videoviewer .s7linkdialog .s7dialogactionbutton { 
 width:82px; 
 height:34px; 
} 
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
}

Der Hauptdialogbereich (zwischen Kopf- und Fußzeile) enthält Dialoginhalte. In allen Fällen verwaltet die Komponente die Breite dieses Bereichs. Es ist nicht möglich, ihn in CSS festzulegen. Der Hauptdialogbereich wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7dialogviewarea

CSS-Eigenschaften des Dialogfelds für den Anzeigebereich

height

Die Höhe des Hauptdialogfeldbereichs. Sie sollte nur angegeben werden, wenn das Dialogfeld im Desktop-Modus funktioniert. Dies ist nicht möglich, wenn die Größe des Dialogfelds die Größe des gesamten Browserfensters einnimmt.

background-color

Die Hintergrundfarbe des Hauptdialogfeldbereichs.

margin

Äußerer Rand.

Beispiel: Um einen Hauptdialogfeldbereich auf eine Höhe von 300 Pixel festzulegen, haben Sie einen Ränder von 10 Pixeln und verwenden Sie einen weißen Hintergrund:

.s7videoviewer .s7linkdialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:300px; 
}

Der gesamte Formularinhalt (wie Beschriftungen und Eingabefelder) befindet sich in einem Container, der mit

.s7videoviewer .s7linkdialog .s7dialogbody

CSS-Eigenschaften des Dialogfeldtextes

Padding

Innenabstand.

Beispiel: So richten Sie Formularinhalte mit einer Auffüllung von zehn Pixeln ein:

.s7videoviewer .s7linkdialog .s7dialogbody { 
    padding: 10px; 
}

Alle statischen Beschriftungen im Dialogfeld werden mit

.s7videoviewer .s7linkdialog .s7dialoglabel

Diese Klasse eignet sich nicht zur Steuerung der Beschriftungsgröße oder -position, da Sie sie an verschiedenen Stellen der Benutzeroberfläche des Formulars auf Texte anwenden können.

CSS-Eigenschaften der Beschriftung des Dialogfelds.

font-Gewichtung

Gewichtung der Beschriftungsschrift

font-size

Schriftgröße beschriften.

font-family

Schriftfamilie beschriften.

color

Beschriftungstextfarbe.

Die Beschriftungen des Dialogfelds können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie alle Beschriftungen so ein, dass sie grau und fett mit einer Schrift von neun Pixeln sind:

.s7videoviewer .s7linkdialog .s7dialoglabel { 
    color: #666666; 
    font-size: 9pt; 
    font-weight: bold; 
}

Die Größe der Textkopie, die über dem Link angezeigt wird, wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7dialoginputwide

CSS-Eigenschaften des Dialogfelds geben breites Feld ein

width

Textbreite

Padding

Innenabstand.

Beispiel: Um die Textkopie auf eine Breite von 430 Pixeln festzulegen und unten eine Auffüllung von 10 Pixeln einzustellen,

.s7videoviewer .s7linkdialog .s7dialoginputwide { 
    padding-bottom: 10px; 
    width: 430px; 
}

Der Link "share"wird in einen Container eingeschlossen und mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7dialoginputcontainer

CSS-Eigenschaften des Containers für die Eingabe im Dialogfeld

rand

Ränder um den Container des Freigabelink.

Padding

Innenabstand.

Beispiel: So legen Sie einen grauen Rahmen von einem Pixel um den Einbettungscode und eine Auffüllung von neun Pixeln fest:

.s7videoviewer .s7linkdialog .s7dialoginputcontainer { 
    border: 1px solid #CCCCCC; 
    padding: 9px; 
}

Der Share-Link selbst wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7linkdialog .s7dialoglink

CSS-Eigenschaften des Dialogfelds "Link freigeben"

width

Linkbreite freigeben.

Beispiel: So legen Sie die Breite des Freigabelink auf 450 Pixel fest:

.s7videoviewer .s7linkdialog .s7dialoglink { 
    width: 450px; 
}

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now