Stampa print

Stampa strumento è costituito da un pulsante aggiunto alla barra di controllo e dalla finestra di dialogo modale che viene visualizzata quando viene attivato il strumento.

L'aspetto del pulsante di stampa è controllato con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7print

Proprietà CSS del pulsante di stampa

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

Esempio: per impostare un pulsante di stampa di 28 x 28 pixel e visualizzi un'immagine diversa per ciascuno dei quattro diversi stati 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);
}

Lo sfondo sovrapposizione che copre la pagina Web quando la finestra di dialogo è attiva, è controllato con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

Proprietà CSS del sovrapposizione posteriore

Esempio: per impostare il sovrapposizione di sfondo in grigio con il 70% di opacità:

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Per impostazione predefinita, la finestra di dialogo modale viene visualizzata centrata sullo schermo nei sistemi desktop. Il posizionamento e il ridimensionamento della finestra di dialogo sono gestiti dal componente. La finestra di dialogo è controllata con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

Proprietà CSS 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 chiuso. Il contenitore dell'intestazione è controllato con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

Proprietà CSS dell'intestazione della finestra di dialogo

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

L'icona dell'intestazione è controllata con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

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

Chiudi pulsante è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

Proprietà CSS della close pulsante ​

Il Chiudi pulsante strumento suggerimento e il titolo della finestra di dialogo può essere localizzato. Per ulteriori informazioni, consulta Localizzazione di utente elementi dell'interfaccia.

Esempio: per impostare un'intestazione della finestra di dialogo con spaziatura interna, un'icona di 22 x 22 pixel e un titolo in grassetto di 16 punti. Infine, un Chiudi da 28 x 28 pixel pulsante posizionato a due pixel dalla parte superiore e a due pixel dalla 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 con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

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

Il piè di pagina ha un contenitore interno che contiene entrambi i pulsanti. È controllato con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

Proprietà CSS della finestra di dialogo pulsante del contenitore

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

Proprietà CSS della finestra di dialogo Annulla pulsante

Invia a Stampa pulsante è controllata con il seguente selettore della classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

Proprietà CSS del pulsante di azione della finestra di dialogo

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

Le descrizioni dei pulsanti possono essere localizzate. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio: per impostare un piè di pagina della finestra di dialogo con un pulsante di 64 x 34 Annulla e un pulsante Invia a Stampa 96 x 34, con il colore del testo e il colore di sfondo diversi per ogni stato 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 di dialogo principale, tra l'intestazione e il piè di pagina, contiene contenuto della finestra di dialogo. In tutti i casi, il componente gestisce la larghezza di quest'area, non è possibile impostarlo in CSS. L'area di dialogo principale è controllata dalla seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

Proprietà CSS dell'area di visualizzazione della finestra di dialogo ​

Esempio: per impostare un'area di dialogo principale in modo che abbia un'altezza calcolata automaticamente, abbia un margine di dieci pixel e utilizzi uno sfondo bianco:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:auto;
}

Tutti i contenuto modulo (like etichette e campi di input) risiedono all'interno di un contenitore controllato con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

Proprietà CSS del corpo della finestra di dialogo ​

Esempio: per impostare la contenuto del modulo in modo che la spaziatura di dieci pixel sia impostata su 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 modulo contenuto (like un'etichetta e un campo di immissione del testo). La linea a forma singola è controllata con la seguente classe CSS selettore:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

Proprietà CSS della riga della finestra di dialogo

Esempio - per impostare un modulo della finestra di dialogo in modo che abbia dieci pixel di spaziatura per ogni riga:

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

La dimensione del blocco di contenuto finestra di dialogo è controllata con i seguenti selettore di classe CSS:

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

Proprietà CSS della larghezza di input della finestra di dialogo

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 controllare le dimensioni o la posizione dell'etichetta perché è possibile applicarla ai testi in varie posizioni nel modulo utente interfaccia.

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

Le etichette delle finestre di dialogo possono essere localizzate. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

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

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 testo delle didascalie sono controllati con le seguenti selettore di classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

Proprietà CSS dell'opzione della finestra di dialogo

La spaziatura tra il pulsante radio e la relativa didascalia è controllata con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

Proprietà CSS della finestra di dialogo Input opzione

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

Esempio: per impostare tutti i pulsanti di scelta in modo che abbiano una larghezza di 150 pixel con testo nero, spaziatura di dieci pixel e selettori numerici larghi 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

Esempio: per impostare un divisore grigio di 430 pixel di larghezza con un margine 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;
}