Stampa

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

L’aspetto del pulsante di stampa è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7print

Proprietà CSS del pulsante Stampa

margine superiore

Offset dalla parte superiore della barra di controllo.

margine sinistro

La distanza dal pulsante successivo a sinistra o dal lato sinistro della barra di controllo, se si tratta del primo pulsante di una riga.

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.

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

Esempio: per impostare un pulsante di stampa di 28 x 28 pixel e visualizzare un’immagine diversa per ciascuno dei quattro stati diversi 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 di sfondo che copre la pagina web quando la finestra di dialogo è attiva è controllata con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7printdialog .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 .s7printdialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

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

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

Proprietà CSS della finestra di dialogo

raggio bordo

Raggio del bordo della finestra di dialogo.

colore di sfondo

Colore di sfondo della finestra di dialogo;

Esempio: per impostare una finestra di dialogo con 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 Chiudi. Il contenitore di intestazione è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7printdialog .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 i seguenti elementi:

.s7ecatalogsearchviewer .s7printdialog .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 .s7printdialog .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 .s7printdialog .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 .s7printdialog .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 22 x 22 pixel, il titolo in grassetto a 16 punti e un pulsante Chiudi a 28 x 28 pixel posizionati 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 con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7printdialog .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 .s7printdialog .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 .s7printdialog .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 a stampa è controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7printdialog .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 .s7printdialog .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 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 a stampa 96 x 34, con il colore del testo e il colore dello 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, 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 .s7printdialog .s7dialogviewarea

Proprietà CSS dell’area di visualizzazione della finestra di dialogo

altezza

Altezza dell'area della finestra di dialogo principale.

colore di sfondo

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

margine

Margine esterno.

Esempio: per impostare un’area di dialogo principale in modo che abbia 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) risiede all’interno di un contenitore controllato con il seguente selettore di classe CSS:

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

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 .s7printdialog .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; 
}

La dimensione del blocco di contenuto della finestra di dialogo viene controllata con il seguente selettore di classe CSS:

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

Proprietà CSS della larghezza di input della finestra di dialogo

larghezza

Larghezza del blocco.

spaziatura interna

Spaziatura interna delle linee.

Esempio: per impostare un blocco di contenuto su una larghezza di 430 pixel e con spaziatura inferiore di 10 pixel:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide { 
    padding-bottom: 10px; 
    width: 430px; 
}

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

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

Questa classe non è adatta per controllare la dimensione o la posizione dell'etichetta, perché è possibile applicarla a testi in varie posizioni nell'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 .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

spaziatura sinistra

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

larghezza

Larghezza totale del pulsante di scelta con una didascalia.

color

Colore testo didascalia.

La spaziatura tra il pulsante di scelta e la relativa didascalia è controllata dal 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 scelta e la relativa didascalia.

I selettori numerici per la selezione dell’intervallo di stampa sono controllati dal seguente selettore di classi CSS

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

Proprietà CSS dell'intervallo di stampa della finestra di dialogo

larghezza

Larghezza del selettore numerico.

margine

Spaziatura intorno al selettore numerico.

Esempio: per impostare tutti i pulsanti di scelta su una larghezza di 150 pixel con testo nero, spaziatura tra 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 del layout di stampa è controllato con il seguente selettore di classe CSS:

 .s7ecatalogsearchviewer 
.s7printdialog .s7horizontaldivider

Proprietà CSS del divisore orizzontale

border

Bordo intorno al divisore.

spaziatura interna

Spaziatura interna.

larghezza

Larghezza del divisore.

margine

Margine esterno

Esempio: per impostare un divisore grigio largo 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; 
}

In questa pagina