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 !

Bonjour ! on se retrouve pour un nouveau tutoriel cette fois ci en HTML, pour illustrer le titre voici un exemple :

vous voyez ce que j'ai entouré (comme j'ai pu x) ) l'icon de l'onglet de mon blog de test, c'est l'icon de base des blog d'ekla, mais je peux comprendre qu'il ne plaise pas a tout le monde, c'est pourquoi je vous propose un code qui puisse passer de ceci à cela :

en vérité c'est plutôt assez simple ! pour cela il vous suffit d'utiliser un module simple (menu d'ekla) vous n'êtes pas obliger d'en utiliser un uniquement pour le code mais utiliser un module simple pour votre présentation ou autre et y glisser le code à l'intérieur, prenez mon module de " navigation & codage " le code se trouve dans ce module sans impacter ce qu'il y a dedans !

pour le code le voici :

<script>// <![CDATA[
var ico=document.getElementById ('favicon');
ico.href='url de l'image';
// ]]></script>

remplacer url de l'image par l'image que vous souhaitez sans enlever les apostrophes !! 

enregistrer votre module recharger votre page et l'icon sera remplacé !

Il fut un temps vers 2012/2013 la grande mode sur ekla était les message defilant grâce au HTML mais aussi les message de bienvenue personnalisé comme ceci :

Chouette non ? vous pouvez l'utiliser comme message de bienvenue ou autre ! voici le code :

le "txt" présent dans le code est à ne pas toucher si vous voulez que le message soit destiné au compte qui navigue sur votre blog !

Vous pouvez modifier les information en violet

mettez votre code dans un module simple ou sur l'accueil de votre blog et le tour est joué !