(OverBlog) Modifier la fenêtre de partage

Nous allons modifier le design de ce pop up (police, background et encadrements) qui apparaît en bas à droite sur chaque article :

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS

Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

Tout le texte

.socialPopup .text {text-align : center ;  font-weight : bold ; text-decoration : underline ; font-style : italic ; color : red !important;   font-size : 20px !important; font-family : Comic Sans MS !important; }

Seulement le titre

div.socialPopup span.text.title {text-align : center!important ;  font-weight : bold ; text-decoration : underline ; font-style : italic ; color : red !important;   font-size : 10px !important; font-family : Comic Sans MS !important;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DU FOND

Un fond dans la totalité du pop up

.socialPopup {background-color:red!important;background-image:url(adresse de la texture)!important;background-image:url(adresse de l'image)!important;background-repeat:no-repeat;background-position:center;}

Un fond seulement dans le titre

div.socialPopup span.text.title {background-color:red!important;background-image:url(adresse de la texture)!important;background-image:url(adresse de l'image)!important;background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer la totalité

.socialPopup{border:solid 1px #D8D7D7!important}

Pour encadrer le titre

div.socialPopup span.text.title{border:solid 1px #D8D7D7!important}

Pour en savoir plus sur les bordures : créer vos encadrements

POUR LA POSITIONNER A GAUCHE

.socialPopup {position: absolute;left:0px;}