Condivisione e-mail

Lo strumento di condivisione e-mail è 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 e-mail è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emailshare

Proprietà CSS dello strumento di condivisione e-mail

width

Larghezza del 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 anche Sprite CSS .

NOTA

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. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

Proprietà CSS della sovrapposizione posteriore

opacità

Opacità sovrapposizione sfondo.

colore di sfondo

Colore sovrapposizione sfondo.

Esempio: per impostare una sovrapposizione di sfondo grigio con opacità del 70%:

.s7ecatalogsearchviewer .s7emaildialog .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 è controllata dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .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’intera finestra del 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 sui 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 sui dispositivi touch).

Esempio: per impostare una finestra di dialogo che utilizzi l’intera finestra del browser e abbia uno sfondo bianco sui dispositivi touch:

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

.s7ecatalogsearchviewer .s7emaildialog .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

.s7ecatalogsearchviewer .s7emaildialog .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:

.s7ecatalogsearchviewer .s7emaildialog .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 anche Sprite CSS .

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

.s7ecatalogsearchviewer .s7emaildialog .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:

.s7ecatalogsearchviewer .s7emaildialog .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 anche Sprite CSS .

NOTA

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. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader { 
 padding: 10px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlgemail_cap.png"); 
    height: 17px; 
    width: 24px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7ecatalogsearchviewer .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 con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .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 entrambi i pulsanti. È controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

Proprietà CSS del contenitore pulsanti della finestra di dialogo

spaziatura interna

Spaziatura interna tra il piè di pagina e i pulsanti.

Il pulsante Annulla è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .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.

NOTA

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

Proprietà CSS del pulsante di azione 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.

NOTA

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 la stessa classe CSS comune che può contenere impostazioni CSS uguali per altri pulsanti della finestra di dialogo:

.s7ecatalogsearchviewer .s7emaildialog .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 comandi dei pulsanti possono essere localizzate. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

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

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

.s7ecatalogsearchviewer .s7emaildialog .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.

NOTA

L’area della finestra di dialogo principale supporta il selettore di attributi opzionale state. Viene impostato su sendsuccess quando il modulo e-mail viene inviato e la finestra di dialogo visualizza 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 il messaggio di conferma.

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

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

Tutto il contenuto del modulo (come etichette e campi di input) risiede all’interno di un contenitore controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .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 del modulo con una spaziatura di dieci pixel:

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

Il modulo della finestra di dialogo viene compilato riga per riga, in cui ogni riga contiene una parte del contenuto del modulo (come un’etichetta e un campo di immissione testo). La riga a modulo singolo è controllata dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

Proprietà CSS della riga della finestra di dialogo

spaziatura interna

Spaziatura interna delle linee.

Esempio: per impostare un modulo di finestra di dialogo con una spaziatura di dieci pixel per ogni riga:

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

Tutte le etichette statiche nel modulo della finestra di dialogo vengono controllate con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

Questa classe non è adatta per controllare le dimensioni o la posizione delle etichette 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. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio: per impostare tutte le etichette in modo che siano di colore grigio, grassetto e con un carattere di nove pixel:

.s7ecatalogsearchviewer .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 mediante:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

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

larghezza

Larghezza dell’etichetta statica.

text-align

Allineamento orizzontale del testo.

margine

Margine etichetta statico.

spaziatura interna

Spaziatura statica delle etichette.

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

.s7ecatalogsearchviewer .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 intorno al campo di input. È controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

Proprietà CSS del contenitore di input della finestra di dialogo

border

Bordo intorno al contenitore del campo di input.

spaziatura interna

Spaziatura interna.

NOTA

Il contenitore di campi di input supporta il selettore di attributi opzionale state. Viene 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 l’input dell’utente errato nel modulo.

La maggior parte dei campi di input distribuiti dall’etichetta a sinistra fino al bordo destro del corpo della finestra di dialogo (che include i campi Da e Messaggio ) sono controllati dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

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

larghezza

Larghezza campo di input.

Il campo A è più stretto perché assegna spazio al pulsante Rimuovi e-mail a destra. È controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

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

larghezza

Larghezza campo di input.

Esempio: per impostare un modulo con un bordo grigio di un pixel con nove pixel di spaziatura intorno a tutti i campi di input; avere lo stesso bordo in rosso per i campi con errore di convalida, avere un campo wide-To di 250 pixel e il resto dei campi di input con una larghezza di 300 pixel:

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

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

Proprietà CSS del messaggio della finestra di dialogo

altezza

Altezza del messaggio.

ritorno a capo

Stile di wrapping della parola.

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

.s7ecatalogsearchviewer .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 indirizzo tramite e-mail. È controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

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

altezza

Altezza del pulsante.

color

Colore del testo del pulsante per ogni stato.

immagine di sfondo

Immagine pulsante per ogni stato.

posizione di sfondo

Posizione dell'immagine del pulsante all'interno dell'area 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.

text-align

Allineamento orizzontale del testo.

spaziatura interna

Spaziatura interna.

NOTA

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

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

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

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

Il pulsante Rimuovi consente a un utente di rimuovere altri indirizzi dal modulo e-mail. È controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

Proprietà CSS della finestra di dialogo rimuovi il pulsante e-mail

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 anche Sprite CSS .

NOTA

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

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio: per impostare un pulsante Rimuovi su 25 x 25 pixel e utilizzare un’immagine diversa per ogni stato:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton { 
 width:25px; 
 height:25px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7ecatalogsearchviewer .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, l’URL di origine e una descrizione. Viene racchiuso in un contenitore controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

Proprietà CSS del contenuto della finestra di dialogo

border

Bordo del contenitore.

spaziatura interna

Spaziatura interna.

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

La proprietà background-image viene impostata dalla logica del componente.

Proprietà CSS dell’immagine miniatura della finestra di dialogo

larghezza

Larghezza miniature.

altezza

Altezza miniature.

allineamento verticale

Miniatura di allineamento verticale.

spaziatura interna

Spaziatura interna.

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

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

Titolo del contenuto, origine e descrizione sono ulteriormente raggruppati in un pannello a destra della miniatura del contenuto. È controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

Proprietà CSS del pannello informazioni della finestra di dialogo

larghezza

Larghezza pannello.

Esempio: per impostare un pannello di informazioni sul contenuto con una larghezza di 300 pixel:

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

Proprietà CSS del titolo della finestra di dialogo

margine

Margine esterno.

font-weight

Spessore del carattere.

font-size

Dimensione del carattere.

font-family

Famiglia di caratteri.

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

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

L’origine contenuto è controllata dal seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

Proprietà CSS dell’origine del contenuto della finestra di dialogo

margine

Margine esterno.

font-weight

Spessore del carattere.

font-size

Dimensione del carattere.

font-family

Famiglia di caratteri.

Esempio: per impostare l’origine del contenuto in modo che abbia un margine di dieci pixel:

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

Descrizione del contenuto delle proprietà CSS della finestra di dialogo

margine

Margine esterno.

font-weight

Spessore del carattere.

font-size

Dimensione del carattere.

font-family

Famiglia di caratteri.

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

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

Quando un utente immette dati di input non corretti e la convalida in linea non riesce, o quando la finestra di dialogo deve eseguire il rendering di un errore o di un messaggio di conferma quando il modulo viene inviato, viene visualizzato un messaggio nella parte superiore del corpo della finestra di dialogo. È controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

Proprietà CSS del messaggio di errore della finestra di dialogo

immagine di sfondo

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

posizione di sfondo

Posizione dell’icona di errore all’interno dell’area del messaggio.

color

Colore testo del messaggio.

font-weight

Spessore del carattere.

font-size

Dimensione del carattere.

font-family

Famiglia di caratteri.

altezza riga

Altezza del testo all’interno del messaggio. Interessa l’allineamento verticale.

spaziatura interna

Spaziatura interna.

NOTA

Questo messaggio supporta il selettore di attributi state con i seguenti valori possibili: verifyerror, senderror e sendsuccess. verifyerror è impostato quando viene visualizzato un messaggio a causa di un errore di convalida dell’input in linea; senderror è impostato quando un servizio e-mail di backend segnala un errore; sendsuccess 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.

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio: per impostare un messaggio per l’utilizzo di un font a dieci punti in grassetto, avere un’altezza di riga di 25 pixel, spaziatura di 20 pixel a sinistra, utilizzare un’icona a forma di punto esclamativo, testo rosso in caso di errore e nessuna icona e testo verde in caso di successo:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] { 
    background-image: none; 
    color: #00B200; 
} 
.s7ecatalogsearchviewer .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, controllata con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .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 una larghezza di 44 pixel:

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

Proprietà CSS della barra di scorrimento

larghezza

Larghezza della 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, un margine di otto pixel dalla parte superiore, destra e inferiore del pannello di scorrimento:

.s7ecatalogsearchviewer .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 del brano. La traccia viene controllata con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

Proprietà CSS della traccia di scorrimento

larghezza

Larghezza del binario.

colore di sfondo

Colore di sfondo del brano.

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

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

La 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. Puoi configurare l’altezza del pollice e altri aspetti con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

Proprietà CSS della miniatura della barra di scorrimento

larghezza

Larghezza pollice.

altezza

L'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.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Vedi anche Sprite CSS .

NOTA

La funzione Thumb supporta il selettore di attributi state, 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 nella parte superiore e inferiore e ha un’immagine diversa per ogni stato:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb { 
    height: 45px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 28px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] { 
 background-image:url("images/sdk/scrollbar_thumb_up.png"); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] { 
 background-image:url("images/sdk/scrollbar_thumb_down.png"); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] { 
 background-image:url("images/sdk/scrollbar_thumb_over.png"); 
} 
.s7ecatalogsearchviewer .s7emaildialog .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:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right. Al contrario, la logica del visualizzatore li posiziona automaticamente.

Proprietà CSS dei pulsanti di scorrimento superiore e inferiore

larghezza

Larghezza del 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 anche Sprite CSS .

NOTA

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

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio: per impostare pulsanti di scorrimento con 28 x 32 pixel e immagini diverse per ogni stato:

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

In questa pagina