Éditeur de thèmes - Ajouter des fichiers CSS

Blogger - L’outil de conception de thèmes

Ajouter des fichiers CSS depuis l'éditeur de thèmes Blogger est un système ingénieux qui permet de visualiser presque instantanément les effets des déclarations sur le blog.
C'est un outil excessivement pratique pour apprendre et tester par sois-même des déclarations.

Remarque :

Cette fiche traite de fonctionnalités intégrées dans l'UI-2010 (à la retraite depuis 2021). Nous attendons les prochaines évolutions de l'UI-2020 pour mettre à jour le contenu.

Qu'est-ce qu'un fichier CSS ?

Les fichiers CSS sont composés de déclarations qui ont pour mission de modifier l'apparence de tous les éléments contenus dans une page web.
Ainsi, on peut modifier les couleurs des textes, des arrières-plan, la taille des polices, la disposition des éléments, appliquer des effets de transition, etc. La palette est relativement bien garnie.

Pour en savoir plus, je vous invite à lire les articles du centre d'aide Blogger :

Modifier les CSS dans l'outil de création de thèmes

Sur le web, vous trouverez un bon nombre de sites dédiés, dont ceux-ci :

  • W3Schools.com (en anglais)

    W3Schools est l'endroit idéal pour commencer à apprendre ce langage. Nous vous encourageons fortement d'ajouter ce site à vos favoris et d'en faire votre livre de chevet.

  • SelfHtml.org (en allemand)

    Ce site vous sera très utile, si vous avez besoin d'obtenir des explications détaillées. Le site contient également de nombreux exemples.

  • mozilla.org (en anglais, français, espagnol, portugais, etc...)

    Mozilla Developers s'adresse à un public très international puisque les pages sont traduites dans de nombreuses langues dont le français.



Ajouter des déclarations depuis l'éditeur de modèles

Sur Blogger, en lançant l'éditeur de thèmes en 2010, les ingénieurs ont marqué le coup, en offrant la possibilité d'ajouter des styles personnalisés. Cela évite aussi d'aller trifouiller inutilement dans le code HTML du modèle.
Certes, l'application reste encore fragile et peut être facilement endommagée en fonction du thème et du navigateur utilisé, mais devient efficace quand tout tourne bien "rond".

Pour accéder à l'éditeur de thème :

  • UI-2020
  • Thème
  • Personnaliser
  • Avancé
  • Ajouter Fichier CSS
Capture UI-2010
Éditeur CSS UI-2010

A chaque fois que vous introduisez de nouvelles déclarations, l'aperçu se recharge en appliquant vos modifications.

Dés que vous enregistrez, ces déclarations sont ajoutées dans le fichier XML de votre thème, juste avant la balise ]]></b:skin>

Pour accéder à l'éditeur :

  • UI-2020
  • Thème
  • Menu Personnaliser
  • Modifier le code HTML

Vous pouvez donc, aussi ajouter vos nouvelles déclarations à cet endroit. Elles seront également reprises dans l'éditeur de modèles (c'est magique :D).

Pour y accéder, développez <b:skin></b:skin> et parcourez son contenu.

Capture UI-2010
Les CSS dans l'éditeur HTML - Développer la balise b:skin
Capture UI-2010
Les CSS dans l'éditeur HTML - Fin de la balise b:skin

Dans l'éditeur de modèles, il est conseillé d'ajouter les nouvelles déclarations à la suite. Comme pour le langage courant (pour nous le français), les navigateurs exécutent les CSS du haut vers le bas. Si plusieurs déclarations sont en double, c'est la déclaration située au plus près de la fin du fichier qui devient prioritaire.

Afin de ne pas surcharger votre modèle, vous pouvez supprimer les déclarations inutilisées ou en double.

Pour vous repérer plus facilement dans votre fichier, Vous pouvez ajouter des notes personnelles.

Exemple :

/* Modules pied de page
---------------------------------------------------- */

Cet indice s'avère souvent utile lorsque le fichier devient volumineux ou lorsque vous rencontrez des problèmes.
Il peut permettre à celui qui vous portera assistance, de remonter la piste et vous fournir des explications.

Les notes personnelles doivent être introduites entre /* et */



Gérer son blog

Spotlight

Populaires cette semaine