Créer un blog avec Dotclear #7 : Personnalisation, 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.

Styles prédéfinis

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.

Grand aperçu Blowup

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.

Liste des styles

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

Blowup style Spring TimeBlowup style ForestBlowup style FlamingoBlowup style nightBlowup style Peas and carrotsBlowup style RabbitBlowup style Rec roomBlowup style SevilleBlowup style Typo

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

Je style mon Blowup

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

Choix des couleurs

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

Sélection de couleur

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

Note :

La couleur que l’on choisit pour le « prélude » (liens d’accessibilité en haut de page) s’applique également aux liens et à l’arrière-plan de la zone. Ces liens seront donc « invisibles » sauf en cas de survol par le pointeur de la souris.

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. Sélection du type de remplissage

Apparence des caractères

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.

Bannière et bandeau

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.

Choix de bannière

Note :

Vous avez la possibilité de remplacer le titre du blog par votre bannière en cochant la case Cacher le titre principal (section Haut de page). Le titre « texte » disparaît alors et la bannière devient cliquable.

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 !)

Partagez !

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 ;-)

Import / export

Contraintes

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.

Dossier public et multiblog

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 ;-)

Personnaliser le theme au-delà de la configuration automatisée

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 :

1. Créer un nouveau répertoire dans /themes

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

2. Y placer un fichier _define.php

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.

3. Récupérer les images

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

4. Récupérer le style.css de Blowup.

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>).

5. Mettre le thème en ligne

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 !

Voir en ligne.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *