Blogger propose les affichages dynamiques. Ils permettent d'avoir plusieurs affichages différents pour son blog : classic (articles les uns à la suite des autres), magazine (mode résumés en cascade), flipcard (galerie de vignettes)... Comment personnaliser ces affichages ?

Ajouts de CSS et Inspecteur de code

Les ajouts de lignes de CSS se font comme pour les thèmes classiques dans l'outil de création de modèle : Modèle > Personnaliser > Avancé > Ajouter fichier CSS.

Dans un autre onglet, ouvrons le blog et choisissons un affichage. Pour faciliter les modifications du CSS, j'utilise l'inspecteur de code sur Google Chrome. C'est un outil inclus dans le navigateur.

  • Faire un clic droit à l'endroit de la page du blog à modifier
  • Cliquer sur "inspecter l'élément"
  • Une fenêtre s'ouvre avec le code HTML à gauche et le code CSS à droite
  • En passant la souris sur les différentes lignes du code HTML, les zones correspondantes sont mises en évidence sur le blog. Exemple ci-dessous.
inspecteur de code
Inspecteur de code (cliquer pour agrandir)

L'inspecteur indique que le bloc résumé correspond à la classe .item dans le CSS. Nous voulons par exemple modifier le fond du résumé. Dans l'outil de personnalisation, nous ajoutons :

.item {background:gray;}

Styles différents selon les affichages

Problème : le fond sera aussi modifié sur les autres affichages (magazine par exemple) qui utilise des résumés avec cette classe de style. La solution se trouve dans le code HTML au niveau du body

<body class="timeslide notouch">

body, c'est tout le blog et pour chaque affichage, le body à une classe de style différent.

  • .classic pour l'affichage "classique"
  • .flipcard pour l'affichage "carte"
  • .magazine pour l'affichage "magazine"
  • .mosaic pour l'affichage "mosaïque"
  • .sidebar pour l'affichage "barre latérale"
  • .snapshot pour l'affichage "instantané"
  • .timeslide pour l'affichage "chronologique"

Par exemple, pour l'affichage timeslide, on ajoute tout simplement .timeslide avant la classe à modifier :

.timeslide .item{background:gray;}

Pour l'affichage magazine, le résumé sera modifié ainsi :

.magazine .item{background:black;color:white;}
affichage timeslide affichage magazine
Résultat avec les affichages timeslide et magazine. Fonds différents avec la même classe de style.

Pour les articles en entier, on peut distinguer aussi les affichages :

.article {color:black;} /*style global*/
.classic .article {background:beige;} /*article sur affichage classic*/
.sidebar .article {background:green;} /*article sur sidebar*/

Et ainsi de suite...

Les modifications de design sont très nombreuses. Pour un élément commun, on peut avoir autant de styles que d'affichages. Exemple avec la barre de menu. L'inspecteur de code donne la ligne suivante :

#header .header-drawer{}
inspecteur de code
Inspecteur de code

Déclinable pour tous les affichages :

  • .classic #header .header-drawer{background:blue;}
  • .flipcard #header .header-drawer{background:gray;}
  • .magazine #header .header-drawer{background:red;}
  • .mosaic #header .header-drawer{background:purple;}
  • .sidebar #header .header-drawer{background:green;}
  • .snapshot #header .header-drawer{background:yellow;}
  • .timeslide #header .header-drawer{background:black;}
outil de création de modèles
Ajout dans l'outil de création de modèles.
barres de menu
Barres de menu différentes selon les affichages.