Condivisione e-mail

Ultimo aggiornamento: 2023-11-03
  • Argomenti:
  • Dynamic Media Classic
    Visualizza ulteriori informazioni su questo argomento
  • Viewers
    Visualizza ulteriori informazioni su questo argomento
  • SDK/API
    Visualizza ulteriori informazioni su questo argomento
  • Smart Crop
    Visualizza ulteriori informazioni su questo argomento
  • Video
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer
    User

Lo strumento Condivisione e-mail è costituito da un pulsante aggiunto al pannello Condivisione e dalla finestra di dialogo modale che viene visualizzata quando lo strumento viene attivato. La posizione del pulsante è completamente gestita dallo strumento Condivisione social.

L’aspetto del pulsante di condivisione e-mail è controllato dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emailshare

Proprietà CSS dello strumento condivisione e-mail

width

Larghezza del pulsante.

height

Altezza del pulsante.

background-image

Immagine visualizzata per un determinato stato del pulsante.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS .

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

È 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. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un pulsante di condivisione e-mail di 28 x 28 pixel che visualizzi un’immagine diversa per ciascuno dei quattro diversi stati del pulsante.

.s7smartcropvideoviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7smartcropvideoviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7smartcropvideoviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7smartcropvideoviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

La sovrapposizione di sfondo che copre una pagina web quando la finestra di dialogo è attiva è controllata dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7backoverlay

Proprietà CSS della sovrapposizione posteriore

opacità

Opacità sovrapposizione sfondo.

background-color

Colore di sovrapposizione sfondo.

Esempio: per impostare la sovrapposizione di sfondo su grigio con opacità 70%:

.s7smartcropvideoviewer .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Per impostazione predefinita, la finestra di dialogo modale viene visualizzata centrata sullo schermo dei sistemi desktop e occupa l’intera area della pagina web sui dispositivi touch. In tutti i casi, il posizionamento e il ridimensionamento della finestra di dialogo vengono gestiti dal componente. La finestra di dialogo è controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialog

Proprietà CSS della finestra di dialogo

border-radius

