Partage des emails email-share

L’outil de partage de courrier électronique est constitué d’un bouton ajouté au panneau Partage sur les réseaux sociaux et de la boîte de dialogue modale qui s’affiche lorsque l’outil est activé. La position du bouton est entièrement gérée par l’outil Partage sur les réseaux sociaux .

L’aspect du bouton de partage de courrier électronique est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emailshare

Propriétés CSS de l’outil de partage de courrier électronique

width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image affichée pour un état de bouton donné.
background-position

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

Voir aussi Sprites CSS.

NOTE
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.

Il est possible de supprimer le bouton du panneau Partage sur les réseaux sociaux en définissant la propriété CSS display:none sur sa classe CSS.

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 de partage de courrier électronique de 28 x 28 pixels et qui affiche une image différente pour chacun des quatre états de bouton différents.

.s7ecatalogsearchviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

La superposition d’arrière-plan qui couvre la page web lorsque la boîte de dialogue est active est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

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

opacité
Opacité du recouvrement en arrière-plan.
background-color
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 .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Par défaut, la boîte de dialogue modale s’affiche centrée sur l’écran des ordinateurs de bureau et occupe l’ensemble de la zone de page web sur les appareils tactiles. Dans tous les cas, 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 .s7emaildialog .s7dialog

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

border-radius
rayon de la bordure de la boîte de dialogue (si la boîte de dialogue ne prend pas toute la fenêtre du navigateur) ;
background-color
Couleur d’arrière-plan de la boîte de dialogue ;
width
doit être désactivée ou définie sur 100 %, auquel cas la boîte de dialogue s’ouvre sur l’ensemble de la fenêtre du navigateur (ce mode est préférable sur les appareils tactiles) ;
height
Doit être désdéfini ou défini sur 100 %, auquel cas la boîte de dialogue s’ouvre sur l’ensemble de la fenêtre du navigateur (ce mode est recommandé sur les appareils tactiles).

Exemple : pour configurer une boîte de dialogue afin d’utiliser toute la fenêtre du navigateur et d’avoir un arrière-plan blanc sur les appareils tactiles :

.s7ecatalogsearchviewer .s7touchinput .s7emaildialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

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 .s7emaildialog .s7dialogheader

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

padding
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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

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

padding
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 .s7emaildialog .s7dialogheadericon

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

width
Largeur de l’icône.
height
Hauteur de l’icône.
background-image
Image de l’icône.
background-position

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

Voir aussi Sprites CSS.

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

.s7ecatalogsearchviewer .s7emaildialog .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.
padding
Marge intérieure du texte interne.

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

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

Propriétés CSS du bouton de fermeture ​

top
Position verticale des boutons par rapport au conteneur d’en-tête.
droit
Position du bouton horizontal par rapport au conteneur d’en-tête.
width
Largeur du bouton.
height
Hauteur du bouton.
padding
Marge intérieure du bouton.
background-image
Image de bouton pour chaque état.
background-position

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

Voir aussi Sprites CSS.

NOTE
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 24 x 17 pixels et un titre de 16 points en gras. Enfin, un bouton Fermer de 28 x 28 pixels a positionné deux pixels du haut et deux pixels de la droite du conteneur de la boîte de dialogue :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgemail_cap.png");
    height: 17px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .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 un courrier électronique. Le conteneur de pied de page est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

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

bordure
Bordure permettant de 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 .s7emaildialog .s7dialogbuttoncontainer

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

padding
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 .s7emaildialog .s7dialogcancelbutton

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

width
Largeur du bouton.
height
Hauteur du bouton.
color
Couleur de texte des boutons pour chaque état.
background-color
Couleur d’arrière-plan du bouton pour chaque état.
NOTE
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 un courrier électronique est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .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.
background-color
Couleur d’arrière-plan du bouton pour chaque état.
NOTE
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 une classe CSS commune, qui peut contenir des paramètres CSS identiques pour les autres boutons de boîte de dialogue :

.s7ecatalogsearchviewer .s7emaildialog .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 de ce bouton 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 un email 82 x 34, avec la couleur du texte et la couleur d’arrière-plan différentes pour chaque état de bouton :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .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 défilante et le panneau de défilement à droite. 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 boîte de dialogue principale est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .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. Elle doit être spécifiée uniquement lorsque la boîte de dialogue fonctionne en mode bureau. Cela ne s’applique pas lorsque la boîte de dialogue est dimensionnée pour occuper toute la fenêtre du navigateur.
background-color
Couleur d’arrière-plan de la zone de boîte de dialogue principale.
margin
Marge extérieure.
NOTE
La zone de boîte de dialogue principale prend en charge le sélecteur d’attributs state facultatif. Il est défini sur sendsuccess lorsque le formulaire de courrier électronique est envoyé et que la boîte de dialogue affiche un message de confirmation. Tant que le message de confirmation est petit, ce sélecteur d’attributs peut être utilisé pour réduire la hauteur de la boîte de dialogue lorsque ce message de confirmation s’affiche.

