L'outil d'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é à 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. |
marge-gauche |
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 rangée. |
width |
Largeur du bouton. |
height |
Hauteur du bouton. |
image d’arrière-plan |
Image affichée pour un état de bouton donné. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
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 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);
}
L’incrustation d’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 l’incrustation arrière
opacité |
Opacité de l’incrustation en arrière-plan. |
arrière-plan-couleur |
Couleur d’incrustation d’arrière-plan. |
Exemple - pour configurer l’incrustation d’arrière-plan en gris 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 centrée sur l’écran sur les systèmes de bureau. Le positionnement et la taille 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 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. |
hauteur |
Hauteur de l’icône. |
image d’arrière-plan |
Image d’icône. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de 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 d’en-tête de la boîte de dialogue
font-poids |
Poids des polices. |
font-size |
Hauteur de la police. |
font-family |
Famille de polices. |
remplissage |
Marge intérieure du texte. |
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 du bouton par rapport au conteneur d’en-tête. |
droite |
Position horizontale du bouton par rapport au conteneur d’en-tête. |
width |
Largeur du bouton. |
hauteur |
Hauteur du bouton. |
remplissage |
Marge intérieure du bouton. |
image d’arrière-plan |
Image de bouton pour chaque état. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
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 un en-tête de boîte de dialogue avec remplissage, 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é à deux pixels du haut et à deux pixels de la droite du conteneur de 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é par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer
Propriétés CSS du conteneur de bouton 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 Annuler de la boîte de dialogue
width |
Largeur du bouton. |
hauteur |
Hauteur du bouton. |
color |
Couleur du texte des boutons pour chaque état. |
arrière-plan-couleur |
Couleur d’arrière-plan du bouton pour chaque état. |
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 la boîte de dialogue
width |
Largeur du bouton. |
hauteur |
Hauteur du bouton. |
color |
Couleur du texte des boutons pour chaque état. |
arrière-plan-couleur |
Couleur d’arrière-plan du bouton pour chaque état. |
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-poids |
Poids de police de bouton. |
font-size |
Taille de police des boutons. |
font-family |
Famille de polices de bouton. |
ligne-hauteur |
Hauteur du texte à l’intérieur du bouton. Affecte l’alignement vertical. |
box-shadow |
Déposez l'ombre. |
marge droite |
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 de 64 x 34 et un bouton Envoyer à l’impression de 96 x 34, la couleur du texte et la couleur d’arrière-plan étant 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
hauteur |
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 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 du formulaire de sorte qu’il ait un remplissage de dix pixels :
.s7ecatalogsearchviewer .s7printdialog .s7dialogbody {
padding: 10px;
}
Le formulaire de boîte de dialogue est rempli ligne par ligne, où chaque ligne porte 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 un remplissage de dix pixels pour chaque ligne :
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
La taille du bloc de 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
width |
Largeur du bloc. |
remplissage |
Marge intérieure. |
Exemple : pour définir un bloc de contenu d’une largeur de 430 pixels et d’un remplissage 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 n’est pas adaptée au contrôle de la taille ou de la position de l’étiquette, car vous pouvez l’appliquer à des textes situés à divers endroits dans l’interface utilisateur du formulaire.
Propriétés CSS du libellé de la boîte de dialogue.
font-poids |
Poids de police d’étiquette. |
font-size |
Taille de police du libellé. |
font-family |
Libeller la famille de polices. |
color |
Couleur du texte du libellé. |
Les étiquettes de boîte de dialogue peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple : pour définir 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 un remplissage de 30 pixels à partir du bord gauche de la boîte de dialogue.
.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
padding-left: 30px;
}
Les boutons radio et le texte de leur légende sont contrôlés à l’aide du 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 boîte de dialogue entrée
marge droite |
Espacement entre le bouton radio et sa légende. |
Les sélecteurs de classe CSS suivants contrôlent les sélecteurs numériques pour la sélection de la plage d’impression.
.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. |
marge |
Espacement autour du sélecteur numérique. |
Exemple : pour configurer tous les boutons radio pour 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. |
marge |
Marge extérieure |
Exemple : pour configurer un séparateur gris de 430 pixels de large avec un remplissage vertical 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;
}