Méthode n°1 : utiliser les options

Vous n'avez pas de connaissances en CSS : utilisez les options de personnalisation en cliquant sur "Modèle" puis "Personnaliser". Il est possible modifier l'arrière plan, les largeurs des colonnes et différents éléments (partie Avancé).

Méthode n°2 : ajouter du CSS dans l'outil de création de modèles

Vous avez quelques connaissances en CSS... ou trouver des codes sur des blogs d'aide : cliquer sur :

  1. "Modèle"
  2. "Personnaliser"
  3. "Avancé"
  4. "Ajouter le fichier CSS"

Ajouter les lignes de code puis cliquer sur "Appliquer au blog".

Où ajouter des lignes CSS

Les lignes de code css viennent automatiquement se placer à la fin de la feuille de style du modèle.

Méthode n°3 : modifier directement le code

Vous avez des connaissances en CSS et vous voulez modifier directement la feuille de style : ouvrir le code HTML du modèle :

  1. "Modèle"
  2. "Modifier le code HTML"

Le CSS correspond aux lignes bleues et se trouve entre <b:skin><![CDATA[ et ]]></b:skin>

<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

/* .etc.. */

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {border-$startSide: 1px solid $(tabs.border.color);}]]></b:skin>
Capture d'écran

Le code commence avec les définitions des variables utilisées dans l'outil de création de modèles ("Variable definitions"). On retrouve ensuite dans le code CSS à proprement dit :

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

On peut sans problèmes remplacer les variables par des valeurs brutes et ajouter/supprimer des lignes

body {
  font-size: arial;
  margin:0;
  color: black;
}

Toutes les lignes peuvent être ainsi modifiées en respectant bien sûr la syntaxe (accolades, point-virgules, etc => voir bases CSS)

Les lignes ajoutées juste avant ]]></b:skin> primeront sur les lignes précédentes. Par exemple, avec l'extrait de code ci-dessous, le fond sera noir quel que soit la valeur précédemment définie pour body :

<b:skin><![CDATA[
/* Variable definitions
   ====================
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

/* .etc.. */

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {border-$startSide: 1px solid $(tabs.border.color);}
body{background:color:black;}

]]></b:skin>

Bonus : varier les styles entre les pages

Pour avoir des différences de design entre l'accueil et les articles, on peut jouer avec les conditions. On va demander à appliquer un bloc de style "si" (if) c'est la page d'accueil ou archive (cond='data:blog.pageType in {"index", "archive"}'>). Sinon (else), un autre morceau de code sera appliqué (le CSS toujours écrit entre <style> et </style>)


<!-- index-->
<b:if cond='data:blog.pageType in {"index", "archive"}'>   
      <style>
        body{background:white;}
      </style>
<!-- autres pages-->
<b:else/>  
      <style>
        body{background:white;}
      </style>
</b:if>
    

<!--articles-->
<b:if cond='data:blog.pageType == "item"'>  
      <style>
        body{background:blue;}
      </style>
</b:if>
    
<!-- pages statiques -->    
<b:if cond='data:blog.pageType == "static_page"'> 
      <style>
        body{font-size:150%;background:red;}
      </style>
</b:if>

Cette technique permet par exemple de masquer certains modules sur certains types de pages.

Ce code se place dans le code HTML après la feuille de style courante, juste avant </head>

Où ajouter des lignes CSS