Exemple : pour configurer la zone de boîte de dialogue principale de sorte qu’elle ait initialement une hauteur de 300 pixels et une hauteur de 100 pixels lors de l’affichage du message de confirmation, une marge de dix pixels et un arrière-plan blanc :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

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 .s7emaildialog .s7dialogbody

Si la hauteur de ce conteneur semble supérieure à la zone de boîte de dialogue principale, un défilement vertical est activé automatiquement par le composant.

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

padding
Marge intérieure.

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

.s7ecatalogsearchviewer .s7emaildialog .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

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

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 .s7emaildialog .s7dialoglabel

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

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 .s7emaildialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

Tous les libellés statiques affichés à gauche des champs de saisie du formulaire sont contrôlés avec :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

Propriétés CSS de l’étiquette d’entrée de boîte de dialogue

width
Largeur du libellé statique.
text-align
Alignement horizontal du texte.
margin
Marge du libellé statique.
padding
Marge intérieure des libellés statiques.

Exemple : pour configurer les libellés de champ d’entrée pour une largeur de 50 pixels, avec un alignement droit, une marge intérieure de dix pixels et une marge de dix pixels à droite :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

Chaque champ de saisie de formulaire est encapsulé dans le conteneur, ce qui vous permet d’appliquer une bordure personnalisée autour du champ de saisie. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

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

bordure
Bordure autour du conteneur de champ de saisie.
padding
Marge intérieure.
NOTE
Le conteneur de champs d’entrée prend en charge le sélecteur d’attributs facultatif state. Il est défini sur verifyerror lorsque l’utilisateur commet une erreur dans le format des données d’entrée et que la validation intégrée échoue. Ce sélecteur d’attributs peut être utilisé pour mettre en surbrillance des entrées utilisateur incorrectes dans le formulaire.

La plupart des champs de saisie qui s’étendent du libellé à gauche au bord droit du corps de la boîte de dialogue (qui comprend le champ De et le champ Message) sont contrôlés par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

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

width
Largeur du champ de saisie.

Le champ À est plus étroit, car il alloue de l’espace pour le bouton Supprimer l’email à droite. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

Propriétés CSS de la boîte de dialogue input short field

width
Largeur du champ de saisie.

Exemple : pour configurer un formulaire de sorte qu’il ait une bordure grise d’un pixel avec une marge intérieure de neuf pixels autour de tous les champs de saisie. Pour avoir la même bordure en rouge pour les champs dont la validation a échoué. Enfin, pour disposer d’un champ A de 250 pixels de large, et le reste des champs d’entrée de 300 pixels de large :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

Le champ de saisie des emails est également contrôlé avec :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

Cette classe vous permet de définir des propriétés spécifiques pour l’élément TEXTAREA sous-jacent.

Propriétés CSS du message de boîte de dialogue

height
Hauteur du message.
word-wrap
Style d’encapsulation de mot.

Exemple : pour configurer un message électronique d’une hauteur de 50 pixels et utiliser l’encapsulage de mots break-word :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

Le bouton Ajouter une autre adresse électronique permet à un utilisateur d’ajouter plusieurs adresses dans un formulaire de courrier électronique. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

Propriétés CSS de la boîte de dialogue Ajouter un bouton d’adresse électronique

height
Hauteur du bouton.
color
Couleur de texte des boutons pour chaque état.
background-image
Image de bouton pour chaque état.
background-position
Position de l’image du bouton dans la zone 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.
text-align
Alignement horizontal du texte.
padding
Marge intérieure.
NOTE
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 le bouton "Ajouter une autre adresse électronique" d’une hauteur de 25 pixels, utilisez une police en gras de 12 points avec alignement droit, ainsi qu’une couleur et une image de texte différentes pour chaque état :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

Le bouton Supprimer permet à un utilisateur de supprimer des adresses supplémentaires du formulaire de courrier électronique. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

Propriétés CSS de la boîte de dialogue Supprimer le bouton de courrier électronique

width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image de bouton pour chaque état.
background-position

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

Voir aussi Sprites CSS.

NOTE
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 Supprimer d’une taille de 25 x 25 pixels et utiliser une image différente pour chaque état :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

Le contenu partagé s’affiche au bas du corps de la boîte de dialogue et comprend une miniature, un titre, une URL d’origine et une description. Il est encapsulé dans un conteneur contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

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

bordure
Bordure du conteneur.
padding
Marge intérieure.

Exemple : pour configurer un conteneur inférieur afin qu’il ait une bordure en pointillés d’un pixel et aucune marge intérieure :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

L’image miniature est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

La propriété background-image est définie par la logique du composant.

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

width
Largeur de la miniature.
height
Hauteur de la miniature.
- Alignement vertical
Miniature d’alignement vertical.
padding
Marge intérieure.

Exemple : pour configurer une miniature de 90 x 60 pixels et l’aligner sur le haut avec dix pixels de marge intérieure :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

Le titre, l’origine et la description du contenu sont ensuite regroupés dans un panneau situé à droite de la miniature du contenu. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

Propriétés CSS du panneau d’informations de boîte de dialogue

