• Eklablog peut être parfaitement personnaliser grâce notament à des codes CSS.

    1-Pour la barre se situant en haut de page:

    Code CSS

    -Faites vous une barre avec votre logiciel préféré.

    Pour la dimension ,j'ai choisi 1800x25.

    Puis utiliser ce code:

    #menubar{background:url(ADRESSE DE VOTRE BARRE) ;}


    2-Pour changer la couleur du texte de la barre:

    Voici le code :

    #menubarabsolute{font-size:15 ;color:METTRE ICI LA COULEUR EN ANGLAIS;}


    Voici des sites où vous trouverez le code ou le nom d'une couleur en anglais:

     http://www.aidenet.com/pageperso64j.htm

     http://stylescss.free.fr/couleurs.php


    3-Changer la couleur lors du survole:

     Sur Eklablog,la couleur est bleue.

    Faite vous une créa avec votre logiciel.Dimension 180x25 environ.

    Voici le code pour modifier cette couleur:

     .menubar_section:hover div{background-image: url("ADRESSE DE VOTRE CREA ")}


    4-Personnaliser les sous menus:

     

    Code CSS:Personnaliser sa barre

    Faites deux créas:

    La première de dimension 180x50

    La deuxième de 180X66


    Voici le code:

     .menubar_section li {
               background:url("ADRESSE DE LAPREMIERE CREA ") no-repeat;
               color:COULEUR EN ANGLAIS ; }
    .menubar_section li:last-child {
               background:url("ADRESSE DE LA DEUXIEME CREA   ")no-repeat; }


    5-Enlever les barres de séparations:

    (astuce donné par  sosso1998 --MERCI--) 

     

    Code CSS:Personnaliser sa barre

    Voici le code à mettre sans rien modifier: 

    #menubar_section_content{

    background-image: none;
    }
    #menubar_section_appearance{
    background-image: none;
    }
    #menubar_section_interactions{
    background-image: none;
    }
    #menubar_section_manage{
    background-image: none;
    }
    #menubar_section_account{
    background-image: none;
    }
    #menubar_notifications{
    background-image: none;
    }
    #menubar_signin {
    background-image: none;
    }
    .menubar_button {
    background-imagenone;
    }


    6- Modifier la flèche:
    (astuce donné par  sosso1998 --MERCI--)

     code pour modifier la flèche:

    #menubar_hide{ background-image: url("ADRESSE DE L'IMAGE");}

    Code  :la flèche apparait dès que tu cliques:

     #menubar_show { background-image: url("IMAGE");}

    Code pour enlever la flèche:

    #menubar_hide{ width: 0px;}


    7-Modifier la couleur des notification:

    ( merci a sosso1988)

    Code CSS:Personnaliser sa barre

     

     

    Voici le code:

    #notifications_panel a,#notifications_panel div{ background:url("ADRESSE DE L'IMAGE")no-repeat;}

    Votre image doit être faite d'après ce modèle:

     

    Code CSS:Personnaliser sa barre


    8-Modifier la couleur de l'icone : 

    (merci a Sosso1998)

    Code CSS:Personnaliser sa barre

    Voici le code qui permet de changer la couleur au survole:

    #menubar_notifications:hover
    #menubar_notifications_btn{
                       background:#2089b3 url("IMAGE")repeat-x;
                       color:COULEUR;}

     

    Voici le code pour mettre une couleur de fond sur la barre au niveau de l'icone:

    (merci à Louna  Kilari)

     

    #menubar_notifications_btnbackground:Couleur  0% 70%;}

     

     

     

    Ces codes sont à mettre dans votrs source CSS:


    Cliquer sur" Apparence " puis ""Modifier le thème" " puis " ajouter un css"

    Mettre le code dans la fenetre puis cliquer "appliquer et sauvegarder".

     

    Code CSS:Personnaliser sa barre



    Partager via Gmail Yahoo!

    182 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique