Quelques astuces

Tout d’abord, pour activer votre CSS il faut aller dans votre panneau de configuration OverBlog : « Design », « Mode CSS » et cocher « Appliquer ma feuille de style personnalisée » dans l’onglet « Mon Style ». Je vous déconseille fortement d’activer le mode « Configuration Avancée ».

1°) Pensez à faire une sauvegarde régulière de votre CSS du Blog.

2°) Evitez de faire des tests directement sur votre CSS Overblog.

Allez sur la page concernée (généralement l’accueil), « Enregistrer-sous » votre page à partir du menu « Fichier » de votre navigateur.

Ouvrez ensuite, avec Notepad++, le fichier « Article.CSS » présent dans le dossier téléchargé et ouvrez dans votre navigateur la page « NomduBlog.html » téléchargée.

En modifiant « Article.CSS », vous pourrez visualiser les effets de vos modifications apportées sans temps de latence et sans risque de perdre vos données.

3°) Pour ma part, j’utilise Notepad++ afin de modifier les fichiers HTML et CSS. Ses fonctionnalités sont très utiles car elles permettent de « vérifier » les valeurs inscrites grâce à des codes de couleurs. Vous le trouverez sur http://www.01net.com.

4°) Afin trouver rapidement les codes couleur j’utilise ColorZilla, un module de Firefox téléchargeable ici : https://addons.mozilla.org/fr/firefox/addon/271.

5°) En bon maniaque, je vous conseillerai de supprimer les doublons et de renommer à votre convenance les champs indicatifs marqué par /* -----Indication----- */.

Initiation au CSS

Je ne vais pas trop développer, mais le CSS permet de mettre en page vos écris et données HTML d’une façon rapide et simple. Afin d’y arriver, énormément de termes existent. Bien que vous en trouviez la majorité dans votre CSS, ce site vous sera très utile : http://www.w3schools.com/css/default.asp. Les codes utilisent l’anglais et non des valeurs incohérentes ce qui permet d’utiliser un peu sa logique.

À l'époque, j'ai beaucoup appris grâce au site du Zéro. Jettez y un oeil, ça vaut le détour !

>>> Comment ça marche : Dans le code HTML on place des balises avec un identifiant. Dans le CSS, on reprend cet identifiant et on lui ajoute des valeurs.

Exemple : pour un titre d’article marqué en HTML d’un p style= "TitreArticle", on reprend dans le CSS : .TitreArticle, et entre crochets on applique les valeurs : {font-size : 60%; color : black; …}. Les points virgules sont importants : ils permettent d'ajouter à la suite différentes valeurs.

Modifications possibles pour votre Blog

Les valeurs affichées peuvent ne pas correspondre aux paramètres de votre blog. Il faudra très certainement les modifier afin de mieux cadrer vos images, ect ... Vous pouvez modifier la plupart des valeurs en testant avec la méthode expliquée au début de l’article : point 2.

• Pour changer la couleur de vos texte (color) ou de votre fond (background-color), il faut insérer un code similaire à : #000000 (un dièse et 6 chiffres).

• Le terme :hover signifie lorsque l’on passe sur la zone avec le pointeur de la souris. Un a :hover{color :#...} est donc un lien qui change de couleur lorsque l’on passe dessus avec la souris.

• Les Padding et les Margin servent, comme leur nom l’indique, à décaler et à placer des marges sur des images, du texte et des structures comme les Box. Ils prennent pour valeur des pixels : 0px, 65px, ect ...

• Pour mettre un cadre à votre blog : CSS à modifier

body, html {background-image : url(http://www.blabla.jpg); background-position : center; background-repeat : no-repeat;}

• Pour ajouter une bannière directement dans le CSS : CSS à modifier

#cl_0_0 {width : 100%; background-image : url(http://www.blabla.jpg); background-repeat : no-repeat; background-position : 0px 0px; padding-top : 265px;}

• Pour ajouter une image à vos .Box (menus) : CSS à modifier

.box-titre {background-image : url(http://www.blabla.jpg); background-repeat : no-repeat; background-position : center center; position : relative; padding : 0px; height : 65px;}

Ce petit tutoriel a été fait afin de mieux comprendre le fonctionnement du CSS d’Overblog. Je ne suis absolument pas un expert, il y a certainement des explications approximatives et peu efficientes. Cet article n'est d'ailleurs pas fini, mais par manque de temps je le poste tout de même.

Dans les tous les cas, si vous avez des questions supplémentaires n’hésitez pas. Je complèterai cet article ou bien j’en ferai un second !