Thèmes disponibles
Le paramétrage des thèmes s'effectue à partir du tableau de bord en cliquant sur le lien Paramètres des thèmes.
Le premier onglet, Themes, vous permet de choisir un thème parmi ceux disponibles dans notre bibliothèque des thèmes. Pour choisir un thème cliquer sur le bouton radio correspondant à votre choix puis sur Enregistrer. Il est conseillé, si on souhaite personnaliser son blog d'utiliser le thème par défaut qui est entièrement paramétrable (couleurs, disposition, hauteurs, polices, etc.).
Il n'est pas possible d'installer soi-même un thème. Mais si vous trouvez un thème intéressant (ou si vous le construisez vous même), vous pouvez proposer au blogmaster de l'ajouter à la bibliothèque des thèmes .
Le thème par défaut, nommé « Blow Up » est entièrement et très simplement paramétrable : avec des style prédéfinis et/ou en choisissant soi-même les couleurs, images, espacement, polices, etc.
Pour les experts des feuilles de style et du html, il est aussi possible de construire son propre thème « Custum Theme » (voir ci-dessous).
Les Widgets de présentation
Ils permettent d'afficher seulement les blocs de fonctionnalités ou de liens que vous souhaitez faire apparaître dans votre blog.
Les widgets de Dotclear sont extrêmement pratiques pour personnaliser l’apparence d’un blog. Il vous suffit de « faire glisser » les widgets dans la fenêtre de gestion du blog pour qu’ils apparaissent ou disparaissent de la barre de navigation ou du bandeau d'extra.
Il est possible de personnaliser l'ordre des widgets, les termes utilisés, les options des widgets.
Pensez à cliquer sur « mettre à jour les bandeaux » pour que vos modifications soient prises en compte.
Utiliser son thème personnalisé « Custom Theme »
Ce thème permet d'habiller un blog. Il faut connaître le langage CSS et ce thème est donc pour les utilisateurs avancés.
Grâce au « Custom Theme », vous pouvez créer ou modifier un thème existant.
Créer nouveau thème avec « Custom Theme »
Depuis l'interface d'administration, choisissez sur le tableau de bord le lien « Paramètres des thèmes » puis sélectionnez le thème Custom Theme et validez ce choix. Un deuxième onglet, intitulé Configuration du thème apparaît alors dans le panneau. Il offre un champ d'édition d'une feuille de style, vide pour le moment. Vous pouvez y placer toutes les règles css de votre choix.
Si vous souhaitez utiliser des images pour ce thème, vous pouvez créez un répertoire (par exemple « images_theme ») depuis le gestionnaire de médias. Placez-y les éléments graphiques qui vous seront nécessaires. Il ne vous restera plus qu'à indiquer le chemin (relatif) vers ces images dans votre feuille de style.
Modifier un thème existant avec « Custom Theme »
Repérer le nom du répertoire du thème que vous souhaitez utiliser comme base de personnalisation (par exemple le thème Blue Silence se situe dans le répertoire /themes/default).
Astuce : Si vous ne connaissez pas le nom du répertoire de ce thème, sélectionnez-le tout d'abord comme thème de votre blog puis affichez la source de la page. La section <style type="text/css" media="screen"> placée dans le <head> le mentionne.
Sélectionnez comme indiqué plus haut le thème « Custom Theme » comme thème actif sur votre blog.
Dans l'onglet Configuration du thème, écrivez une première ligne :
@import "/all-blogs/themes/nom-du-repertoire-du-theme-base/style.css";
Le thème personnalisé comprend désormais tout le style du thème choisi. Il ne vous restera plus qu'à y ajouter toutes les règles différentes ou supplémentaires au thème choisi pour base. La lecture des css donnant la priorité au « dernier-disant », les règles que vous y inscrirez seront prioritaires sur les règles du thème de base.
Exemple de code à intégrer :
/* on importe la feuille de style du thème Berlin */
@import url(/all-blogs/themes/berlin/style.css);
/* on personnalise avec quelques règles */
/* Taille et espacement des intertitres */
h2{font-size:1.5em;padding-top:.5em;}
/* bandeau (image de fond à droite, hauteur minimum)*/
#top h1{background:url(/default/public/themes/dane.png) no-repeat 90% 10px ;min-height:110px;}
#top h1 span{display:block;}
#top h1 span a{display:block;min-height:110px;}