11 sept. 2011

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

12 commentaires:

  1. Merci Anna k pour cette information vraiment très intéressante

    Votre blog est une aide précieuse pour tout le monde et particulièrement pour moi même qui possède un blog OB et blogger.

    (si vous passez un jour sur wordpress....je serait votre premier abonné.....lol

    De toutes les aides visitées pour mon blog ob vous êtes la plus précise et clair.

    Quand a mon blog blogger, je l'ai crée grâce à vous aussi car il n'y a qu'a suivre vos conseils à la lettre et tout devient facile.

    Merci vraiment de mettre votre savoir à notre service.

    RépondreSupprimer
  2. Salut Anna, juste un ptit passage par ici, content de voir que tu blogues toujours un peu ;)

    agréable journée

    RépondreSupprimer
  3. Bonjour Annak!
    Ah cette fenêtre pop up, elle met du monde en colère depuis qu'elle est apparue... penses-tu qu'en la maquillant, c'est à dire, même font et même fond, elle pourrait être unifiée, presque transparente?
    Elle n'est pas sur mon CSS, ou du moins, je ne l'ai pas trouvée...
    Merci pour tes conseils... Bise

    RépondreSupprimer
  4. hello :) moi je l'ai viré :) j'apllique la maxime: ce qi me ène doit gène les autres bizzz

    RépondreSupprimer
  5. Bonjour, moi aussi j'ai viré ce pop-up - et c'est toujours ici que je viens chercher les conseils pour m'amuser avec mon blog overblog - merci Anna!

    RépondreSupprimer
  6. BONSOIR !
    j'ai vraiment besoin de votre aide ,chère Anna !
    je n'arrive plus à rendre visite à mes amis sur leurs blogs "center blog " depuis des semaines ,je suis épuisée d'essayer en vain !!! COMMENT FAIRE ? MERCI !

    RépondreSupprimer
  7. Bonjour Anna, j'ai actuellement un blog dont voici l'adresse:
    http://catherinebehar.over-blog.com
    je souhaiterais lui redonner un nouveau look et j'ai repéré le modèle: scrapbook.
    J'ai essayé de suivre les indications ,mais je ne suis vraiment pas douée!, je n'y arrive pas.
    Pourriez-vous m'aider et si oui comment??
    Merci d'avance pour votre réponse.
    Amicalement
    Catherine Béhar

    RépondreSupprimer
  8. Bonjour Anna,
    J'aimerais savoir comment puis-je ajouter, en bas de chacun de mes articles, le sigle ou le lien de "Facebook".
    Merci de ton attention et de ta coopération qui me sera utile !
    Bonne fin de journée et au plaisir de te lire,
    Marie

    RépondreSupprimer
  9. Salut anna,
    Je voudrais juste vous demander si vous pourriez m'aider à mettre plusieurs photos qui défileront en téte de mon blog.mrci
    mon blog:DCBoghni.over-blog.com

    RépondreSupprimer
  10. C'est un peu la galère quand même... :/

    RépondreSupprimer
  11. Merci pour toutes ces ficelles .Une question : Comment faire pour que ce ne soit pas la première photo de l'article qui apparaisse dans le résumé ?

    Helene

    www.kauana.com

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)