Le modèle de blog de Systeme.io est clair, blanc et sage. Je voulais un fond noir et des animations. J'y suis arrivé sans changer d'outil, avec deux zones de code que peu de gens utilisent. Voici comment, et les trois pièges que j'ai rencontrés.

D'abord, ce qu'on peut faire sans code

Ouvrez le « modèle du blog » dans l'éditeur, puis cliquez sur « Paramètres ». Vous pouvez y régler, pour tout le blog :

• la police du texte, sa taille et la hauteur des lignes ;
• la police des titres ;
• la couleur du texte et celle des liens ;
• la couleur ou l'image de fond.

Si cela vous suffit, arrêtez-vous là. C'est plus simple et plus solide que du code.

Les deux zones de code

Dans ces mêmes paramètres, sous le titre « Tracking », il y a deux boutons : « Modifier le code d'en-tête » et « Modifier le code de pied de page ». Ils sont prévus pour les outils de mesure, mais ils acceptent n'importe quel code HTML, CSS ou JavaScript.

Comme ce code est posé sur le modèle du blog, il s'applique à toutes les pages. J'ai mis le style dans l'en-tête et les animations dans le pied de page.

Piège n° 1 : le style déborde dans l'éditeur

Après ma première sauvegarde, l'éditeur de Systeme.io lui-même est devenu noir et violet. Mon style s'appliquait aussi à l'écran de travail, ce qui le rendait difficile à utiliser.

La solution : n'activer le style que sur le blog public. J'ajoute un mot-clé à la page seulement quand on n'est pas dans le tableau de bord.

<script>
if (location.pathname.indexOf('/dashboard/') === -1)
  document.documentElement.classList.add('ct');
</script>

Ensuite, chaque règle de style commence par ce mot-clé. Dans l'éditeur, il n'existe pas : le style ne s'applique donc plus.

Piège n° 2 : les noms de classes changent

Dans le code d'une page Systeme.io, les blocs portent des noms comme « sc-cZMPup ». Ils sont fabriqués par une machine et peuvent changer sans prévenir. Un style accroché à ces noms peut casser du jour au lendemain.

J'ai donc visé les balises elles-mêmes : les titres, les paragraphes, les liens, les boutons.

<style>
html.ct, .ct body { background: #000 !important; }
.ct #app p { color: #fff !important; }
.ct #app h1, .ct #app h2 { font-weight: 400 !important; }
.ct #app a { color: #ffb829 !important; }
</style>

Piège n° 3 : sans « !important », rien ne bouge

Systeme.io écrit ses propres couleurs directement sur chaque élément. Ma première version ne changeait donc presque rien. Il faut ajouter « !important » aux règles pour qu'elles passent devant.

Pour aller plus loin : le bloc « Code HTML »

Dans la liste des éléments de l'éditeur, tout en bas, il y a un bloc « Code HTML ». On le glisse dans une page et on y écrit ce qu'on veut. La page d'accueil de ce blog est faite ainsi, et le texte que vous lisez aussi.

J'ai vérifié un point important : ce qu'on y écrit se retrouve bien dans le code de la page en ligne, liens compris.

Ce que cette méthode coûte

• Elle est fragile. Si Systeme.io change la structure de ses pages, mon style peut se dérégler. Je devrai le surveiller.
• Elle demande de savoir lire du code. Une accolade oubliée, et le style ne s'applique plus.
• Elle ne retire pas le badge. Sur le compte gratuit, « Réalisé avec systeme.io » reste en bas de page.

Si vous voulez un site entièrement sur mesure, sans ces limites, c'est un autre travail. J'en ai fait un métier : les prix sont affichés sur la page des tarifs de mon agence.

Et si vous n'avez pas encore de blog, commencez par les étapes pour créer un blog sur Systeme.io.

Tarmou