Lo strumento Stampa è costituito da un pulsante aggiunto alla barra di controllo e dalla finestra di dialogo modale visualizzata quando lo strumento viene attivato.
L'aspetto del pulsante di stampa è controllato dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7print
Proprietà CSS del pulsante Stampa
margin-top |
Offset dalla parte superiore della barra di controllo. |
margin-left |
Distanza dal pulsante successivo a sinistra o dal lato sinistro della barra di controllo se questo pulsante è il primo di una riga. |
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. Vedi anche Spunti CSS . |
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 di stampa di 28 x 28 pixel e visualizzare un'immagine diversa per ciascuno dei quattro diversi stati del pulsante.
.s7ecatalogsearchviewer .s7print {
margin-top: 4px;
margin-left: 10px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7print[state='up'] {
background-image:url(images/v2/Print_dark_up.png);
}
.s7ecatalogsearchviewer .s7print[state='over'] {
background-image:url(images/v2/Print_dark_over.png);
}
.s7ecatalogsearchviewer .s7print[state='down'] {
background-image:url(images/v2/Print_dark_down.png);
}
.s7ecatalogsearchviewer .s7print[state='disabled'] {
background-image:url(images/v2/Print_dark_disabled.png);
}
La sovrapposizione dello sfondo che copre la pagina web quando la finestra di dialogo è attiva è controllata dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .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%:
.s7ecatalogsearchviewer .s7printdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
Per impostazione predefinita, la finestra di dialogo modale viene visualizzata centrata sullo schermo dei sistemi desktop. 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:
.s7ecatalogsearchviewer .s7kprintdialog .s7dialog
Proprietà CSS della finestra di dialogo
border-radius |
Raggio bordo finestra di dialogo. |
background-color |
Colore di sfondo della finestra di dialogo; |
Esempio - Per impostare una finestra di dialogo con uno sfondo grigio:
.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}
L'intestazione della finestra di dialogo è costituita da un'icona, un testo del titolo e un pulsante di chiusura. Il contenitore di intestazione è controllato con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .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 con quanto segue:
.s7ecatalogsearchviewer .s7printdialog .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:
.s7ecatalogsearchviewer .s7printdialog .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. Vedi anche Spunti CSS . |
Il titolo dell’intestazione è controllato dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .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:
.s7ecatalogsearchviewer .s7printdialog .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. Vedi anche Spunti CSS . |
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, un’icona di 22 x 22 pixel e un titolo in grassetto a 16 punti. Infine, un pulsante Chiudi di 28 x 28 pixel ha posizionato due pixel dalla parte superiore e due pixel dalla parte destra del contenitore della finestra di dialogo:
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon {
background-image: url("images/sdk/dlgprint_cap.png");
height: 22px;
width: 22px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7printdialog .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 a stampa. Il contenitore piè di pagina è controllato dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .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:
.s7ecatalogsearchviewer .s7printdialog .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:
.s7ecatalogsearchviewer .s7printdialog .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. |
Questo pulsante supporta state
selettore di attributi, che può essere utilizzato per applicare interfacce diverse a stati di pulsante diversi.
Il pulsante Invia a stampa è controllato dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .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. |
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:
.s7ecatalogsearchviewer .s7printdialog .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 a stampa 96 x 34, con il colore del testo e il colore di sfondo diversi per ogni stato del pulsante:
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton {
width:96px;
height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
L’area della finestra di dialogo principale (tra l’intestazione e il piè di pagina) contiene il contenuto della finestra di dialogo. In tutti i casi in cui il componente gestisce la larghezza di quest’area, non è possibile impostarla in CSS. L’area della finestra di dialogo principale è controllata con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea
Proprietà CSS della finestra di dialogo area di visualizzazione
height |
Altezza della finestra di dialogo principale. |
background-color |
Colore di sfondo dell'area della finestra di dialogo principale. |
margine |
Margine esterno. |
Esempio: per impostare un'area di dialogo principale con un'altezza calcolata automaticamente, avere un margine di dieci pixel e utilizzare uno sfondo bianco:
.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:auto;
}
Tutto il contenuto del modulo (come etichette e campi di input) si trova all’interno di un contenitore controllato con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogbody
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:
.s7ecatalogsearchviewer .s7printdialog .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:
.s7ecatalogsearchviewer .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:
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
La dimensione del blocco di contenuto della finestra di dialogo è controllata con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide
Proprietà CSS della larghezza di input della finestra di dialogo
width |
Larghezza blocco. |
riempimento |
Spaziatura interna riga. |
Esempio: per impostare una larghezza di un blocco di contenuto pari a 430 pixel con una spaziatura inferiore di 10 pixel:
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
Tutte le etichette statiche nel modulo della finestra di dialogo sono controllate con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel
Questa classe non è adatta per il controllo della dimensione o della posizione dell'etichetta perché può essere applicata a testi in varie posizioni nell'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 in grigio, grassetto, con un carattere di nove pixel:
.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
I controlli di input vengono racchiusi nel contenitore e controllati con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer
Proprietà CSS del contenitore di input della finestra di dialogo
padding-left |
Spaziatura interna. |
Esempio: per impostare una spaziatura di 30 pixel dal bordo sinistro della finestra di dialogo.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
padding-left: 30px;
}
I pulsanti di scelta e il relativo testo della didascalia sono controllati dal seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption
Proprietà CSS dell'opzione della finestra di dialogo
width |
Larghezza totale del pulsante di opzione con una didascalia. |
color |
Colore testo didascalia. |
La spaziatura tra il pulsante di opzione e la relativa didascalia è controllata con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput
Proprietà CSS dell'input dell'opzione della finestra di dialogo
margine destro |
Spaziatura tra il pulsante di opzione e la relativa didascalia. |
I selettori numerici per la selezione dell'intervallo di stampa sono controllati con il seguente selettore di classe CSS
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange
Proprietà CSS della finestra di dialogo intervallo di stampa
width |
Larghezza del selettore numerico. |
margine |
Spaziatura attorno al selettore numerico. |
Esempio: per impostare tutti i pulsanti di scelta su una larghezza di 150 pixel con testo nero, una spaziatura di dieci pixel e selettori numerici di 42 pixel:
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption {
color: #000000;
width: 150px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input {
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange {
margin-left: 10px;
margin-right: 10px;
width: 42px;
}
Il divisore orizzontale tra la selezione dell’intervallo di pagine e le sezioni di layout di stampa è controllato con il seguente selettore di classe CSS:
.s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider
Proprietà CSS del divisore orizzontale
bordo |
Bordo attorno al divisore. |
riempimento |
Spaziatura interna. |
width |
Larghezza divisore. |
margine |
Margine esterno |
Esempio: per impostare un divisore grigio ampio 430 pixel con una spaziatura verticale di 10 pixel su entrambi i lati e un margine di dieci pixel nella parte superiore:
.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
border-top: 1px solid #aaaaaa;
margin-top: 10px;
padding-bottom: 10px;
padding-top: 10px;
width: 430px;
}