Stampa print

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.

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

NOTE
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.
NOTE
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.
NOTE
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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8