Lo strumento di condivisione dei collegamenti è costituito da un pulsante aggiunto al pannello Condivisione social e dalla finestra di dialogo modale che viene visualizzata quando lo strumento viene attivato. La posizione del pulsante è completamente gestita dallo strumento di condivisione social network.
L'aspetto del pulsante di condivisione del collegamento è controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkshare
Proprietà CSS dello strumento di condivisione dei collegamenti
width |
Larghezza pulsante. |
height |
Altezza del pulsante. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Consulta Sprite CSS . |
Questo pulsante supporta il selettore di attributi state
, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
È possibile rimuovere il pulsante dal pannello Condivisione social impostando la proprietà display:none
CSS nella relativa classe CSS.
La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell'interfaccia utente.
Esempio : per impostare un pulsante di condivisione del collegamento che sia di 28 x 28 pixel e visualizzare un’immagine diversa per ciascuno dei quattro stati diversi del pulsante:
.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);
}
La sovrapposizione di sfondo che copre la pagina web quando la finestra di dialogo è attiva viene controllata con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7backoverlay
Proprietà CSS della sovrapposizione di sfondo
opacità |
Opacità sovrapposizione sfondo. |
colore di sfondo |
Colore sovrapposizione sfondo. |
Esempio : per impostare una sovrapposizione di sfondo grigio con opacità del 70%:
.s7video360viewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
Per impostazione predefinita, la finestra di dialogo modale viene visualizzata centrata sullo schermo sui sistemi desktop e occupa l’intera area della pagina web sui dispositivi touch. In tutti i casi, il posizionamento e il dimensionamento della finestra di dialogo vengono gestiti dal componente. La finestra di dialogo viene controllata con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialog
Proprietà CSS della finestra di dialogo
raggio bordo |
Raggio del bordo della finestra di dialogo, nel caso in cui la finestra di dialogo non utilizzi l’intero browser. |
colore di sfondo |
Colore di sfondo della finestra di dialogo. |
larghezza |
Deve essere disattivato o impostato su 100%, nel qual caso la finestra di dialogo prende l’intera finestra del browser (questa modalità è preferita per i dispositivi touch). |
altezza |
Deve essere disattivato o impostato su 100%, nel qual caso la finestra di dialogo prende l’intera finestra del browser (questa modalità è preferita per i dispositivi touch). |
Esempio : per impostare la finestra di dialogo in modo da utilizzare l’intera finestra del browser e avere uno sfondo bianco sui dispositivi touch:
.s7video360viewer.s7touchinput .s7linkdialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
L’intestazione della finestra di dialogo è costituita da un’icona, un testo del titolo e un pulsante Chiudi. Il contenitore di intestazione è controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogheader
Proprietà CSS dell’intestazione della finestra di dialogo
spaziatura interna |
Spaziatura interna per il contenuto dell’intestazione. |
L’icona e il testo del titolo vengono racchiusi in un contenitore aggiuntivo controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline
Proprietà CSS della riga di dialogo
spaziatura interna |
Spaziatura interna per l’icona dell’intestazione e il titolo |
L’icona Intestazione è controllata dal seguente selettore di classe CSS
.s7video360viewer .s7linkdialog .s7dialogheadericon
Proprietà CSS dell’icona di intestazione della finestra di dialogo
larghezza |
Larghezza icona. |
altezza |
Altezza icona. |
immagine di sfondo |
Immagine icona. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Consulta Sprite CSS . |
Il titolo dell’intestazione è controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogheadertext
Proprietà CSS del testo dell’intestazione della finestra di dialogo
font-weight |
Spessore del carattere. |
font-size |
Altezza carattere. |
font-family |
Famiglia di caratteri. |
spaziatura interna |
Spaziatura interna del testo. |
Il pulsante Chiudi è controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7closebutton
Proprietà CSS del pulsante di chiusura
top |
Posizione del pulsante verticale rispetto al contenitore di intestazione. |
right |
Posizione del pulsante orizzontale rispetto al contenitore intestazione. |
larghezza |
Larghezza pulsante. |
altezza |
Altezza del pulsante. |
spaziatura interna |
Spaziatura interna del pulsante. |
immagine di sfondo |
Immagine pulsante per ogni stato. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Consulta Sprite CSS . |
Questo pulsante supporta il selettore di attributi state
, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
È possibile localizzare la descrizione del pulsante Chiudi e il titolo della finestra di dialogo. Consulta Localizzazione degli elementi dell'interfaccia utente.
Esempio : per impostare un’intestazione della finestra di dialogo con spaziatura, icona 22 x 12 pixel e titolo in grassetto a 16 punti. Infine, un pulsante Chiudi da 28 x 28 pixel posizionato a due pixel dalla parte superiore e a due pixel dalla parte destra del contenitore della finestra di dialogo:
.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);
}
Il piè di pagina della finestra di dialogo è costituito da un pulsante Annulla . Il contenitore piè di pagina è controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogfooter
Proprietà CSS del piè di pagina della finestra di dialogo
border |
Bordo che è possibile utilizzare per separare visivamente il piè di pagina dal resto della finestra di dialogo. |
Il piè di pagina dispone di un contenitore interno che mantiene il pulsante. È controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer
Proprietà CSS del contenitore pulsanti della finestra di dialogo
spaziatura interna |
Spaziatura interna tra il piè di pagina e il pulsante. |
Il pulsante Seleziona tutto è controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogactionbutton
Il pulsante è disponibile solo sui sistemi desktop.
Proprietà CSS del pulsante Seleziona tutto
larghezza |
Larghezza pulsante. |
altezza |
Altezza del pulsante. |
color |
Colore del testo del pulsante per ogni stato. |
colore di sfondo |
Colore di sfondo del pulsante per ogni stato. |
Il pulsante Seleziona tutto supporta il selettore di attributi state
, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
Il pulsante Annulla è controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogcancelbutton
Proprietà CSS del pulsante Annulla della finestra di dialogo
larghezza |
Larghezza pulsante. |
altezza |
Altezza del pulsante. |
color |
Colore del testo del pulsante per ogni stato. |
colore di sfondo |
Colore di sfondo del pulsante per ogni stato. |
Questo pulsante supporta il selettore di attributi state
, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
Inoltre, entrambi i pulsanti condividono una classe CSS comune che può contenere impostazioni CSS uguali per altri pulsanti della finestra di dialogo:
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button
Proprietà CSS del pulsante
font-weight |
Spessore font pulsante. |
font-size |
Dimensione del font del pulsante. |
font-family |
Famiglia di font per pulsanti. |
altezza riga |
Altezza del testo all’interno del pulsante. Interessa l’allineamento verticale. |
ombra |
Ombra esterna. |
margine destro |
Margine del pulsante destro. |
Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell'interfaccia utente.
Esempio : per impostare un piè di pagina di una finestra di dialogo con un pulsante Annulla 64 x 34, con colori di testo e di sfondo diversi per ogni stato del pulsante:
.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;
}
L’area della finestra di dialogo principale (tra l’intestazione e il piè di pagina) contiene il contenuto della finestra di dialogo. In tutti i casi, il componente gestisce la larghezza dell’area, non è possibile impostarla in CSS. L’area di dialogo principale è controllata dal seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogviewarea
Proprietà CSS dell’area di visualizzazione della finestra di dialogo
altezza |
Altezza dell'area della finestra di dialogo principale. Deve essere specificato solo quando la finestra di dialogo funziona in modalità desktop. Non è applicabile quando la finestra di dialogo viene ridimensionata in modo da occupare l’intera finestra del browser. |
colore di sfondo |
Colore di sfondo dell'area della finestra di dialogo principale. |
margine |
Margine esterno. |
Esempio : per impostare un'area della finestra di dialogo principale su un'altezza di 300 pixel, avere un margine di 10 pixel e utilizzare uno sfondo bianco:
.s7video360viewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
Tutto il contenuto del modulo, ad esempio etichette e campi di input, risiede all’interno di un contenitore controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialogbody
Proprietà CSS del corpo della finestra di dialogo
spaziatura interna |
Spaziatura interna. |
Esempio : per impostare il contenuto del modulo con una spaziatura di dieci pixel:
.s7interactivevideoviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
Tutte le etichette statiche nel modulo della finestra di dialogo vengono controllate con
.s7video360viewer .s7linkdialog .s7dialoglabel
Questa classe non è adatta per controllare la dimensione o la posizione dell'etichetta perché è possibile applicarla a testi in varie posizioni dell'interfaccia utente del modulo.
Proprietà CSS dell’etichetta della finestra di dialogo.
font-weight |
Etichettare lo spessore del font. |
font-size |
Etichettare le dimensioni del font. |
font-family |
Famiglia di font etichetta. |
color |
Colore testo etichetta. |
Le etichette della finestra di dialogo possono essere localizzate. Consulta Localizzazione degli elementi dell'interfaccia utente.
Esempio : per impostare tutte le etichette in modo che siano grigie, in grassetto con un font di nove pixel:
.s7video360viewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
La dimensione della copia di testo visualizzata sopra il collegamento è controllata dal seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialoginputwide
Proprietà CSS del campo di input a livello di finestra di dialogo
larghezza |
Larghezza del testo. |
spaziatura interna |
Spaziatura interna. |
Esempio : per impostare una copia di testo con una larghezza di 430 pixel e una spaziatura di 10 pixel nella parte inferiore:
.s7video360viewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
Il collegamento di condivisione viene racchiuso in un contenitore e controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialoginputcontainer
Proprietà CSS del contenitore di input della finestra di dialogo
border |
Bordo intorno al contenitore di collegamento di condivisione. |
spaziatura interna |
Spaziatura interna. |
Esempio : per impostare un bordo grigio di un pixel intorno al testo del codice da incorporare e avere nove pixel di spaziatura:
.s7video360viewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
Il collegamento di condivisione stesso è controllato con il seguente selettore di classe CSS:
.s7video360viewer .s7linkdialog .s7dialoglink
Proprietà CSS del collegamento di condivisione finestra di dialogo
larghezza |
Condividi la larghezza del collegamento. |
Esempio : per impostare il collegamento di condivisione su una larghezza di 450 pixel:
.s7video360viewer .s7linkdialog .s7dialoglink {
width: 450px;
}