Imprimer

L’outil d’impression est constitué 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é à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7print

Propriétés CSS du bouton d’impression

margin-top

Décalage par rapport au haut de la barre de contrôle.

margin-left

Distance du bouton suivant à gauche ou du côté gauche de la barre de contrôle s’il s’agit du premier bouton d’une ligne.

width

Largeur du bouton.

height

Hauteur du bouton.

background-image

Image affichée pour un état de bouton donné.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi CSS Sprites .

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

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

Exemple : pour configurer un bouton d’impression de 28 x 28 pixels et afficher 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 en arrière-plan qui couvre la page web lorsque la boîte de dialogue est principale est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

Propriétés CSS de la superposition arrière

opacité

Opacité de la superposition en arrière-plan.

arrière-plan-couleur

Couleur de superposition de l’arrière-plan.

Exemple : pour configurer une superposition en arrière-plan de sorte qu’elle soit grise avec une opacité de 70 % :

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

Par défaut, la boîte de dialogue modale s’affiche de manière centralisée dans l’écran sur les systèmes 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 avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

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

border-radius

Rayon de bordure de la boîte de dialogue.

arrière-plan-couleur

Couleur d’arrière-plan 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 de fermeture. Le conteneur d’en-tête est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

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

remplissage

Marge intérieure du contenu de l’en-tête.

L’icône et le texte du titre sont placé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

remplissage

Marge intérieure de l’icône et du titre de l’en-tête.

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 la boîte de dialogue

width

Largeur de l’icône.

height

Hauteur de l’icône.

background-image

Image de l’icône.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi CSS Sprites .

Le titre d’en-tête est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

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

font-weight

Poids de police.

font-size

Hauteur de la police.

font-family

Famille de polices.

remplissage

Marge intérieure du texte interne.

Le bouton Fermer est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

Propriétés CSS du bouton de fermeture

haut

Position verticale des boutons par rapport au conteneur d’en-tête.

droite

Position du bouton horizontal par rapport au conteneur d’en-tête.

width

Largeur du bouton.

height

Hauteur du bouton.

remplissage

Marge intérieure du bouton.

background-image

Image de bouton pour chaque état.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi CSS Sprites .

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

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

Exemple : pour configurer l’en-tête de la boîte de dialogue avec marge intérieure, une icône de 22 x 22 pixels, un titre en gras de 16 points et un bouton Fermer de 28 x 28 pixels positionnés deux pixels du haut et deux pixels à 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 la boîte de dialogue se compose des boutons Annuler et Envoyer à l’impression . Le conteneur de pied de page est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

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

bordure

Bordure que vous pouvez utiliser pour séparer visuellement le pied de page du reste de la boîte de dialogue.

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

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

remplissage

Marge intérieure entre le pied de page et les boutons.

Le bouton Annuler est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

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

width

Largeur du bouton.

height

Hauteur du bouton.

color

Couleur de texte des boutons pour chaque état.

arrière-plan-couleur

Couleur d’arrière-plan du bouton pour chaque état.

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

Le bouton Envoyer à l’impression est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

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

width

Largeur du bouton.

height

Hauteur du bouton.

color

Couleur de texte des boutons pour chaque état.

arrière-plan-couleur

Couleur d’arrière-plan du bouton pour chaque état.

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

En outre, les deux boutons partagent la même 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

font-weight

Poids de police du bouton.

font-size

Taille de police du bouton.

font-family

Famille de polices de bouton.

line-height

Hauteur du texte dans le bouton. Affecte l’alignement vertical.

box-shadow

Abandonner l'ombre.

margin-right

Marge du bouton droit.

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 page de boîte de dialogue avec un bouton Annuler 64 x 34 et un bouton Envoyer à l’impression 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

height

Hauteur de la zone de boîte de dialogue principale.

arrière-plan-couleur

Couleur d’arrière-plan de la zone de boîte de dialogue principale.

margin

Marge extérieure.

Exemple : pour configurer une zone de boîte de dialogue principale avec une hauteur calculée automatiquement, une marge de dix pixels et un arrière-plan 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) se trouve 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

remplissage

Marge intérieure.

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 transporte 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

remplissage

Marge intérieure.

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 de contenu de 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

width

Largeur du bloc.

remplissage

Marge intérieure.

Exemple : pour définir un bloc de contenu d’une largeur de 430 pixels et d’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 situés à différents endroits dans l’interface utilisateur des formulaires.

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

font-weight

Etiqueter le poids de la police.

font-size

Étiqueter la taille de la police.

font-family

Étiqueter la famille de polices.

color

Couleur du texte du libellé.

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, en gras, avec une police de neuf pixels :

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

Les contrôles d’entrée sont encapsulés dans le conteneur et contrôlés avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

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

remplissage-gauche

Marge intérieure.

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

width

Largeur totale du bouton radio avec une légende.

color

Couleur du texte de la légende.

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

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

margin-right

Interligne entre le bouton radio et sa légende.

Les sélecteurs numériques pour la sélection de la plage d’impression sont contrôlés par 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

width

Largeur du sélecteur numérique.

margin

Espacement autour du sélecteur numérique.

Exemple : pour configurer tous les boutons radio d’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 plage de pages et les sections de mise en page d’impression est contrôlé à l’aide du sélecteur de classe CSS suivant :

 .s7ecatalogsearchviewer 
.s7printdialog .s7horizontaldivider

Propriétés CSS du séparateur horizontal

bordure

Bordure autour du séparateur.

remplissage

Marge intérieure.

width

Largeur du séparateur.

margin

Marge extérieure

Exemple : pour configurer un séparateur gris de 430 pixels de large avec une marge verticale de 10 pixels sur les 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; 
}

Sur cette page