Raggio del bordo della finestra di dialogo (se la finestra di dialogo non occupa l'intera finestra del browser);

background-color

Colore di sfondo della finestra di dialogo;

width

Deve essere disattivato o impostato su 100%, nel qual caso la finestra di dialogo occupa l’intera finestra del browser (questa modalità è preferita sui dispositivi touch);

height

Deve essere disattivato o impostato su 100%, nel qual caso la finestra di dialogo occupa l’intera finestra del browser (questa modalità è preferita sui dispositivi touch).

Esempio: per impostare la finestra di dialogo in modo da utilizzare l’intera finestra del browser e avere lo sfondo bianco sui dispositivi touch:

.s7smartcropvideoviewer .s7touchinput .s7emaildialog .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

.s7smartcropvideoviewer .s7emaildialog .s7dialogheader

Proprietà CSS dell’intestazione della finestra di dialogo

riempimento

Spaziatura interna per contenuto intestazione.

L’icona e il testo del titolo vengono racchiusi in un contenitore aggiuntivo controllato da

.s7smartcropvideoviewer .s7emaildialog .s7dialogheader .s7dialogline

Proprietà CSS della riga di dialogo

riempimento

Spaziatura interna per l'icona e il titolo dell'intestazione

L’icona dell’intestazione è controllata dal seguente selettore di classe CSS

.s7smartcropvideoviewer .s7emaildialog .s7dialogheadericon

Proprietà CSS dell'icona dell'intestazione della finestra di dialogo

width

Larghezza icona.

height

Altezza icona.

background-image

Immagine icona.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS .

Il titolo dell’intestazione è controllato dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogheadertext

Proprietà CSS del testo dell’intestazione della finestra di dialogo

font-weight

Spessore font.

font-size

Altezza carattere.

font-family

Famiglia di caratteri.

riempimento

Spaziatura interna testo.

Il pulsante Chiudi è controllato dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7closebutton

Proprietà CSS del ​ del pulsante Chiudi

top

Posizione verticale del pulsante rispetto al contenitore di intestazione.

destra

Posizione del pulsante orizzontale relativa al contenitore di intestazione.

width

Larghezza pulsante.

height

Altezza pulsante.

riempimento

Spaziatura interna del pulsante.

background-image

Immagine pulsante per ogni stato.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS .

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

È possibile localizzare la descrizione comando del pulsante Chiudi e il titolo della finestra di dialogo. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare l’intestazione della finestra di dialogo con spaziatura interna, icona 24 x 17 pixel e un titolo in grassetto a 16 pt. Infine, un pulsante Chiudi di 28 x 28 pixel, posizionato due pixel dalla parte superiore e due pixel dalla destra del contenitore di finestre di dialogo:

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

Il piè di pagina della finestra di dialogo è costituito dai pulsanti "annulla" e "invia e-mail". Il contenitore piè di pagina è controllato dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter

Proprietà CSS del ​ piè di pagina della finestra di dialogo

bordo

Bordo che consente di separare visivamente il piè di pagina dal resto della finestra di dialogo.

Il piè di pagina contiene un contenitore interno che contiene entrambi i pulsanti. Viene controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogbuttoncontainer

Proprietà CSS del contenitore del pulsante della finestra di dialogo

riempimento

Spaziatura interna tra piè di pagina e pulsanti.

Il pulsante Annulla è controllato dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton

Proprietà CSS del pulsante Annulla della finestra di dialogo

width

Larghezza pulsante.

height

Altezza pulsante.

color

Colore testo pulsante per ogni stato.

background-color

Colore di sfondo pulsante per ogni stato.

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

Il pulsante Invia e-mail è controllato dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton

Proprietà CSS del pulsante di azione della finestra di dialogo

width

Larghezza pulsante.

height

Altezza pulsante.

color

Colore testo pulsante per ogni stato.

background-color

Colore di sfondo pulsante per ogni stato.

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

Inoltre, entrambi i pulsanti condividono la stessa classe CSS che può contenere impostazioni CSS identiche a quelle degli altri pulsanti della finestra di dialogo:

.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter .s7button

Proprietà CSS del pulsante

font-weight

Spessore font pulsante.

font-size

Dimensione font pulsante.

font-family

Famiglia font pulsante.

line-height

Altezza del testo all'interno del pulsante. Influisce sull'allineamento verticale.

box-shadow

Ombra esterna.

margine destro

Margine pulsante destro.

Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un piè di pagina della finestra di dialogo con il pulsante Annulla 64 x 34 e il pulsante Invia e-mail 82 x 34. Infine, il colore del testo e il colore di sfondo sono diversi per ogni stato del pulsante:

.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7smartcropvideoviewer .s7emaildialog .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 e il pannello di scorrimento a destra. In tutti i casi in cui il componente gestisce la larghezza di quest’area, non è possibile impostarla in CSS. L’area della finestra di dialogo principale è controllata dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea

Proprietà CSS della finestra di dialogo ​ area di visualizzazione

height

Altezza 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 per occupare l'intera finestra del browser.

background-color

Colore di sfondo dell'area della finestra di dialogo principale.

margine

Margine esterno.

NOTA

L'area della finestra di dialogo principale supporta l'opzione state selettore di attributi. È impostato su sendsuccess quando il modulo e-mail viene inviato e nella finestra di dialogo viene visualizzato un messaggio di conferma. Se il messaggio di conferma è piccolo, questo selettore di attributi può essere utilizzato per ridurre l’altezza della finestra di dialogo quando viene visualizzato tale messaggio di conferma.

Esempio: per impostare l'area della finestra di dialogo principale su un'altezza iniziale di 300 pixel e su un'altezza di 100 pixel quando viene visualizzato il messaggio di conferma, impostate un margine di dieci pixel e utilizzate uno sfondo bianco:

.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

Tutto il contenuto del modulo (come etichette e campi di input) si trova all’interno di un contenitore controllato con

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody

Se l’altezza del contenitore risulta maggiore dell’area della finestra di dialogo principale, il componente abilita automaticamente uno scorrimento verticale.

Proprietà CSS del ​ del corpo della finestra di dialogo

riempimento

Spaziatura interna.

Esempio: per impostare il contenuto del modulo su una spaziatura di dieci pixel:

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody {
    padding: 10px;
}

Il modulo della finestra di dialogo viene compilato riga per riga, dove ogni riga contiene una parte del contenuto del modulo, ad esempio un'etichetta e un campo di immissione testo. Una singola riga di modulo è controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogline

Proprietà CSS della riga della finestra di dialogo

riempimento

Spaziatura interna riga.

Esempio: per impostare una maschera di finestra di dialogo con una spaziatura di dieci pixel per ogni linea:

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

Tutte le etichette statiche nel modulo della finestra di dialogo sono controllate da

.s7smartcropvideoviewer .s7emaildialog .s7dialoglabel

Questa classe non è adatta per controllare le dimensioni o la posizione delle etichette, poiché può essere applicata a testi in varie posizioni dell'interfaccia utente del modulo.

Proprietà CSS dell'etichetta della finestra di dialogo. ​

font-weight

Spessore font etichetta.

font-size

Dimensione font etichetta.

font-family

Famiglia font etichetta.

color

Colore testo etichetta.

Le etichette delle finestre di dialogo possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare tutte le etichette come grigie, in grassetto con un carattere di nove pixel:

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

Tutte le etichette statiche visualizzate a sinistra dei campi di input del modulo sono controllate da:

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputlabel

Proprietà CSS dell'etichetta di input della finestra di dialogo

width

Larghezza dell'etichetta statica.

text-align

Allineamento orizzontale del testo.

margine

Margine etichetta statico.

riempimento

Spaziatura per etichette statiche.

Esempio: per impostare le etichette dei campi di input su una larghezza di 50 pixel, allineate a destra, con dieci pixel di spaziatura interna e un margine di dieci pixel a destra:

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

Ogni campo di input del modulo viene racchiuso nel contenitore, che consente di applicare un bordo personalizzato attorno al campo di input. Viene controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer

Proprietà CSS del contenitore di input della finestra di dialogo

bordo

Bordo intorno al contenitore del campo di input.

riempimento

Spaziatura interna.

NOTA

Il contenitore del campo di input supporta gli elementi facoltativi state selettore di attributi. È impostato su verifyerror quando l’utente commette un errore nel formato dei dati di input e la convalida in linea non riesce. Questo selettore di attributi può essere utilizzato per evidenziare un input utente errato nel modulo.

La maggior parte dei campi di input che si estendono dall'etichetta a sinistra fino al bordo destro del corpo della finestra di dialogo (che include il campo "Da" e il campo "Messaggio") sono controllati da:

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputwide

Proprietà CSS del campo a livello di input della finestra di dialogo

width

Larghezza campo di input.

Il campo di input "A" è più stretto perché alloca spazio per il pulsante "Rimuovi e-mail" a destra. Viene controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputshort

Proprietà CSS del campo breve di input della finestra di dialogo

width

Larghezza campo di input.

Esempio: per impostare un modulo con un bordo grigio di un pixel con nove pixel di spaziatura attorno a tutti i campi di input. Per avere lo stesso bordo in rosso per i campi che non superano la convalida, per avere un campo di input "A" di 250 pixel e il resto dei campi di input di 300 pixel di larghezza:

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

Il campo di input del messaggio e-mail è controllato anche con:

.s7smartcropvideoviewer .s7emaildialog .s7dialogmessage

Questa classe consente di impostare proprietà specifiche per il sottostante TEXTAREA elemento.

Proprietà CSS del messaggio della finestra di dialogo

height

Altezza del messaggio.

ritorno a capo automatico

Stile a capo automatico.

Esempio: per impostare un messaggio e-mail con un’altezza di 50 pixel e utilizzare break-word ritorno a capo automatico:

.s7smartcropvideoviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

Il pulsante "Aggiungi un altro indirizzo e-mail" consente a un utente di aggiungere più di un destinatario nel modulo e-mail. Viene controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton

Proprietà CSS della finestra di dialogo pulsante Aggiungi indirizzo e-mail

height

Altezza pulsante.

color

Colore testo pulsante per ogni stato.

background-image

Immagine pulsante per ogni stato.

background-position

Posizione dell'immagine del pulsante all'interno dell'area del pulsante.

font-weight

Spessore font pulsante.

font-size

Dimensione font pulsante.

font-family

Famiglia font pulsante.

line-height

Altezza del testo all'interno del pulsante. Influisce sull'allineamento verticale.

text-align

Allineamento orizzontale del testo.

riempimento

Spaziatura interna.

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare il pulsante "Aggiungi un altro indirizzo e-mail" ad un’altezza di 25 pixel, utilizza un font in grassetto a 12 punti con allineamento a destra e un colore di testo e un’immagine diversi per ogni stato:

.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

Il pulsante "Rimuovi" consente a un utente di rimuovere indirizzi aggiuntivi dal modulo e-mail. Viene controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton

Proprietà CSS della finestra di dialogo Rimuovi pulsante e-mail

width

Larghezza pulsante.

height

Altezza pulsante.

background-image

Immagine pulsante per ogni stato.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS .

NOTA

Questo pulsante supporta state selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio - per impostare un pulsante "Rimuovi" di 25 x 25 pixel e usare un'immagine diversa per ogni stato:

.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

Il contenuto condiviso viene visualizzato nella parte inferiore del corpo della finestra di dialogo e include una miniatura, un titolo, un URL di origine e una descrizione. È avvolto in un contenitore controllato con:

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogcontent

Proprietà CSS della finestra di dialogo ​ contenuto

bordo

Bordo contenitore.

riempimento

Spaziatura interna.

Esempio: per impostare un contenitore inferiore con un bordo punteggiato di un pixel e senza spaziatura interna:

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

L’immagine miniatura viene controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogthumbnail

Il background-image viene impostata dalla logica del componente.

Proprietà CSS dell'immagine miniatura della finestra di dialogo

width

Larghezza miniatura.

height

Altezza miniature.

Allineamento verticale

Miniatura allineamento verticale.

riempimento

Spaziatura interna.

Esempio: per impostare la miniatura su 90 x 60 pixel e allineata in alto con dieci pixel di spaziatura interna:

.s7smartcropvideoviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

Il titolo, l’origine e la descrizione del contenuto sono ulteriormente raggruppati in un pannello a destra della miniatura del contenuto. Viene controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialoginfopanel

Proprietà CSS del pannello informazioni della finestra di dialogo

width

Larghezza pannello.

Esempio: per impostare una larghezza di 300 pixel per il pannello informazioni contenuto:

.s7smartcropvideoviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

Il titolo del contenuto è controllato dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogtitle

Proprietà CSS del titolo della finestra di dialogo

margine

Margine esterno.

font-weight

Spessore font.

font-size

Dimensione font.

font-family

Famiglia di caratteri.

Esempio: per impostare un titolo di contenuto con font in grassetto e un margine di dieci pixel:

.s7smartcropvideoviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

L’origine del contenuto è controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogorigin

Proprietà CSS della finestra di dialogo ​ origine contenuto

margine

Margine esterno.

font-weight

Spessore font.

font-size

Dimensione font.

font-family

Famiglia di caratteri.

Esempio: per impostare l’origine del contenuto con un margine di dieci pixel:

.s7smartcropvideoviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

La descrizione del contenuto è controllata dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogdescription

Proprietà CSS della descrizione del contenuto della finestra di dialogo

margine

Margine esterno.

font-weight

Spessore font.

font-size

Dimensione font.

font-family

Famiglia di caratteri.

Esempio: per impostare una descrizione del contenuto con un margine di dieci pixel e utilizzare un font a nove punti:

.s7smartcropvideoviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

Quando un utente immette dati di input errati e la convalida in linea non riesce o quando la finestra di dialogo deve restituire un errore o un messaggio di conferma al momento dell’invio del modulo, nella parte superiore del corpo della finestra di dialogo viene visualizzato un messaggio. Viene controllata con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage

Messaggio di errore Proprietà CSS della finestra di dialogo

background-image

Icona di errore. Il valore predefinito è un punto esclamativo.

background-position

Posizione dell'icona di errore all'interno dell'area messaggi.

color

Colore testo messaggio.

font-weight

Spessore font.

font-size

Dimensione font.

font-family

Famiglia di caratteri.

line-height

Altezza del testo nel messaggio. Influisce sull'allineamento verticale.

riempimento

Spaziatura interna.

NOTA

Questo messaggio supporta state selettore di attributi con i seguenti valori possibili: verifyerror, senderror, e sendsuccess. Il valore verifyerror è impostato quando un messaggio viene visualizzato a causa di un errore di convalida dell’input in linea. Il valore senderror è impostato quando un servizio e-mail back-end segnala un errore. Il sendsuccess Il valore viene impostato quando l’e-mail viene inviata correttamente. In questo modo è possibile assegnare al messaggio uno stile diverso a seconda dello stato della finestra di dialogo.

Il messaggio di errore può essere localizzato. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare un messaggio per l’utilizzo di un font in grassetto a dieci punti, utilizza un’altezza di linea di 25 pixel e una spaziatura interna di 20 pixel a sinistra. Inoltre, utilizza un’icona del punto esclamativo, del testo rosso in caso di errore e non un’icona e del testo verde in caso di esito positivo:

.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

Se è necessario lo scorrimento verticale, la barra di scorrimento viene riprodotta nel pannello vicino al bordo destro della finestra di dialogo, che è controllata dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7dialogscrollpanel

Proprietà CSS del pannello di scorrimento della finestra di dialogo

width

Larghezza pannello di scorrimento.

Esempio: per impostare un pannello di scorrimento con una larghezza di 44 pixel:

.s7smartcropvideoviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

L’aspetto dell’area della barra di scorrimento è controllato dal seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar

Proprietà CSS della barra di scorrimento

width

Larghezza della barra di scorrimento.

top

Scostamento della barra di scorrimento verticale dalla parte superiore del pannello di scorrimento.

bottom

Scostamento della barra di scorrimento verticale dalla parte inferiore del pannello di scorrimento.

destra

Scostamento della barra di scorrimento orizzontale dal bordo destro del pannello di scorrimento.

Esempio: per impostare una barra di scorrimento larga 28 pixel, con un margine di otto pixel dalla parte superiore, destra e inferiore del pannello di scorrimento:

.s7smartcropvideoviewer .s7emaildialog .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 della traccia. Il brano è controllato con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolltrack

Proprietà CSS del brano di scorrimento

width

Larghezza della traccia.

background-color

Colore di sfondo del brano.

Esempio: per impostare una traccia della barra di scorrimento larga 28 pixel e con sfondo grigio:

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

Il pollice della barra di scorrimento si sposta verticalmente all'interno dell'area della traccia di scorrimento. La sua posizione verticale è completamente controllata dalla logica del componente, tuttavia l’altezza del pollice non cambia in modo dinamico a seconda della quantità di contenuto. Puoi configurare l’altezza del pollice e altri aspetti con il seguente selettore di classe CSS:

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb

Proprietà CSS del cursore della barra di scorrimento

width

Larghezza del pollice.

height

Altezza del pollice.

riempimento superiore

Spaziatura verticale tra la parte superiore del brano.

padding-bottom

Spaziatura verticale tra la parte inferiore del brano.

background-image

Immagine visualizzata per un determinato stato del pollice.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS .

NOTA

Il miniatura supporta state selettore di attributi, che può essere utilizzato per applicare skin diversi a stati miniatura diversi: up, down, over, e disabled.

Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare il pollice della barra di scorrimento che è di 28 x 45 pixel, ha un margine di dieci pixel in alto e in basso e ha un disegno diverso per ogni stato:

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

L’aspetto dei pulsanti di scorrimento superiore e inferiore è controllato dai seguenti selettori di classi CSS:

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Proprietà CSS dei pulsanti di scorrimento superiore e inferiore

width

Larghezza pulsante.

height

Altezza pulsante.

background-image

Immagine visualizzata per un determinato stato del pulsante.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS .

NOTA

Questi pulsanti supportano state selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di pulsante diversi: up, down, over, e disabled.

Esempio - per impostare pulsanti di scorrimento di 28 x 32 pixel con grafica diversa per ogni stato:

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}

In questa pagina