Un code CSS permet aux blogs d'être personnalisés selon vos goûts.

Pour cela, il suffit d'aller dans "Apparence", qui est tout en haut, puis "Modifier le thème" et aller dans "CSS".

Chaque code CSS a une ponctuation importante. Si vous effacez un point ou une virgule, le code ne fonctionne pas ou devient un autre code.

Un code CSS comporte un sélecteur, des propriétés et des valeurs. Je m'explique :

Le sélecteur, c'est l'élément sur lequel vous voulez y mettre des effets, modifier : ça peut être une image, un titre, le texte, des effets etc.

Les propriétés sont les noms des effets appliqués sur le sélecteur. (ce sont les bordures, les ombres, les tailles etc) Ils sont en anglais.

Et pour finir, les valeurs peuvent êtres modifiées selon ce que l'on veux (des chiffres en bref) Par exemple, on peut changer les tailles par des valeurs, en y mettant 70px par exemple, pour les ombres on change les valeurs pour les mettre plus ou moins flou etc.

 

En gros, ça ressemble à ceci :

sélecteur {propriété: valeur;

           propriété: valeur;

             }

Tout est a remplacer dans un code =)

 

Pour avoir des coins arrondis sur votre blog, il suffit de copier/coller ce code dans l'emplacement CSS.

En bleu, il faut remplacer le mot "sélecteur" par un code sélecteur (voir la liste des codes sélecteurs).

En rouge, remplacez les X et mettez des valeurs pour avoir des coins plus ou moins arrondis.

 

 

Sélecteur {border-radius: Xpx;

          -moz-border-radius: Xpx;

          -webkit-border-radius: Xpx}

 Ici, je vous présente la liste des codes sélecteurs. Dans certains tutos pour les codes CSS par exemple, je mettrais le mot "sélecteur" en bleu (pour que vous puissiez le remarquer et le changer avec le code sélecteur que vous voulez).

Ce qui est en rouge est a enlever je précise. Copiez uniquement le début puis collez le dans les autres codes où il y a écrit "sélecteur" en bleu.

 

 Images : 

img {propriété: valeur;}

 

Article :

.module_contenu {propriété: valeur;}

 

Article titre :

.module_titre {propriété: valeur;}

 

Article bas :

#module_bottom {propriété: valeur;}

 

 Dernier Visiteur :

 .module_menu_type_lastvisitors {propriété: valeur;}

 

Commentaire :

 .comment_normal {propriété: valeur;}

 

Commentaire auteur :

 .comment_admin {propriété: valeur;}

 

Commentaire avatar :

 .commentavatar {propriété: valeur;}

 

Barre d'outil :

#menubar {propriété: valeur;}

 

Fond de fenêtre :

 #body {propriété: valeur;}

 

Fenêtre d'information :

.window {propriété: valeur;}

 

Fond de page :

 #background {propriété: valeur;}

 

Header :

 #header {propriété: valeur;}

 

Menu contenu :

 module_menu_contenu_block {propriété: valeur;}

 

Pied de page :

#footer {propriété: valeur;}

 

Menu gauche :

 #menu1 {propriété: valeur;}

 

Menu droit :

 #menu2 {propriété: valeur;}

 

Menu titre :

 .module_menu_titre {propriété: valeur;}

 

Menu de l'en tête :

 #menu {propriété: valeur;}

 

En survolant les images, une luminosité apparaît au niveau des contours, grâce au code ci dessous :

En rouge, c'est la couleur que vous pouvez changer.

En vert, les valeurs pour régler la luminosité, son intensité, sa largeur, son flou etc.

En bleu, il faut remplacer le mot sélecteur par un code sélecteur (voir la liste de tous les codes sélecteurs. N'oubliez pas qu'il faut enlever {propriete : valeur;} )

 

 

sélecteur img:hover{
  opacity: 1;
  -webkit-box-shadow: 0px 0px 15px #fff;
  box-shadow: 0px 0px 50px #fff;
  }​

L'exemple ci dessus est cliquable. Il vous montre le résultat du code lorsqu'on le colle dans l'emplacement CSS. La valeur en rouge peut être changée. Elle permet de changer la couleur.

 

#menubar  { background: #576060;}