Partage de liens link-share
L’outil Partage de liens 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 lien est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkshare
Propriétés CSS de l’outil de partage de lien
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 lien de 28 x 28 pixels et afficher une image différente pour chacun des quatre états de bouton différents :
.s7ecatalogviewer .s7linkshare {
width:28px;
height:28px;
}
.s7ecatalogviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7ecatalogviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7ecatalogviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7ecatalogviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}
La superposition en 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 :
.s7ecatalogviewer .s7linkdialog .s7backoverlay
Propriétés CSS de la superposition en arrière-plan
Exemple - Pour configurer une superposition en arrière-plan de sorte qu’elle soit grise avec une opacité de 70 % :
.s7ecatalogviewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
Par défaut, la boîte de dialogue modale s’affiche centrée dans l’écran sur les systèmes 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 :
.s7ecatalogviewer .s7linkdialog .s7dialog
Propriétés CSS de la boîte de dialogue
Exemple : pour configurer la 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 :
.s7ecatalogviewer .s7touchinput .s7linkdialog .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 de fermeture. Le conteneur d’en-tête est contrôlé avec
.s7ecatalogviewer .s7linkdialog .s7dialogheader
Propriétés CSS de l’en-tête de boîte de dialogue
L’icône et le texte du titre sont placés dans un conteneur supplémentaire contrôlé par
.s7ecatalogviewer .s7linkdialog .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
.s7ecatalogviewer .s7linkdialog .s7dialogheadericon
Propriétés CSS de l’icône d’en-tête de boîte de dialogue
Le titre d’en-tête est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialogheadertext
Propriétés CSS du texte de l’en-tête de la boîte de dialogue
Le bouton Fermer est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7closebutton
Propriétés CSS du bouton de fermeture
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 marge intérieure, une icône de 22 x 12 pixels et un titre de 16 points en gras. Enfin, un bouton Fermer de 28 x 28 pixels qui est positionné à deux pixels du haut et à deux pixels à droite du conteneur de la boîte de dialogue :
.s7ecatalogviewer .s7linkdialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogheadericon {
background-image: url("images/sdk/dlglink_cap.png");
height: 12px;
width: 22px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogviewer .s7linkdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogviewer .s7linkdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogviewer .s7linkdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogviewer .s7linkdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogviewer .s7linkdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
Le pied de page de la boîte de dialogue se compose d’un bouton Annuler . Le conteneur de pied de page est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialogfooter
Propriétés CSS du pied de page de la boîte de dialogue
Le pied de page comporte un conteneur interne qui conserve le bouton. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialogbuttoncontainer
Propriétés CSS du conteneur de boutons de boîte de dialogue
Le bouton Tout sélectionner est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton
Ce bouton n’est disponible que sur les ordinateurs de bureau.
Propriétés CSS du bouton Tout sélectionner
state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.Le bouton Annuler est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton
Propriétés CSS de la boîte de dialogue Bouton d’annulation
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 :
.s7ecatalogviewer .s7linkdialog .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 page de boîte de dialogue avec un bouton Annuler 64 x 34, avec des couleurs de texte et d’arrière-plan différentes pour chaque état de bouton :
.s7ecatalogviewer .s7linkdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogviewer .s7linkdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogviewer .s7linkdialog .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 boîte de dialogue principale est contrôlée avec le sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialogviewarea
Propriétés CSS de la zone d’affichage de la boîte de dialogue
Exemple : pour configurer une zone de boîte de dialogue principale d’une hauteur de 300 pixels, définissez une marge de dix pixels et utilisez un arrière-plan blanc :
.s7ecatalogviewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
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 :
.s7ecatalogviewer .s7linkdialog .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 :
.s7ecatalogviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
Tous les libellés statiques du formulaire de boîte de dialogue sont contrôlés par
.s7ecatalogviewer .s7linkdialog .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.
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 :
.s7ecatalogviewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
La taille de la copie de texte affichée en haut du lien est contrôlée par le sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialoginputwide
Propriétés CSS du champ d’entrée de la boîte de dialogue
Exemple : pour définir une copie de texte de 430 pixels de large et une marge intérieure de dix pixels en bas :
.s7ecatalogviewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
Le lien de partage est encapsulé dans un conteneur et contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialoginputcontainer
Propriétés CSS du conteneur d’entrée de boîte de dialogue
Exemple : pour définir une bordure grise d’un pixel autour du texte du code incorporé et une marge intérieure de neuf pixels :
.s7ecatalogviewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
Le lien de partage lui-même est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogviewer .s7linkdialog .s7dialoglink
Propriétés CSS de la boîte de dialogue partager le lien
Exemple : pour définir le lien de partage sur une largeur de 450 pixels :
.s7ecatalogviewer .s7linkdialog .s7dialoglink {
width: 450px;
}