Qu'est-ce le code HTML d'un thème ?

Le code HTML sert à afficher le blog. Il est modifiable sur les plateformes OverBlog Kiwi, Tumblr et Blogger (entre autres). Il ne faut pas le confondre avec le code HTML d'un article. Quoi que vous modifiez dans le code du thème, les billets ne sont pas modifiés ni encore moins supprimés, seule l'affichage du blog sera modifié. Pour modifier le code, il est nécessaire de connaître les bases des langages HTML & CSS.

Personnaliser le thème

Sur Tumblr, cliquer sur "Personnaliser" en haut de votre blog

Ou

  • Rendez-vous sur tumblr.com
  • Ouvrir la partie personnalisation (tumblr.com/settings) : Paramètres (icône engrenage)
  • Clic sur le nom du blog
  • Bouton "Personnaliser"

Si vous ne voulez pas modifier le code, la plupart des thèmes possèdent plusieurs options et en bas de page, partie "options avancées;", une zone de saisie "ajouter du css personnalisé" qui permet d'ajouter des lignes de code CSS qui modifieront l'apparence du blog (fond, polices, tailles, etc)

Ouvrir la page personnaliser via le blog
Ouvrir la page personnaliser via le blog
Ajouter des lignes de code CSS

Le code du thème

Pour ouvrir le code, cliquer sur "éditer HTML"

Ouvrir le code HTML

Ouvrir le code HTML

Comprendre le fonctionnement du code

  • Le code entier est compris entre deux balises html. Ne rien écrire avant et après.
  • Entre les deux balises head, se trouvent des infos non affichées, notamment les balises pour les moteurs de recherche et le code CSS
  • Ce qui trouve entre les deux balises <body> et </body> sera affiché en tant que tel sur le blog. Tout ce qui est saisi là est visible sur le blog.

Il est important de bien repérer ces zones avant de commencer à modifier le code.

Schéma du code du thème.

Schéma du code du thème.

Si vous avez obtenu le code entier d'un thème, effacer tout le code existant et collez le nouveau. Puis enregistrer.

Feuille de style

Les feuilles de style se trouvent toujours dans la partie head. Chaque feuille de style se trouvent entre deux balises style.

Dans certains thèmes, il y a une seule feuille de style, mais parfois, il y en a trois.

partie style dans le code

partie style dans le code

Le code CSS appliqué pour le thème est divisé en plusieurs parties

  1. Feuille(s) de style du thème dans des fichiers externes

  2. /*---*/ : partie CSS intégrant les options de design

  3. {CustomCSS} : partie CSS intégrant les lignes de CSS ajoutées dans la partie "avancé"

Si vous voulez modifier le style du blog directement dans le code, ajoutez des lignes dans la partie 2 entre les deux balises style. Si les lignes sont mal placées, elles resteront en blanc au lieu de se colorer, il faut les déplacer.

Sauvegarde / récupération du code

Il est intéressant de garder des sauvegardes du code (copier-coller le code entier dans un fichier texte) même si Tumblr propose de récupérer des anciennes versions de votre code. La page http://www.tumblr.com/themes/recover permet même de voir les modifications sur les dernières versions

Documentation tumblr

Pour modifier un thème en profondeur, il convient de se référer à la documentation sur les balises de données utilisées dans les thèmes de Tumblr : https://www.tumblr.com/docs/fr/custom_themes