24 août 2010

(OverBlog) Modifier la barre OverBlog

Cette barre est positionnée de façon statique tout en haut de votre blog :


Elle est accessible dans Configurer > petit marteau en haut à droite de la barre noire


Vous avez ensuite la possibilité de

  • désactiver la barre : elle disparaîtra de votre blog
  • désactiver la barre sur les liens externes : elle disparaîtra aussi des blogs sur lesquels se rendent vos visiteurs en venant du vôtre. Si vous ne cochez pas cette case, elle peut être absente de votre blog, mais présente sur les autres.
  • enlever le logo OB
  • enlever les liens vers les blogs relatifs : la sélection de ces blogs relatifs n'est pas forcément de votre goût.
  • trier les blogs relatifs
  • choisir la couleur de votre barre
Vous avez la possibilité de modifier son design pour qu'il soit davantage en harmonie avec votre blog en vous rendant dans Design > Mode CSS et en rajoutant tout en bas du CSS

Pour changer son fond :
html body .expand .buttons {background-image: url(adresse du fond) !important;}
Pour changer sa largeur

Supposons que vous vouliez qu'elle fasse la largeur de votre global qui fait 985 px de large
html body .expand ul.buttons {margin:auto!important;width:985px!important;position:absolute;left:50%;margin-left:-492px!important}
sachant que
margin-left:-492px!important = 50% de votre largeur totale
Pour changer le fond de recherche
html body .expand .buttons .right p .query {background-image:url(adresse du fond)!important;}
Pour enlever le top blog
html body .expand .buttons .top a{display:none!important;}
Pour enlever "vous aimerez aussi"
html body .expand .buttons .related a {display:none!important;}
Pour enlever "J'aime ce blog"
html body .expand .buttons .noborder .menu{display:none!important;}
Pour enlever "facebook"
html body .expand .buttons .noborder .facebook{display:none!important;}
Pour enlever "twitter"
html body .expand .buttons .noborder .twitter{display:none!important;}
Pour enlever "l'adresse simplifiée"
html body .expand .buttons .noborder .shortener{display:none!important;}
Pour enlever la recherche
html body .expand .buttons .query{display:none!important;}
Si votre CSS est non modifiable, il faut aller dans l'HTML d'un module texte libre et y coller
<style type="text/css">
la ligne CSS ci-dessus correspondant à votre choix
</style>
Exemple : vous voulez changer le fond de la barre
<style type="text/css">
html body .expand .buttons {background-image: url(adresse du fond) !important;}
</style>

8 commentaires:

  1. Bonjour! comment peut-on faire pour mettre son logo comme sur ce site? http://automoto.over-blog.com/
    Le logo tf1.

    RépondreSupprimer
  2. Bonjour CDM :) Il s'agit d'un partenariat entre OverBlog et TF1. OverBlog sélectionne les blogs qui y participent. Toi, tu ne peux rien faire.

    RépondreSupprimer
  3. Oui j'ai vu que sur la page "partenaires", tous les liens vers des blogs sur O-B avait un logo.
    J'avais pensé que il y avait eu moins un petit code CSS
    C'est pas grave
    Merci quand même.

    RépondreSupprimer
  4. Ah au fait.. dans le cSS peut-on fixer la barre en haut?
    Merci d'avance

    RépondreSupprimer
  5. Bonjour :) la barre est appelée par un code javascript. Il n'est pas possible de la fixer par le CSS ou, du moins, je n'ai pas trouvé.

    RépondreSupprimer
  6. Bonjour Anna !
    J'aurai voulu tester quelque chose, mais pour ça il faudrait que tu me donne le code que tu avais mis antérieurement sur comment supprimer le logo OB.
    C'est html body .expand .buttons .PARTIE MANQUANTE
    Et je voulais savoir ce que c'était, car ce n'est (je crois) nin .logo; ni .overblog.
    Merci!

    RépondreSupprimer
  7. Bonjour :)
    en rajoutant
    html body .expand .buttons .menu {display:none!important;}
    ça marche en test :)

    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)