Imprimer print

L’outil Impression se compose d’un bouton ajouté à la barre de contrôle et de la boîte de dialogue modale qui s’affiche lorsque l’outil est activé.

L’aspect du bouton d’impression est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7print

Propriétés CSS du bouton d’impression

L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : configurez un bouton d’impression de 28 x 28 pixels et affichant une image différente pour chacun des quatre états de bouton différents.

.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 superposition d’arrière-plan qui recouvre la page Web lorsque la boîte de dialogue est active est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

Propriétés CSS du recouvrement arrière

Exemple - Pour définir le recouvrement d’arrière-plan de manière à ce qu’il soit gris avec un taux d’opacité de 70 % :

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

Par défaut, la boîte de dialogue modale s’affiche centrée à l’écran sur les ordinateurs de bureau. Le positionnement et le dimensionnement de la boîte de dialogue sont gérés par le composant. La boîte de dialogue est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

Propriétés CSS de la boîte de dialogue

Exemple - Pour configurer une boîte de dialogue avec un arrière-plan gris :

.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}

L’en-tête de la boîte de dialogue se compose d’une icône, d’un texte de titre et d’un bouton Fermer. Le conteneur d’en-tête est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

Propriétés CSS de l’en-tête de boîte de dialogue

L’icône et le texte du titre sont enveloppés dans un conteneur supplémentaire contrôlé par les éléments suivants :

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

Propriétés CSS de la ligne de boîte de dialogue

L’icône d’en-tête est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

Propriétés CSS de l’icône d’en-tête de boîte de dialogue

Le titre de l’en-tête est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

Propriétés CSS du texte de l’en-tête de boîte de dialogue

Le bouton Fermer est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

Propriétés CSS de l’ du bouton Fermer

L’info-bulle du bouton Fermer et le titre de la boîte de dialogue peuvent être localisés. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer un en-tête de boîte de dialogue avec marge intérieure, icône de 22 x 22 pixels et titre en gras de 16 points. Enfin, un bouton Fermer de 28 x 28 pixels positionné à deux pixels du haut et à deux pixels de la droite du conteneur de la boîte de dialogue :

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

Le pied de page de boîte de dialogue se compose des boutons Annuler et Envoyer pour impression. Le conteneur de pied de page est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

Propriétés CSS du pied de page de boîte de dialogue ​

Le pied de page comporte un conteneur interne qui conserve les deux boutons. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

Propriétés CSS du conteneur de boutons de boîte de dialogue

Le bouton Annuler est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

Propriétés CSS du bouton Annuler de la boîte de dialogue

Le bouton Envoyer à imprimer est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

Propriétés CSS du bouton d’action de boîte de dialogue

En outre, les deux boutons partagent une classe CSS commune qui peut contenir des paramètres CSS identiques pour les autres boutons de boîte de dialogue :

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

Propriétés CSS du bouton

Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple - Pour configurer un pied de boîte de dialogue avec un bouton Annuler de 64 x 34 et un bouton Envoyer à l’impression de 96 x 34, avec la couleur du texte et la couleur d’arrière-plan différentes pour chaque état de bouton :

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

La zone de dialogue principale, entre l’en-tête et le pied de page, contient le contenu de la boîte de dialogue. Dans tous les cas, le composant gère la largeur de cette zone. Il n’est pas possible de la définir dans CSS. La zone de dialogue principale est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

Propriétés CSS de la zone d’affichage de la boîte de dialogue

Exemple - Pour configurer une zone de dialogue principale afin qu’elle ait une hauteur calculée automatiquement, une marge de dix pixels et un fond blanc :

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

Tout le contenu du formulaire (comme les libellés et les champs de saisie) réside dans un conteneur contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

Propriétés CSS du corps de la boîte de dialogue

Exemple - Pour configurer le contenu d’un formulaire avec une marge intérieure de dix pixels :

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

Le formulaire de boîte de dialogue est rempli ligne par ligne, chaque ligne comportant une partie du contenu du formulaire (comme un libellé et un champ de saisie de texte). Une seule ligne de formulaire est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

Propriétés CSS de la ligne de boîte de dialogue

Exemple - Pour configurer un formulaire de boîte de dialogue avec une marge intérieure de dix pixels pour chaque ligne :

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

La taille du bloc du contenu de la boîte de dialogue est contrôlée avec le sélecteur de classe CSS suivant :

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

Propriétés CSS de la largeur d’entrée de la boîte de dialogue

Exemple : pour définir un bloc de contenu sur une largeur de 430 pixels et une marge intérieure de 10 pixels en bas :

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

Tous les libellés statiques du formulaire de boîte de dialogue sont contrôlés avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

Cette classe ne convient pas pour contrôler la taille ou la position des libellés, car vous pouvez l’appliquer à des textes à différents endroits dans l’interface utilisateur du formulaire.

Propriétés CSS du libellé de la boîte de dialogue. ​

Les libellés des boîtes de dialogue peuvent être localisés. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple - pour configurer toutes les étiquettes en gris, gras, avec une police de neuf pixels :

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

Les commandes de saisie sont encapsulées dans le conteneur et contrôlées avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

Propriétés CSS du conteneur d’entrée de boîte de dialogue

Exemple : pour définir une marge intérieure de 30 pixels à partir du bord gauche de la boîte de dialogue.

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
    padding-left: 30px;
}

Les boutons radio et leur texte de légende sont contrôlés avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

Propriétés CSS de l’option de boîte de dialogue

L’espacement entre le bouton radio et sa légende est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

Propriétés CSS de la boîte de dialogue, option entrée

Les sélecteurs numériques pour la sélection de la plage d’impression sont contrôlés avec le sélecteur de classe CSS suivant

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

Propriétés CSS de la plage d’impression de la boîte de dialogue

Exemple : pour configurer tous les boutons radio sur une largeur de 150 pixels avec du texte noir, un espacement de dix pixels et des sélecteurs numériques de 42 pixels de large :

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

Le séparateur horizontal entre la sélection de la plage de pages et la disposition d’impression est contrôlé par le sélecteur de classe CSS suivant :

 .s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider

Propriétés CSS du séparateur horizontal

Exemple : pour configurer un diviseur gris de 430 pixels de large avec un remplissage vertical de 10 pixels des deux côtés et une marge de dix pixels en haut :

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}