Créer un blog avec Dotclear
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 {#styles-predefinis .sectionedit2}
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](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_apercu.png "Grand aperçu Blowup"){.mediacenter}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_apercu.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_apercu.png"){.media}
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](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_predef.png "Liste des styles"){.mediacenter}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_predef.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_predef.png"){.media}
et donne des résultats aussi divers que ceux ci-dessous :
[![Blowup style Spring
Time](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_spring_timer.png "Blowup style Spring Time"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_spring_timer.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_spring_timer.png"){.media}[![Blowup
style
Forest](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_forestr.png "Blowup style Forest"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_forestr.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_forestr.png"){.media}[![Blowup
style
Flamingo](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_flamingo.png "Blowup style Flamingo"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_flamingo.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_flamingo.png"){.media}[![](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_iceberg.png){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_iceberg.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_iceberg.png"){.media}[![Blowup
style
night](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_night.png "Blowup style night"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_night.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_night.png"){.media}[![Blowup
style Peas and
carrots](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_peas_and_carrotsr.png "Blowup style Peas and carrots"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_peas_and_carrotsr.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_peas_and_carrotsr.png"){.media}[![Blowup
style
Rabbit](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_rabbit.png "Blowup style Rabbit"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_rabbit.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_rabbit.png"){.media}[![Blowup
style Rec
room](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_rec_room.png "Blowup style Rec room"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_rec_room.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_rec_room.png"){.media}[![Blowup
style
Seville](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_seville.png "Blowup style Seville"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_seville.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_seville.png"){.media}[![Blowup
style
Typo](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_typo.png "Blowup style Typo"){.media}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_typo.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_typo.png"){.media}
ce qui donne une idée des possibilités de configuration
![:-)](https://fr.dotclear.org/documentation/lib/images/smileys/icon_smile.gif){.icon}
Je style mon Blowup {#je-style-mon-blowup .sectionedit3}
Les styles prédéfinis, c’est bel et bon, mais pourquoi ne pas se faire
un style rien qu’à soi ?
Choix des couleurs {#choix-des-couleurs .sectionedit4}
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](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_color_picker.jpg "Sélection de couleur"){.mediacenter}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_color_picker.jpg?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_color_picker.jpg"){.media}
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 layout de
remplissage](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_remplissage.png "Sélection du layout de remplissage"){.mediacenter}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_remplissage.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_remplissage.png"){.media}
Apparence des caractères {#apparence-des-caracteres .sectionedit5}
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](http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em "http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em"){.urlextern}.
Bannière et bandeau {#banniere-et-bandeau .sectionedit6}
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](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_banner.jpg "Choix de bannière"){.mediacenter}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_banner.jpg?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_banner.jpg"){.media}
**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. </div> 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* !) </div> ### Partagez ! {#partagez .sectionedit7}
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](https://fr.dotclear.org/documentation/2.0/admin/themes/blowup#dossier-public-et-multiblog "2.0:admin:themes:blowup ?"){.wikilink1})
et voudriez avoir plusieurs Blowup identiques ? Jetez un œil sur *Import
/ export de configuration*, au bas de la page
![;-)](https://fr.dotclear.org/documentation/lib/images/smileys/icon_wink.gif){.icon}
[![Import /
export](https://fr.dotclear.org/documentation/_media/2.0/admin/themes/blowup_confimport.png "Import / export"){.mediacenter}](https://fr.dotclear.org/documentation/_detail/2.0/admin/themes/blowup_confimport.png?id=2.0%3Aadmin%3Athemes%3Ablowup "2.0:admin:themes:blowup_confimport.png"){.media}
Contraintes {#contraintes .sectionedit8}
-----------
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 {#dossier-public-et-multiblog .sectionedit9}
Si vous avez une installation multiblog, peut-être n’avez-vous pas jugé
utile de créer, comme le suggère la [documentation
multiblog](https://fr.dotclear.org/documentation/2.0/admin/multiblog "2.0:admin:multiblog"){.wikilink1},
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
![;-)](https://fr.dotclear.org/documentation/lib/images/smileys/icon_wink.gif){.icon}
### Personnaliser le theme au-delà de la configuration automatisée {#personnaliser-le-theme-au-dela-de-la-configuration-automatisee .sectionedit10}
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 {#creer-un-nouveau-repertoire-dansthemes}
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 {#y-placer-un-fichier-_definephp}
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}
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 {#recuperer-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. {#recuperer-le-stylecss-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 ``, situé juste avant
</head>, et qui ressemble à ceci.
``` {.code .css}
```
Ç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 layout="text/css"> et </style>).
#### 5. Mettre le thème en ligne {#mettre-le-theme-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.](https://fr.dotclear.org/documentation/2.0/admin/themes/blowup)
Commencer la discussion: Venez écrire un commentaire dans le forum