Code CSS:Personnaliser sa barre

01.10.2011

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--)

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-image: none;

}

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_btn{ background: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