Bonjour, un autre tuto mais cette fois ci dans la partie cSS ! 

vous vous demandez sûrement (ou pas ?) comment ai-je pu faire des fonds différents pour la partie des derniers articles ou encore la partie codage et anime/manga et les liens comme "suggestion" et "anilist" ne sont pas affectés ? la réponse est : LE CSS !

ici on va surtout se concentrer sur les liens des menus il vous suffira simplement de changer de sélecteur si vous voulez faire de même pour les derniers articles ou autre (pour connaître le sélecteur je vous renvoie vers reflet dans une flaque ou encore Fantasy graph)

déjà il faut déterminer le bon sélecteur, pour les liens du menu :

.module_menu_type_links2 

mais vous devez aussi ajouter le sélecteur "a" pour définir que ce sont bien les liens que l'on veut modifier et non le bloc conteneur !!

le sélecteur final est donc celui ci :

.module_menu_type_links2 a 

passons maintenant aux propriétés que vous souhaitez ajouter a vos liens, encore une fois je vous renvoie chez les personnes cités plus haut qui ont déjà fait des articles sur la liste des propriétés ou alors internet est une belle ressource !! 

par exemple, j'aimerai un fond, des coins arrondis, un contour que sur le bas mais aussi que le texte à l'intérieur soit visible et changer de police d'écriture !! (cela fait beaucoup d'informations mais je vais détailler) :

fond :

background

coin arrondis :

border-radius

contour bas :

border-bottom

couleur texte :

color 

police d'écriture :

font-family

voilà les propriétés choisies pour les liens, j'assemble tout avec les " { " après le sélecteur, ";" pour séparer les différentes propriétés, ";" après la dernière propriété et "}" à la fin pour fermer le code :

.module_menu_type_links2 a {
background : #      ;
border-radius : xpx xpx xpx xpx;
border-bottom : xpx # (syntaxe);
color : #   ;
font-family : "   ";
}

maintenant il  suffit de choisir vos valeurs, couleur et la police d'écriture, pour ma part j'ai fait ce code-ci :

.module_menu_type_links2 a {
background : #e3ce8a;
border-radius : 5px 5px 5px 5px;
border-bottom : 4px #e38a8a solid;
color : white ;
font-family : "Pride";
}

pour que cela rende comme ça :

bof je suis pas trop convaincue, il manque quelque chose ...

pourquoi ne pas ajouter d'autre propriété, de quoi changer la taille du texte, changer la taille du fond en le qualifiant comme "tableau" (jsp trop si je m'exprime bien), des marges, centrer le texte...

j'optimise mon code :

.module_menu_type_links2 a {
background : #e3ce8a;
border-radius : 5px 5px 5px 5px;
border-bottom : 4px #e38a8a solid;
color : white  ;
font-family : "Pride";
font-size : 25px;
padding : 10px;
display : block;
margin-bottom : 5px;
text-align : center;
}​

toute la partie violette a été ajouté, ce qui donne ceci :

Le rendu est quand même bien meilleur n'est-ce pas ? il faut toujours un peu bidouiller et trouver de quoi optimiser vos codes, le code précédemment était bon mais pas optimiser pour les visiteurs du blog car trop petit et avec le choix de la police il faut adapter la taille du texte !
Je vous conseille de visiter le blog de Kaly qui donne des conseils sur les erreurs à éviter pour son blog qui sont très intéressants ! 

sur ce, une bonne soirée en espérant que le code est été clair et utile !