width
Largeur du panneau.

Exemple : pour configurer un panneau d’informations sur le contenu d’une largeur de 300 pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

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

margin
Marge extérieure.
font-weight
Poids de police.
font-size
Taille de police.
font-family
Famille de polices.

Exemple : pour configurer un titre de contenu afin d’utiliser une police en gras et d’avoir une marge de dix pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

L’origine du contenu est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

Propriétés CSS de la boîte de dialogue origine du contenu ​

margin
Marge extérieure.
font-weight
Poids de police.
font-size
Taille de police.
font-family
Famille de polices.

Exemple : pour configurer l’origine du contenu pour une marge de dix pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

La description du contenu est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

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

margin
Marge extérieure.
font-weight
Poids de police.
font-size
Taille de police.
font-family
Famille de polices.

Exemple : pour configurer une description du contenu avec une marge de dix pixels et une police de neuf points :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

Lorsqu’un utilisateur saisit des données d’entrée incorrectes et que la validation en ligne échoue, un message s’affiche en haut du corps de la boîte de dialogue. Ce message s’affiche également lorsque la boîte de dialogue doit générer une erreur ou un message de confirmation lors de l’envoi du formulaire. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

Propriétés CSS du message d’erreur de boîte de dialogue

background-image
Icône Erreur. La valeur par défaut est un point d’exclamation.
background-position
Position de l’icône d’erreur dans la zone de message.
color
Couleur du texte du message.
font-weight
Poids de police.
font-size
Taille de police.
font-family
Famille de polices.
line-height
Hauteur du texte dans le message. Affecte l’alignement vertical.
padding
Marge intérieure.
NOTE
Ce message prend en charge le sélecteur d’attributs state avec les valeurs possibles suivantes : verifyerror, senderror et sendsuccess. La valeur verifyerror est définie lorsqu’un message s’affiche en raison d’un échec de validation d’entrée en ligne. La valeur senderror est définie lorsqu’un service de messagerie principal signale une erreur. La valeur sendsuccess est définie lorsque l’email est envoyé avec succès. Il est ainsi possible de mettre le message dans un style différent en fonction de l’état de la boîte de dialogue.

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 message afin d’utiliser une police en gras de dix points, définissez une hauteur de ligne de 25 pixels et une marge intérieure de 20 pixels sur la gauche. Enfin, utilisez une icône de point d’exclamation, un texte rouge en cas d’erreur, et aucune icône ni texte vert en cas de succès :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

Si un défilement vertical est nécessaire, la barre de défilement s’affiche dans le panneau près du bord droit de la boîte de dialogue, qui est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

Propriétés CSS du panneau de défilement de la boîte de dialogue

width
Largeur du panneau de défilement.

Exemple : pour configurer un panneau de défilement d’une largeur de 44 pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

L’aspect de la zone de barre de défilement est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

Propriétés CSS de la barre de défilement

width
Largeur de la barre de défilement.
top
Décalage de la barre de défilement verticale à partir du haut du panneau de défilement.
bottom
Décalage de la barre de défilement verticale à partir du bas du panneau de défilement.
droit
Décalage de la barre de défilement horizontale à partir du bord droit du panneau de défilement.

Exemple : pour configurer une barre de défilement de 28 pixels de large, une marge de huit pixels depuis le haut, la droite et le bas du panneau de défilement :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

Le suivi de la barre de défilement est la zone entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur du suivi. Le suivi est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

Propriétés CSS du suivi de défilement

width
Largeur du suivi.
background-color
Couleur d’arrière-plan du suivi.

Exemple : pour configurer un suivi de barre de défilement de 28 pixels de large et avec un arrière-plan gris :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

La barre de défilement se déplace verticalement dans une zone de suivi de défilement. Sa position verticale est entièrement contrôlée par la logique du composant, mais la hauteur du pouce ne change pas dynamiquement en fonction de la quantité de contenu. Vous pouvez configurer la hauteur du pouce et d’autres aspects à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

Propriétés CSS de la barre de défilement

width
Largeur du pouce.
height
La hauteur du pouce.
padding-top
Marge intérieure verticale entre le haut de la piste.
padding-bottom
Marge intérieure verticale entre le bas de la piste.
background-image
Image affichée pour un état de pouce donné.
background-position

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

Voir aussi Sprites CSS.

NOTE
La miniature prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de miniature : up, down, over et disabled.

Exemple : pour configurer une barre de défilement de 28 x 45 pixels, avec une marge de dix pixels en haut et en bas et une illustration différente pour chaque état :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

L’aspect des boutons de défilement haut et bas est contrôlé à l’aide des sélecteurs de classe CSS suivants :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS top, left, bottom et right. La logique de la visionneuse les positionne automatiquement.

Propriétés CSS des boutons de défilement haut et bas

width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image affichée pour un état de bouton donné.
background-position

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

Voir aussi Sprites CSS.

NOTE
Ces boutons prennent en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de boutons : up, down, over et disabled.

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 des boutons de défilement de 28 x 32 pixels et dont l’illustration est différente pour chaque état :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8