Hop, un ptit deuxième pour la soirée !

Il est fait sur une base semblable au deuxième donc il y a quelques ressemblances mais bon.
C'est pas moi qui vais me plaindre ! Et un ptit rappel des deux règles fondamentales du free service :

• Ne pas retirer la signature
• Prévenir lorsqu'on se sert

Enjoy ! :D

Un premier Header en l'honneur de l'excellent anime Durarara!! pour ouvrir le bal !

Header de libre service que vous pouvez emprunter si vous le souhaitez.
Bien sûr, interdiction de retirer la signature. Merci de prévenir si vous vous servez. :)

Pour changer le fond de la barre de menu il faut ajouter ceci dans ton CSS :

#menubar {background-image: url("urldel'image");}

Et remplacer urldel'image par l'url de l'image que tu souhaites mettre en fond.
Tu verras des traits blancs de séparation entre les menus après, si tu souhaites les enlever
tu dois insérer ceci à la suite :

#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;
}
#menubar_favorites{
background-image: none;
}

Merci à Chelinka pour sa dernière précision !

Pour appliquer une ombre portée sous la barre

#menubar { 
    box-shadow: 1px 1px 2px #000000;
}

Tu remplaces #000000 par la couleur de ton choix.


1. Changer le fond des sous-menu

Il y a deux images de bases pour les sous menus sur Ekla.
Celle-ci : submenu_item.png
Et celle-là qui concerne le dernier sous-menu : submenu_item_last.png

La partie supérieure de chaque image correspond à celle que l'on voit sans passage de la souris.
La partie inférieure correspond donc au moment où l'on passe la souris sur le sous-menu.
Tu ne dois en aucun cas découper ces images si tu souhaites les modifer, elle doivent se trouver sur la même image et garder le meme format que celles de base.

Quand tu les a modifiées comme tu le souhaite, tu inséres ces codes dans ton CSS.

.menubar_section li {
    background: url("urldel'image:submenu_item.png") no-repeat scroll 0 0 transparent;
}
.menubar_section li:last-child {
    background: url("urldel'image:submenu_item_last.png") no-repeat scroll 0 0 transparent;
}

Bien sûr, tu remplaces les url par celles qui sont concernée.


2. Changer la couleur du texte mon compte sur la barre de menu

Il faut rajouter ce code dans ton CSS

#menubar {
color: #FFFFFF;
}

En remplacant #FFFFFF par la code de la couleur de ton choix.

qu'est-ce que c'est ?

J'ai vu que suite à ce tutoriel, la question du "Comment on en met deux sur une même ligne" revenait à plusieurs reprises. Et comme vous devez vous en doutez, si j'en parle ici, c'est que ce tutoriel vous permettra d'aligner deux DIV sur une même ligne. Allez, on démarre, un petit exemple pour la route !

comment faire ?

Pour ce tutoriel j'ai pas trop envie de vous enfoncer dans le HTML donc on va utiliser une fonction proposée par Eklablog pour effectuer une première partie du tutoriel. Commençons !

Créez un nouvel article (Oui ce sera quand même plus facile pour avancer.) et, en mode Expert, cliquez sur le bouton Insérer un nouveau tableau, c'est la sixième icone de la dernière ligne en commençant par la gauche.
Remplissez uniquement le nombre de lignes et de colonnes, pour l'exemple du haut j'ai mis 2 colonnes et 1 ligne.

Enregistrez et maintenant vous devriez avoir des petits pointillés qui forment deux petites cellules.
Vous pouvez y placer du texte, des images, des animations, etc. Et pour nous, ce sera des DIV.
Des DIV que vous aurez fait au préalable à l'aide de ce tutoriel bien sur.

Bref, ouvrez la fenêtre d’édition HTML en cliquant sur le bouton qui correspond.
Vous avez un truc du genre