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:

.s7video360viewer .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. Siehe 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:

.s7video360viewer .s7linkshare { 
 width:28px; 
 height:28px; 
} 
.s7video360viewer .s7linkshare[state='up'] { 
background-image:url(images/v2/LinkShare_dark_up.png); 
} 
.s7video360viewer .s7linkshare[state='over'] { 
background-image:url(images/v2/LinkShare_dark_over.png); 
} 
.s7video360viewer .s7linkshare[state='down'] { 
background-image:url(images/v2/LinkShare_dark_down.png); 
} 
.s7video360viewer .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:

.s7video360viewer .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:

.s7video360viewer .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:

.s7video360viewer .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 es das gesamte Browserfenster mit einem weißen Hintergrund auf Touch-Geräten verwendet:

.s7video360viewer.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 Header-Container wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7video360viewer .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 der folgenden CSS-Klassenauswahl gesteuert wird:

.s7video360viewer .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

.s7video360viewer .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:

.s7video360viewer .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:

.s7video360viewer .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. Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.

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

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

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

.s7video360viewer .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:

.s7video360viewer .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 "Alles auswählen"wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7video360viewer .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 der folgenden CSS-Klassenauswahl gesteuert:

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

CSS-Eigenschaften der Schaltfläche "Abbrechen"

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:

.s7video360viewer .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. Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel : Zur Einrichtung einer Fußzeile des Dialogfelds mit einer Schaltfläche "Abbrechen"im Format 64 x 34, deren Textfarbe und Hintergrundfarbe je nach Schaltflächenstatus unterschiedlich sind:

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

.s7video360viewer .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 mit einer Höhe von 300 Pixel einzurichten, haben Sie einen 10-Pixel-Rand und verwenden Sie einen weißen Hintergrund:

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

Sämtliche Formularinhalte wie Beschriftungen und Eingabefelder befinden sich in einem Container, der mit der folgenden CSS-Klassenauswahl gesteuert wird:

.s7video360viewer .s7linkdialog .s7dialogbody

CSS-Eigenschaften des Dialogfeldtextes

Padding

Innenabstand.

Beispiel : So richten Sie Formularinhalte mit einer Auffüllung von 10 Pixel ein:

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

Alle statischen Beschriftungen im Dialogfeld werden mit

.s7video360viewer .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. Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel : So richten Sie alle Beschriftungen so ein, dass sie grau und fett mit einer 9-Pixel-Schriftart sind:

.s7video360viewer .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:

.s7video360viewer .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, wird eine Auffüllung von 10 Pixeln unten eingefügt:

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

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

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

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

rand

Ränder um den Container des Freigabelink.

Padding

Innenabstand.

Beispiel : Um einen grauen Rahmen von einem Pixel um den Einbettungscode festzulegen und eine Umrandung von neun Pixeln vorzunehmen,

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

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

.s7video360viewer .s7linkdialog .s7dialoglink

CSS-Eigenschaften des Dialogfelds "Link freigeben"

width

Linkbreite freigeben.

Beispiel : So legen Sie für den Freigabelink eine Breite von 450 Pixel fest:

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

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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