Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
*** [RÉSOLU] Changer la couleur de la barre OB
  • KinouKinou
    Cette discussion a été créée à partir de commentaires séparés de : [RÉSOLU] Bouton "éditer" pas encore installé sur ma barre !.
  • Mehdi.Mehdi.
    Pour changer la couleur de la barre ob..avant </style> coller 

    .ob-ShareBar--light, .ob-ShareBar--light + .ob-ShareBar--minified {
        background: none repeat scroll 0 0 #df520d;
        border-color: #979797;
        color: #424242;
    }

    codes couleur à changer.
  • KinouKinou

    Sur mon blog, j'ai mis ce code, qui, par transparence laisse entrevoir le blog.
    Là, j'ai mis une couleur jaune, à coller avant la balise </style> (avant <HEAD> et </BODY>

    .ob-ShareBar  {background-color: #fff086 ; filter:alpha(opacity=50);-moz-opacity:0.9;opacity: 0.9; color:#000 ;  } 

  • Mehdi.Mehdi.
    bonsoir,

    En transparence c'est pas mal du tout aussi. sur ton blog kinou le rendu est parfait ;)
  • KinouKinou
    Tu trouves aussi  :) plus c'est discret, mieux je me porte  :D

  • afriedenskaiaafriedenskaia
    Bonne formule acceptée par mon design... capricieux ! Je  la garde au chaud en couleur dorée ; mais la barre en transparence totale de ton blog me plait particulièrement : acceptes tu de m'en composer une formule ?

    Y-a t- il une possibilité :
     - de changer la couleur de fond de "rechercher" dans la barre? 
     - de supprimer la ligne noire délimitant la barre?
     
    Que signifie ces éléments pour la couleur de la barre :
     -  filter:alpha(opacity=50);  = ?
     - moz-opacity:0.9;   = ?
     - opacity: 0.9;   = ?
     - color:#000 ;   = ?
    Infos pour mon carnet de notes !

    PS : avec google les couleurs sont beaucoup plus tranchées qu'avec IE et plus près de ma demande !
  • KinouKinou
    Je ne teste pas avec IE, seulement avec FF ou Chrome :P

    Pour l'opacité, ce site l'explique bien

    Ma barre n'est pas en transparence totale, c'est la même ligne de code que celle que je t'ai donnée.
    La différence vient du fait qu'elle est exactement de la même couleur que le fond de mon blog.
    ce qui n'est pas facile avec le fond géré directement par OB.

    Pour la recherche, (du coup, j'ai modifié la mienne ^^)  avant la balise </style>
    /*recherche*/ 
    .ob-ShareBar-search {background:#aba587!important ; color:#000!important;    }
    .ob-ShareBar-input  { color:#fff!important; border: 1px solid  #fff; }

    tu changes les codes couleurs selon ce que tu souhaites obtenir.

  • Mehdi.Mehdi.
    Bonjour

    en fait l'input (fond du module recherche) étant transparent au départ, cela explique pourquoi on voit le fond du module recherche blanc ou noir selon le type de barre que l'on a demandé...

    avec le code de kinou, tu peux déterminer la couleur de l'input (le fond du module recherche)
  • afriedenskaiaafriedenskaia
    Mission presque accomplie : il reste encore le carré apparent lorsque l'on remonte la barre et il est en orange !!!???
    Je ne sais d'où il vient ; j'ai essayé avec les codes 'couleur', mais je n'ai pas trouvé 
    voici le code de la barre transformée : 

    .ob-ShareBar  {background-color: #856f00 ; filter:alpha(opacity=50);-moz-opacity:0.9;opacity: 0.9; color:#000 ;  } 
    /*recherche*/ 
    .ob-ShareBar-search {background:#856f00!important ; color:#fff!important;    }
    .ob-ShareBar-input  { color:#856f00!important; border: 0px solid  #856f00; }
        
    par où est passé le orange ? 
  • Mehdi.Mehdi.
    bonjour

    ce que tu vois en orange c'est le logo overblog (une image)

    http://assets.over-blog-kiwi.com/b/blog/bundles/overblogblogblog/images/shareicon-branding-ob--light.png?v1.4.0.0
  • afriedenskaiaafriedenskaia
    Et pourquoi était-il noir avant ? Et comment changer sa couleur  ?
  • Mehdi.Mehdi.
    tu prends l'image (tu a le lien au dessus)

    tu change les couleurs avec un logiciel d'image type photofiltre ou equivalent

    tu héberge l'image modifié et tu met son adresse url a la place de celle existante

    comme c'est le logo ob...peut être vaut il mieux le laisser comme il est ;)
  • afriedenskaiaafriedenskaia
    certes mais je parlais du côté droit de la barre et du carré qui permet d'ouvrir ou fermer la barre et non du logo à gauche  ... quoique ayant maintenant la formule je vais essayer , avec ton aide, de changer les 2!

    " tu héberge l'image modifié et tu met son adresse url a la place de celle existante " : ... et où se trouve cette place de gauche pour le logo de ob? et celle du du logo carré adroite avec la flèche ?
  • Mehdi.Mehdi.
    Bonjour

    la flèche orange a droite est ici

    .ob-ShareBar--light, .ob-ShareBar--light + .ob-ShareBar--minified {
        background: none repeat scroll 0 0 #df520d;
        border-color: #979797;
        color: #424242;
    }


    #df520d; étant la couleur orange


    je ne trouve pas pour le moment l'emplacement du logo overblog (a gauche)

  • afriedenskaiaafriedenskaia
    Merci c'est bon à droite !
Rédiger un commentaire