Barre d'Outil Eklablog

19.12.2011

Voici le sélecteur à utiliser pour modifier le fond, le type de police ou autre

#menubar {propriété: valeur;}

Pour enlever les traits de séparation et les fonds bleu au survol:

#menubar_section_content,
#menubar_section_appearance,
#menubar_section_interactions,
#menubar_section_manage,
#menubar_section_account,
#menubar_section_help,
#menubar_notifications,
#menubar_signin,
.menubar_button
.menubar_section:hover,
.menubar_section,
#menubar_favorites,
.menubar_separation,
#menubar_logo{ background: none;}
#menubar_favorites_btn,
#menubar_nofavorites_btn:hover { background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%;
}
#menubar_favorites_btn:hover,
#menubar_nofavorites_btn { background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%;
}

Pour la petite flèche permettant d'afficher ou de masquer la menubar, voici l'image de base :

La flèche en haut a droite, c'est celle qui permet de refermer la barre d'outil. Celle du bas, c'est son aparence au clique. Les fleches de gauches, c'est lorsque la barre est fermée.
Et mettez ce code dans votre css

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

Pour la flèche qui remet la barre, c'est ça (même image que ci-dessus)

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

Menubar, les onglets

Voici le code

.menubar_section li { propriété: valeur; }
.menubar_section li:last-child {
propriété: valeur; }

Si vous voulez mettre des images et que vous ne voulez pas modifier les tailles, faites le sur ce model là:

Pour ceux qui veulent mettre des couleurs

.menubar_section li { propriété: valeur; }
.menubar_section li:hover { propriété: valeur; }
.menubar_section li:last-child {propriété: valeur; }
.menubar_section li:last-child:hover {propriété: valeur; }

La ligne en rouge est ce qui sera affiché au survol

Changer le fond de "contenu", "apparence"...

.menubar_section:hover div{
background: valeur;}

Mettez "background: none" pour qu'il n'y ai ni image ni couleur.

Menubar : Notifications

#menubar_notifications:hover
#menubar_notifications_btn{
background: valeur;}

Menu déroulant des notification:

#notifications_panel a,
#notifications_panel div{ background: valeur}

Pour ceux qui veulent mettre une image, suivez ce model

Menu Notifications

Explications :

Le premier machin blanc signifie les notifications auquel vous voyez habituellement. Le machin bleu clair signifie le moment où on a une nouvelle notifications. Le premier machin bleu foncé signifie n'importe qu'elle survol. Le deuxième machin blanc signifie le 'afficher les notifications' en mode normal et le deuxième machin bleu foncé signifie 'afficher les notifications" au survol. ^^

Couleur ou image différente:

#notifications_panel a,
#notifications_panel div {background: valeur}
#notifications_panel a:hover,
#notifications_panel div:hover {background: valeur}
#notifications_panel
.new_notification {background: valeur}

En noir, c'est l'apparence normal
En rouge, c'est au survol
En bleu, c'est pour les nouvelles notification

Blog Favori

Pour supprimer la barre de séparation:

#menubar_favorites{background-image: none}

Pour enlever le fond bleu:

#menubar_favorites_btn, #menubar_nofavorites_btn:hover { background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%;
#menubar_favorites_btn:hover,
#menubar_nofavorites_btn { background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%; } }

Pour modifier l'image du coeur gris:

#menubar_favorites_btn,
#menubar_nofavorites_btn:hover { background: url("IMAGE") no-repeat 50% 50%;}

Pour modifier l'image du coeur rouge:

#menubar_favorites_btn:hover,
#menubar_nofavorites_btn {background: url("IMAGE") no-repeat 50% 50%;}

Un immense merci à EtoileSosso et Jak-Ich_an pour avoir aider à trouver tout ça