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

{{ :2.0:admin:themes:blowup_apercu.png |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.

{{ :2.0:admin:themes:blowup_predef.png |Liste des styles}}

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

{{:2.0:admin:themes:blowup_spring_timer.png|Blowup style Spring Time}}{{:2.0:admin:themes:blowup_forestr.png|Blowup style Forest}}{{:2.0:admin:themes:blowup_flamingo.png|Blowup style Flamingo}}{{:2.0:admin:themes:blowup_iceberg.png}}{{:2.0:admin:themes:blowup_night.png|Blowup style night}}{{:2.0:admin:themes:blowup_peas_and_carrotsr.png|Blowup style Peas and carrots}}{{:2.0:admin:themes:blowup_rabbit.png|Blowup style Rabbit}}{{:2.0:admin:themes:blowup_rec_room.png|Blowup style Rec room}}{{:2.0:admin:themes:blowup_seville.png|Blowup style Seville}}{{:2.0:admin:themes:blowup_typo.png|Blowup 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.

{{ :2.0:admin:themes:blowup_color_picker.jpg |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.</note>

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. 
{{ :2.0:admin:themes:blowup_remplissage.png |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 [[http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em|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.

{{ :2.0:admin:themes:blowup_banner.jpg |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.</note>

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. [[#dossier-public-et-multiblog|ci-dessous]]) et voudriez avoir plusieurs Blowup identiques ? Jetez un œil sur //Import / export de configuration//, au bas de la page ;-)

{{ :2.0:admin:themes:blowup_confimport.png |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 [[..:multiblog|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 :

<code php>
<?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'
);
?>
</code>

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.
<code css>
<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>
</code> 
Ç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 !