Gestion du style des liens - Barre menu du haut
Pour ceux qui actuellement modifient le design de leur blog, en s'aidant des discussions sur le forum, des tutos de Nana et dans mes blogs Diztest et BRICABRAC.
L'utilisation des codes que je vous propose, ne devraient pas vous créer de problème, bien au contraire vous simplifieront la vie.
Objectif :
Gérer le style des liens du menu barre en haut, indépendament les uns des autres, de façon à mettre par exemple une couleur de fond différente ou une image différente à chaque lien.
Pour réaliser cette modification, il faut avoir activé le système "myDesign", dans mon exemple j'utilise le Diz Perso comme modèle.
Première étape - Modification de la structure HTML
En gestion rendez vous dans "VOTRE BLOG" → Personnaliser le design → Structure
Repérez les lignes suivantes ...
{menu_haut}
</div>
Vous les remplacez par les lignes ci-dessous...
<ul>
<li><a id="barre_accueil" href="index-xxxxxx.html">Accueil</a></li>
<li><a id="barre_article" href="article-xxxxxx.html">Articles</a></li>
<li><a id="barre_photo" href="photo-xxxxxx.html">Photos</a></li>
<li><a id="barre_forum" href="forum-xxxxxx.html">Forum</a></li>
</ul>
</div>
Cette action a pour but de ressortir du bloc {menu_haut}, les éléments de liste des liens, pour mettre à chacun un identifiant(en bleu) qui permettra de mettre un style spécifique, à chaque lien, dans le CSS.
Dans le texte en rouge, vous devez remplacer le xxxxxx par le numéro index de votre blog.
Deuxième étape - Création des règles CSS
En gestion rendez vous dans "VOTRE BLOG" → Personnaliser le design → Style du blog
Cliquez sur le lien "Modification directe du CSS"
Recherchez les règles avec le séleteur #barre, après la dernière, en principe #barre a:hover, vous insérez les lignes exemples ci-dessous.
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792540_201204203258970.png);
}
#barre_article
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792537_201204203220367.png);
}
#barre_photo
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792541_201204203318115.png);
}
#barre_forum
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792544_201204203441768.png);
}
Vous changerez les adresses des images après avoir testé le système. Ces images n'apparaîtront peut-être pas. En effet dans les règles plus haut #barre a et #barre a:hover, il y a peut-être les attributs background et background-image, qu'il faut supprimer ou mettre en commentaire(entre /* et */) pour annuler leur action.
Voilà ci-dessous comment votre code CSS doit se présenter.
{
width : 100%;
margin: 10px 0 10px 0;
height:30px;
}
#barre ul
{
list-style-type : none;
width: 458px;
margin-left: auto;
margin-right: auto;
}
#barre li
{
float : left;
}
#barre a
{
/* background : #004000; */
color : #000000;
text-decoration : none;
width : 100px;
height : 25px;
padding-top : 5px;
margin-left : 10px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}
#barre a:hover
{
/* background : #C5D5A7; */
text-decoration : underline;
border : 1px solid #004000;
}
#barre_accueil
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792558_201204203739120.png);
}
#barre_article
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792537_201204203220367.png);
}
#barre_photo
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792541_201204203318115.png);
}
#barre_forum
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792544_201204203441768.png);
}
Ce code permet donc de mettre tous les attributs différents pour chaque lien. Sinon vous utilisez les autres règles qui gérent tous les liens de la même façon.
Si vous souhaitez mettre une image différente au survol de la souris, il faut créer les mêmes règles avec :hover
Exemple:
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792558_201204203739120.png);
}
#barre_article:hover
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792548_201204203524580.png);
}
#barre_photo:hover
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792560_201204203802258.png);
}
#barre_forum:hover
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792536_20120420315891.png);
}
Par la même occasion vous pouvez changer les noms des modules, modifier leur ordre et même rajouter un lien comme "Contact" :
<li><a id="barre_contact" href="contact-xxxxxx.html">Contact</a></li>
Il est possible également de faire la même chose dans certains modèles graphiques, seul l'identifiant de la barre change.
...
