Blowup, le thème par défaut

Dotclear 2 utilise le thème par défaut Blowup, dont la particularité est d’être entièrement configurable depuis l’administration du blog. Petite visite des possibilités (et contraintes) de ce thème-couteau suisse.

Pour accéder, donc, à la modification du thème, il suffit de cliquer sur le bouton Configuration du thème qui apparaît sous le grand aperçu dans la page Apparence du blog, accessible depuis le tableau de bord.

Blowup est livré avec une dizaine de styles prédéfinis, permettant de se faire une idée de l’étendue des possibilités de configuration. La liste en est disponible en haut de page.

et donne des résultats aussi divers que ceux ci-dessous :

ce qui donne une idée des possibilités de configuration

Les styles prédéfinis, c’est bel et bon, mais pourquoi ne pas se faire un style rien qu’à soi ?

De nombreuses couleurs sont personnalisables, en entrant dans le champ une valeur hexadécimale, ou, en cliquant sur la pipette, via une roue chromatique.

La couleur sélectionnée apparaît alors comme couleur de fond de la case de sélection, rendant visible la configuration à tout moment.

Pour le fond de page, vous pouvez aussi choisir d’appliquer un dégradé dans la zone haute de la page vers la couleur sélectionnée.

Vous pouvez également déterminer la taille et la fonte de caractères pour un certain nombre de « contextes » (texte principal, titre principal, titres du bandeau de navigation, titres et dates des billets…). Les tailles de caractères y sont de préférence définies en em, taille de caractère « relative » et facilement ajustable pour des navigations « atypiques » (malvoyants…). Dans le thème Blowup, 1em correspond à une taille de 10px (10 pixels), ce qui vous permet d’adapter facilement à la taille désirée. Plus d’informations sur l’intérêt des em dans cet excellent article.

Ce qui fait la signature du blog est bien souvent la « bannière », l’image en tête du site. Celle-ci est donc, bien sûr, personnalisable. Outre la quinzaine de bannières livrées avec le thème, vous pouvez charger une image de votre choix ou de votre composition. Celle-ci sera automatiquement redimensionnée pour « rentrer » dans le thème.

Enfin, signalons pour les distraits la possibilité de placer le bandeau de navigation à droite ou à gauche (sélecteur Position du bandeau dans la section… Bandeau !)

Vous êtes tellement satisfait de votre Blowup que vous voudriez faire profiter tout le monde de votre inimitable style, ou vous avez une installation multiblog (cf. ci-dessous) et voudriez avoir plusieurs Blowup identiques ? Jetez un œil sur Import / export de configuration, au bas de la page

Hé oui, aussi incroyable que cela paraisse, il y a de petites spécificités qui méritent toute notre attention si on veut éviter les mauvaises surprises.

Si vous avez une installation multiblog, peut-être n’avez-vous pas jugé utile de créer, comme le suggère la documentation multiblog, un dossier public et un dossier themes pour chaque blog. Cela peut poser un problème si vous utilisez Blowup (avec, par exemple, l’intention de configurer différemment le thème suivant les blogs). En effet, les images d’arrière-plan (bannière notamment) sont créées et stockées dans un dossier blowup-images dans le dossier public. Le même thème Blowup ne peut donc accueillir des bannières différentes dans différents blogs. Il est dès lors recommandé d’appliquer la méthode de la documentation

On peut souhaiter modifier ou déplacer un élément ici ou là dans la structure du thème voire, suite à l’installation d’un plugin, ajouter la balise de template indiquée (il s’agit généralement de plugin n’ayant pas été mis à jour pour tenir compte des dernières possibilités de la version finale), et là, il vaut mieux être averti : vous risquez de casser votre Blowup !

En effet, le système de configuration repose sur le thème tel qu’il est livré et ne saurait être garanti fonctionnel si les fichiers sont modifiés d’une manière ou d’une autre. Il va vous falloir être forts et créer un nouveau thème, en suivant quelques étapes simples :

Nommez-le à votre guise (sans accents ni espaces) et placez-le dans le répertoire des thèmes de votre blog.

Par exemple, vous pouvez faire une copie de celui du thème Blowup (par FTP) (themes/default dans l’arborescence Dotclear). En l’ouvrant dans un éditeur de texte, il ressemble initialement à ça :

<?php
# -- BEGIN LICENSE BLOCK ----------------------------------
#
# This file is part of Dotclear 2.
#
# Copyright (c) 2003-2008 Olivier Meunier and contributors
# Licensed under the GPL version 2.0 license.
# See LICENSE file or
# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
#
# -- END LICENSE BLOCK ------------------------------------
if (!defined('DC_RC_PATH')) { return; }
 
$this->registerModule(
	/* Name */			"Blowup",
	/* Description*/		"Fully customizable theme",
	/* Author */			"Marco & Olivier",
	/* Version */			'1.0'
);
?>

Changez les valeurs entre guillemets doubles (en rouge ci-dessus). La valeur Name sera le nom affiché de votre thème. N’oubliez pas d’enregistrer en utf-8 sans BOM.

Copier le sous-dossier img de blowup dans le dossier de votre nouveau thème.

Faites une copie du fichier style.css de Blowup (il se trouve au même endroit que le _define.php) et placez-la dans le répertoire de votre nouveau thème.

Si Blowup a déjà été configuré par vos soins, affichez le code source de la page de votre blog (menu Affichage du navigateur) et récupérez le texte entre <style type="text/css"> et </style>, situé juste avant </head>, et qui ressemble à ceci.

<style type="text/css">
#wrapper {
background-position:-300px 0;
}
#main {
float:right;
}
#sidebar {
float:left;
}
#page {
font-size:1.3em;
}
body {
font-family:Georgia, serif;
}
#top {
height:130px;
background-image:url(/chemin/vers/public/blowup-images/page-t.png);
}
.day-date {
color:#286CD2;
}
 
</style>

Ça peut être beaucoup plus long, selon la quantité de personnalisations opérées. Collez l’ensemble des instructions à la fin de style.css (sans les balises <style type="text/css"> et </style>).

Votre thème apparaît désormais dans les thèmes de la page Apparence du blog et vous pouvez l’activer en cliquant Utiliser ce thème. L’ensemble des fichiers, css et html sont désormais modifiables via l’Éditeur de thèmes dont le bouton a remplacé celui de la configuration de Blowup.

À vous de jouer !