A quoi sert le code HTML ?

Le template (modèle) d'un thème sert à afficher le blog, les articles, les pages, les commentaires selon une structure définie avec du HTML et du CSS (par exemple, affichage sur deux colonnes).
Il est modifiable sur les plateformes OverBlog Kiwi, Tumblr et Blogger (entre autres).

La modification du code est réservée aux blogueurs qui ont un minimum de connaissances en la matière.

Exemple : le code HTML d'un thème sur OverBlog Kiwi

Pour ouvrir le code HTML, cliquez sur le menu Gérer - Thème - Editer.

Comprendre la structure du code

Pour commencer, bien repérer les principales zones du code avant de commencer à modifier le code.

  • <!doctype html>. Première ligne présente sur tous les thèmes. Ne rien ajouter avant cette ligne.
  • <html></html> : code HTML. Tout le code HTML se situe de la ligne 2 à dernière ligne. Ne rien ajouter avant ou après
  • <head></head> : partie HEAD. Balises pour le référencement, scripts feuilles de style, CSS. Les lignes ne sont pas affichées sur le blog, mais sont importantes. Ne rien ajouter avant.
  • <body></body> : partie BODY. Le contenu affiché sur le blog. Ne rien ajouter après.
code overblog
Structure du thème

Où se trouve la feuille de style CSS ?

La ou les feuilles de style se trouvent dans le code HTML. Vous les trouverez au début du code.

  • Soit dans des fichiers externes avec une ou des lignes de ce type :
  • ex : <link type="text/css" href="adressefichier" rel="stylesheet" />
  • Soit entre deux balises style (exemple ci-dessus)

Modifier le CSS

Ajouter des nouvelles lignes de CSS à la fin de la feuille de style donc avant le dernier </style>.

Ne pas saisir du langage HTML dans cette zone. En revanche, le langage twig est intégré au langage CSS. Ce langage sert par exemple à placer des conditions dans le CSS pour varier le style suivant les types de pages.

code css overblog
Ajouter CSS

Règles importantes.

Le CSS est une suite de lignes permettant de déclarer des propriétés de style pour ds éléments du blog.

Exemple de ligne : .post{font-size:12px;color:red;}.

  • .post est le bloc identifié par une classe de style qui commence par un point
  • font-size et color sont les propriétés à modifier placés entre accolades et séparés par des points virgule. Il est important de ne pas oublier une accolade ou un point-virgule.
  • 12px et red sont les valeurs des propriétés placés après deux points.

Pour un style commun entre plusieurs éléments, séparer les classes (.) ou les id (#) par une virgule :

.classe1, .classe2, #titre {font-size:12px;font-family:arial;color:red;}