1 - Fonction

Les codes CSS servent à modifier le blog. 

Par exemple, dans ce blog, j'ai mis un code CSS pour baisser l'opacité du menu de gauche. Ou encore, j'en ai mis un pour mettre de l'ombre au titre des articles / rubriques. 

CSS veut dire "Cascading Style Sheets", en français "feuilles de style en cascade".

2 - Où le placer ?

EklaBlog nous a tout préparé pour pouvoir mettre des codes CSS ! C'est très simple : dans la barre de menu, cliquez sur "Apparence", puis "Modifier le thème". Ensuite vous descendez et vous trouvez . Vous cliquez dessus et vous trouvez une zone de texte. C'est ici qu'il faut mettre tous les codes CSS pour votre blog !

Un code CSS est toujours représenté de la même manière : 

Sélecteur {propriété: valeur}

Un sélecteur :

Les sélecteurs, c'est l'élément que vous allez changer, modifier, l'élément sur lequel vous allez travailler (par exemple, le titre des articles). Vous pouvez en créer des nouveaux (je ne vous l'apprendrais pas sur ce blog car je n'ai pas assez de connaissances en CSS, donc moi-même je ne sais pas très bien le faire). 

La propriété :

La propriété est, dans un code CSS, le nom de l'effet à appliquer (par exemple : ombre). Leur nom est en anglais, sans accent ni caractères spéciaux et avec très rarement un tiret. 

La valeur :

La valeur dépend de la propriété que vous avez mis. Elle permet de mettre exactement comme vous voulez. Par exemple, si vous avez utilisé une propriété "couleur", vous devrez mettre en valeur la couleur, par exemple #993300 et si vous avez utilisé une propriété pour arrondir des angles, vous devrez mettre la valeur en px (pixels), par exemple 2px. 

La ponctuation :

Dans une code CSS, la ponctuation est très importante. Toutes les propriété qui sont pour un même sélecteur se trouvent entre accolades "{ }". Les propriété et les valeurs sont séparées par deux points ":", et les propriétés doivent être séparées d'un point virgule ";"
Dans Eklablog, si vous oubliez les accolades, un message d'erreur vous le signalera.

Les retours à la ligne et les espaces entre les signes de ponctuation ne changerons pas le code. Mais je vous conseille d'aérer votre code, vous vous retrouverez plus facilement. 

Les sélecteurs d'EklaBlog :

Pour notre premier code CSS, voici un code pour changer la couleur des pseudos dans la Shoutbox :

​.menu_shoutbox strong {color:#a7711c;}​

Mettez la couleur que vous voulez (mettez-la à la place de ce qui est en gras et rouge). 

Voici un lien vers un site pour avoir le code des couleurs : ColorPicker.com

Si vous ne voulez pas mettre une couleur comme ça, vous n'avez qu'à enlever le dièse # et mettre à la place la couleur en anglais. 

Toutes les couleurs en anglais : Cliquez ici

Voici un code CSS assez simple pour changer la couleur de quand on surligne un texte (par exemple, dans mon blog, la couleur est vert). La couleur d'origine est bleu. 

::selection { background-color: #COULEUR DU SURLIGNAGE; color: #COULEUR DU TEXTE SURLIGNÉ; }

Explications :

#COULEUR DU SURLIGNAGE c'est de quelle couleur est le "surlignage" (par exemple, dans mon blog, vert).

#COULEUR DU TEXTE SURLIGNÉ c'est la couleur qu'aura le texte surligné (par exemple, dans mon blog, blanc).

_______________________________________________________________________________________

Mettez la couleur que vous voulez (mettez-la à la place de ce qui est en gras et rouge). 

Voici un lien vers un site pour avoir le code des couleurs : ColorPicker.com

Si vous ne voulez pas mettre une couleur comme ça, vous n'avez qu'à enlever le dièse # et mettre à la place la couleur en anglais. 

Toutes les couleurs en anglais : Cliquez ici

Voici un code CSS pour écrire une petite phrase en bas de votre blog (dans le pied de page ; là où il y a CGU, créer un blog, etc) : 

#footer:after{
    content: "- TEXTE";
    color: #COULEUR
}​

Explications :

#TEXTE c'est le texte qu'il y aura

#COULEUR c'est la couleur du texte (conseil : mettez le texte de la même couleur que le reste).

Mettez la couleur que vous voulez (mettez-la à la place de ce qui est en gras et rouge). 

Voici un lien vers un site pour avoir le code des couleurs : ColorPicker.com

Si vous ne voulez pas mettre une couleur comme ça, vous n'avez qu'à enlever le dièse # et mettre à la place la couleur en anglais. 

Toutes les couleurs en anglais : Cliquez ici