Lo strumento di condivisione di incorporamento è costituito da un pulsante aggiunto al pannello Condivisione social e dalla finestra di dialogo modale visualizzata quando lo strumento viene attivato. La posizione del pulsante è completamente gestita dallo strumento di condivisione social network.
L'aspetto del pulsante di condivisione di incorporamento è controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embedshare
Proprietà CSS dello strumento di condivisione incorporato
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. Vedi Sprite CSS . |
Questo pulsante supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
È possibile rimuovere il pulsante dal pannello Condivisione social impostando display:none
Proprietà CSS nella relativa classe CSS.
La descrizione comando del pulsante può essere localizzata. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare un pulsante Incorpora condivisione che sia di 28 x 28 pixel e visualizzare un’immagine diversa per ciascuno dei quattro stati dei pulsanti:
.s7smartcropvideoviewer .s7embedshare {
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7smartcropvideoviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7smartcropvideoviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7smartcropvideoviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_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:
.s7smartcropvideoviewer .s7embeddialog .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%:
.s7smartcropvideoviewer .s7embeddialog .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:
.s7smartcropvideoviewer .s7embeddialog .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 che utilizzi l’intera finestra del browser e che abbia uno sfondo bianco sui dispositivi touch:
.s7smartcropvideoviewer .s7touchinput .s7embeddialog .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
.s7smartcropvideoviewer .s7embeddialog .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
.s7smartcropvideoviewer .s7embeddialog .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
.s7smartcropvideoviewer .s7embeddialog .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. Vedi Sprite CSS . |
Il titolo dell’intestazione è controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .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:
.s7smartcropvideoviewer .s7embeddialog .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. Vedi Sprite CSS . |
Questo pulsante supporta state
selettore di attributi, 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. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare un’intestazione della finestra di dialogo con spaziatura, icona 24 x 14 pixel, titolo in grassetto a 16 punti e pulsante Chiudi a 28 x 28 pixel. Infine, posiziona due pixel dalla parte superiore e due pixel dalla parte destra del contenitore della finestra di dialogo:
.s7smartcropvideoviewer .s7embeddialog .s7dialogheader {
padding: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheadericon {
background-image: url("images/sdk/dlgembed_cap.png");
height: 14px;
width: 24px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
Il piè di pagina della finestra di dialogo è costituito dal pulsante "Annulla". Il contenitore piè di pagina è controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .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:
.s7smartcropvideoviewer .s7embeddialog .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:
.s7smartcropvideoviewer .s7embeddialog .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 la state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
Il pulsante Annulla è controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .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. |
Il pulsante Annulla supporta la state
selettore di attributi, 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:
.s7smartcropvideoviewer .s7embeddialog .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. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare un piè di pagina di una finestra di dialogo con un pulsante Annulla 64 x 34, il cui colore di testo e sfondo sono diversi per ogni stato del pulsante:
.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
L’area della finestra di dialogo principale (tra intestazione e piè di pagina) contiene il contenuto della finestra di dialogo scorrevole e il pannello di scorrimento a destra. In tutti i casi, il componente gestisce la larghezza di quest’area, non è possibile impostarla in CSS. L’area di dialogo principale è controllata dal seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .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 dieci pixel e utilizzare uno sfondo bianco:
.s7smartcropvideoviewer .s7embeddialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
Tutto il contenuto del modulo (come etichette e campi di input) risiede all’interno di un contenitore controllato con
.s7smartcropvideoviewer .s7embeddialog .s7dialogbody
Se l’altezza di questo contenitore sembra essere maggiore dell’area della finestra di dialogo principale, il componente attiva automaticamente lo scorrimento verticale.
Proprietà CSS del corpo della finestra di dialogo
spaziatura interna |
Spaziatura interna. |
Esempio: per impostare il contenuto di un modulo con una spaziatura di dieci pixel:
.s7smartcropvideoviewer .s7embeddialog .s7dialogbody {
padding: 10px;
}
Tutte le etichette statiche nel modulo della finestra di dialogo vengono controllate con
.s7smartcropvideoviewer .s7embeddialog .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 descrizioni comandi della finestra di dialogo delle etichette possono essere localizzate. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare tutte le etichette in modo che siano grigie, in grassetto con un carattere di nove pixel:
.s7smartcropvideoviewer .s7embeddialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
La dimensione della copia di testo visualizzata sopra il codice di incorporamento è controllata dal seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputwide
Proprietà CSS del campo di input a livello di finestra di dialogo
larghezza |
Larghezza campo di input. |
spaziatura interna |
Spaziatura interna. |
Esempio: per impostare una copia di testo con una larghezza di 430 pixel e una spaziatura di dieci pixel nella parte inferiore:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
Il codice di incorporamento viene racchiuso in un contenitore e controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer
Proprietà CSS del contenitore di input della finestra di dialogo
larghezza |
Larghezza del contenitore del codice di incorporamento. |
border |
Bordo intorno al contenitore del codice di incorporamento. |
spaziatura interna |
Spaziatura interna. |
Esempio: per impostare un bordo grigio di un pixel intorno al testo del codice da incorporare, renderlo largo 430 pixel e avere una spaziatura di dieci pixel:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 10px;
width: 430px;
}
Il testo del codice di incorporamento effettivo è controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer
Proprietà CSS del contenitore di input della finestra di dialogo
ritorno a capo |
Stile di wrapping della parola. |
Esempio: per impostare il codice di incorporamento da utilizzare break-word
ritorno a capo automatico:
.s7smartcropvideoviewer .s7embeddialog .s7dialogmessage {
word-wrap: break-word;
}
L’etichetta e l’elenco a discesa Dimensione da incorporare si trovano nella parte inferiore della finestra di dialogo e vengono inseriti in un contenitore controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel
Proprietà CSS del pannello dimensione incorporamento della finestra di dialogo
spaziatura interna |
Spaziatura interna. |
Esempio: per impostare un pannello di dimensioni da incorporare con dieci pixel di spaziatura:
.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel {
padding: 10px;
}
Le dimensioni e l’allineamento dell’etichetta delle dimensioni di incorporamento sono controllate dal seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel
Proprietà CSS del pannello dimensione incorporamento della finestra di dialogo
allineamento verticale |
Allineamento verticale delle etichette. |
larghezza |
Larghezza etichetta. |
Esempio: per impostare l’etichetta delle dimensioni da incorporare in modo che sia allineata in alto e larga 80 pixel:
.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizelabel {
vertical-align: top;
width: 80px;
}
La larghezza della casella combinata Dimensione incorporamento è controllata dal seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7combobox
Proprietà CSS della casella combinata
larghezza |
Larghezza casella combinata. |
La casella combinata supporta la expanded
selettore di attributi con possibili valori di true
e false
. La true
viene utilizzato quando la casella combinata visualizza una delle dimensioni predefinite di incorporamento, quindi deve prendere tutta la larghezza disponibile. La false
viene utilizzato quando nella casella combinata è selezionata l’opzione per le dimensioni personalizzate, quindi dovrebbe ridursi per consentire lo spazio per i campi di input personalizzati di larghezza e altezza.
Esempio: per impostare la casella combinata Dimensione incorporamento su una larghezza di 300 pixel quando viene visualizzata una voce predefinita e larga 110 pixel quando viene visualizzata una dimensione personalizzata:
.s7smartcropvideoviewer .s7embeddialog .s7combobox[expanded="true"] {
width: 300px;
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox[expanded="false"] {
width: 110px;
}
L’altezza del testo della casella combinata è definita da un elemento interno speciale ed è controllata con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxtext
Proprietà CSS del testo della casella combinata
altezza |
Altezza testo casella combinata. |
Esempio: per impostare l'altezza del testo della casella combinata delle dimensioni di incorporamento su 40 pixel:
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxtext {
height: 40px;
}
La casella combinata ha un pulsante "a discesa" a destra ed è controllata con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton
Proprietà CSS del pulsante Casella combinata
top |
Posizione del pulsante verticale all’interno della casella combinata. |
right |
Posizione del pulsante orizzontale all’interno della casella combinata. |
larghezza |
Larghezza pulsante. |
altezza |
Altezza 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. Vedi Sprite CSS . |
Questo pulsante supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
Esempio: per impostare un pulsante "a discesa" su 28 x 28 pixel e ottenere un’immagine separata per ogni stato:
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton {
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
Il pannello con l’elenco delle dimensioni di incorporamento visualizzato all’apertura della casella combinata viene controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7comboboxdropdown
Le dimensioni e la posizione del pannello sono controllate dal componente. Non è possibile modificarlo tramite CSS.
Proprietà CSS dell’elenco a discesa della casella combinata
border |
Bordo del pannello. |
Esempio: per impostare il pannello della casella combinata con un bordo grigio di un pixel:
.s7smartcropvideoviewer .s7embeddialog .s7comboboxdropdown {
border: 1px solid #CCCCCC;
}
Un singolo elemento in un pannello a discesa controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dropdownitemanchor
Proprietà CSS dell’ancoraggio elemento a discesa
colore di sfondo |
Sfondo articolo. |
Esempio: per impostare l’elemento del pannello della casella combinata su uno sfondo bianco:
.s7smartcropvideoviewer .s7embeddialog .s7dropdownitemanchor {
background-color: #FFFFFF;
}
Un segno di spunta visualizzato a sinistra dell’elemento selezionato all’interno del pannello della casella combinata controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7checkmark
Proprietà CSS della casella di spunta
larghezza |
Larghezza icona. |
altezza |
Altezza icona. |
immagine di sfondo |
Immagine dell'elemento. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Vedi Sprite CSS . |
Esempio: per impostare l’icona del segno di spunta su 25 x 25 pixel:
.s7smartcropvideoviewer .s7embeddialog .s7checkmark {
background-image: url("images/sdk/cboxchecked.png");
height: 25px;
width: 25px;
}
Quando l'opzione "Dimensione personalizzata" è selezionata nella casella combinata Dimensione incorporamento, la finestra di dialogo visualizza due campi di input aggiuntivi a destra per consentire all'utente di immettere una dimensione di incorporamento personalizzata. Tali campi sono racchiusi in un contenitore controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsizepanel
Proprietà CSS del pannello dimensioni personalizzate della finestra di dialogo
sinistra |
Distanza dalla casella combinata Dimensione di incorporamento. |
Esempio: per impostare il pannello campi di input con dimensioni personalizzate su 20 pixel a destra della casella combinata:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsizepanel {
left: 20px;
}
Ogni campo di input con dimensioni personalizzate viene racchiuso in un contenitore che esegue il rendering di un bordo e imposta il margine tra i campi. È controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsize
Proprietà CSS delle dimensioni personalizzate della finestra di dialogo
border |
Bordo intorno al campo di input. |
larghezza |
Larghezza campo di input. |
margine |
Margine del campo di input. |
spaziatura interna |
Spaziatura dei campi di input. |
Esempio: per impostare le dimensioni personalizzate dei campi di input in modo che abbiano un bordo grigio di un pixel, un margine, una spaziatura e una larghezza di 70 pixel:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsize {
border: 1px solid #CCCCCC;
margin-right: 20px;
padding-left: 2px;
padding-right: 2px;
width: 70px;
}
Se è necessario lo scorrimento verticale, la barra di scorrimento viene riprodotta nel pannello vicino al bordo destro della finestra di dialogo, controllata con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7dialogscrollpanel
Proprietà CSS del pannello di scorrimento della finestra di dialogo
larghezza |
Larghezza del pannello di scorrimento. |
Esempio: per impostare un pannello di scorrimento con larghezza di 44 pixel
.s7smartcropvideoviewer .s7embeddialog .s7dialogscrollpanel {
width: 44px;
}
L’aspetto dell’area della barra di scorrimento è controllato con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar
Proprietà CSS della barra di scorrimento
larghezza |
Larghezza barra di scorrimento. |
top |
Offset della barra di scorrimento verticale dalla parte superiore del pannello di scorrimento. |
bottom |
Offset della barra di scorrimento verticale dalla parte inferiore del pannello di scorrimento. |
right |
Offset della barra di scorrimento orizzontale dal bordo destro del pannello di scorrimento. |
Esempio: per impostare una barra di scorrimento larga 28 pixel e con un margine di otto pixel rispetto alla parte superiore, destra e inferiore del pannello di scorrimento:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
La traccia della barra di scorrimento è l’area compresa tra i pulsanti di scorrimento superiore e inferiore. Il componente imposta automaticamente la posizione e l'altezza del brano. La traccia è controllata con il seguente selettore di classe CSS
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolltrack
Proprietà CSS del brano della barra di scorrimento
larghezza |
Larghezza traccia. |
colore di sfondo |
Colore di sfondo del brano. |
Esempio: per impostare una traccia della barra di scorrimento larga 28 pixel e con sfondo grigio:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
Il pollice della barra di scorrimento si sposta verticalmente all’interno di un’area della traccia di scorrimento. La sua posizione verticale è completamente controllata dalla logica del componente. Tuttavia, l’altezza della miniatura non cambia dinamicamente a seconda della quantità di contenuto. L’altezza del pollice e altri aspetti possono essere configurati con il seguente selettore di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb
Proprietà CSS della miniatura della barra di scorrimento
larghezza |
Larghezza pollice. |
altezza |
Altezza del pollice. |
imbottitura superiore |
Spaziatura verticale tra la parte superiore della traccia. |
imbottitura inferiore |
Spaziatura verticale tra il fondo della traccia. |
immagine di sfondo |
Immagine visualizzata per un dato stato pollice. |
Il pollice supporta state
selettore di attributi, che può essere utilizzato per applicare skin diversi a diversi stati di pollice: up
, down
, over
e disabled
.
Esempio: per impostare un pollice della barra di scorrimento di 28 x 45 pixel, ha un margine di dieci pixel in alto e in basso e ha un’immagine diversa per ogni stato:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}
L’aspetto dei pulsanti di scorrimento superiore e inferiore è controllato con i seguenti selettori di classe CSS:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton
Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS in alto, a sinistra, in basso e a destra. Al contrario, la logica del visualizzatore li posiziona automaticamente.
Proprietà CSS dei pulsanti di scorrimento superiore e inferiore
larghezza |
Larghezza pulsante. |
altezza |
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. Vedi Sprite CSS . |
Questi pulsanti supportano state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante: up
, down
, over
e disabled
.
Le descrizioni dei pulsanti possono essere localizzate. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Esempio: per impostare pulsanti di scorrimento con 28 x 32 pixel e immagini diverse per ogni stato:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}