lundi 6 avril 2009

Mettre un fond derrière les menus de canalblog en mode avancé

J'ai mis beaucoup de temps à rédiger ce tuto, pour vous expliquer avec le plus de simplicité possible, afin de vous offrir la possibilité de mettre des fonds derrière vos menus et ce de façon assez facile et j'espère avoir été assez claire 

Voilà mon exemple dans la colonne de gauche du blog, cliquez dessus :

Avant de commencer il vous faut un bouton, soit vous le créez vous-même, soit vous en trouvez sur le net. Vous en trouverez également dans mes différents kits/Fonds que je propose par là -> http://joelladesignblog.canalblog.com/

Conseil : Choisisez un bouton de minimum 180 pixels de largeur(width) et en hauteur(height) au minimum de 28 pixels.

Une fois votre bouton fait, enregistrez-le dans un nouveau message que vous laisserez comme brouillon.

Maintenant allez dans votre blog en mode avancé, dans le menu "Feuille de style générale"

Sélectionnez le tout et collez-le dans votre bloc notes, word ou autre

Puis repérez le code .navlinks .title { et Sélectionnez tout le code entre .navlinks .title { et } comme sur ma capture ci-dessous

Puis copiez mon code ci-dessous et allez le coller à la place de ce que vous venez de sélectionner

background: transparent url(http://storage.canalblog.com/22/57/512558/37345348.png) no-repeat;
height: 28px;
width: 180px;
line-height:26px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 5px;
display:block;
border: none;
white-space:nowrap;
font-family: 'Trebuchet MS', Verdana, sans-serif;
color: #FFFFFF;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 0px;

Maintenant allez chercher le lien de votre bouton, faites comme sur mes captures d'écran

Et allez le coller à la place du miens comme ceci

Puis mettez les bonnes tailles pour le height: 28px; et width: 180px; Ces tailles vous les trouverez également là où vous avez enregistré le bouton

Repérez le code  line-height:26px; juste en-dessous et là mettez la même taille que le  height:28px; mais moins 2, ce qui fera  line-height:26px;  (pour mon bouton ici).

Pour modifier la couleur de la police de vos boutons, remplacez   color: #FFFFFF; par votre couleur en mettant le bon code couleur après le #

Vous trouverez la liste des codes couleurs par là -> Cliquez ici

Maintenant, sélectionnez à nouveau la totalité des codes et allez  le recoller en mode avancé, dans le menu "Feuille de style générale" à la place de l'autre et cliquez sur "Valider"

Visualisez votre blog, vous y verrez le fond sous chaque menu comme ceci !

Bon amusement !