(Blogger) Modifier le menu horizontal

Si vous ne savez pas comment réaliser un menu horizontal de la sorte

rendez vous à cet article.

J'y donne les lignes CSS pour réaliser un design comparable.
Pour une autre personnalisation, voici les lignes dont vous aurez besoin.

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS

La ligne existe, vous la complétez, sinon vous la rajoutez

MODIFICATION DES POLICES

Les liens

.tabs-inner .widget li a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Les liens au survol

.tabs-inner .widget li a:hover {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le premier lien

.tabs-inner .widget li:first-child a {text-align : center ;  font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

Un fond dans chaque lien

.tabs-inner .widget a {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans chaque lien au survol

.tabs-inner .widget a:hover {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le premier lien

.tabs-inner .widget li:first-child a {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le module en entier

.tabs-inner {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer les liens

 .tabs-inner .widget a {border:solid 1px #D8D7D7}

Pour encadrer les liens au survol

 .tabs-inner .widget a:hover {border:solid 1px #D8D7D7}

Pour encadrer le premier lien

.tabs-inner .widget li:first-child a:hover {border:solid 1px #D8D7D7}

Pour encadrer le menu en entier

.tabs-inner {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

Si vous avez envie d'un menu plus évolué, pensez à regarder les articles de cette catégorie