Un thème en kit

Kit est un thème conçu pour les grands débutants en css. Volontairement basique (une seule couleur d'accompagnement, peu de « fioritures », utilisation des fichiers php par défaut), j'ai essayé de faire en sorte qu'il soit facile à personnaliser et à complexifier à l'envi pour les plus hardis.

Il ne sera question dans ces pages que de la personnalisation de l'habillage. Pour des modifications d'une autre nature (installation de plugins, modifications ou déplacement de contenu des fichiers...) reportez-vous aux tutoriaux habituels de DotClear.

Un index (à venir) et un sommaire vous aideront à trouver plus facilement l'article qui vous intéresse. Tous les exemples de personnalisation sont accompagnés de capture d'écran. En consultant la galerie des captures vous trouverez des liens vers les articles correspondants.

Si vous utilisez et personnalisez ce thème et que vous souhaitez participer à la mosaïque de démonstration n'hésitez pas à laisser un trackback ou un commentaire sous le billet prévu à cet effet je ferai une copie d'écran avec un lien vers votre blog^[1].

Pour ne pas alourdir ce guide, certaines notions ne seront pas réexpliquées. Je vous invite à vous référer aux tutoriels de DotClear, et notamment aux liens regroupés dans le menu latéral sous la rubrique « A garder sous le coude » : schéma des grands blocs et le vocabulaire d'une feuille de style.

Sans être indispensables certains outils vous faciliteront la tâche. Il s'agit d'extensions pour le navigateur Firefox dont l'installation est très simple :

• Web Developer une barre d'outils aux multiples fonctions telles que la mise en valeur des blocs de la page ou un validateur html et/ou css.
• View Source Chart affiche en couleurs la source de la page : on visualise immédiatement l'imbrication des blocs.
• Colorzilla place une pipette dans le coin inférieur gauche de la fenêtre du navigateur. Un clic sur cette pipette puis un clic sur une zone de la page affichée indique le code couleur de cette zone. On accède également par cette icône à une palette de couleurs.

Un éditeur de texte mettant en valeur par des couleurs différentes la syntaxe est d'un confort appréciable. Je vous recommande en particulier SubEthaEdit pour Macintosh et Scintilla pour Windows ou Linux.

Important : les commentaires de ce blog sont ouverts mais ne sont pas destinés à devenir un forum de support bis pour la personnalisation ou l'utilisation de DotClear. Ils ne visent qu'à recevoir vos propositions d'amélioration ou de complément dans la rédaction des articles ou des demandes d'éclaircissement sur tel ou tel point du tutoriel ainsi que vos critiques acerbes ou laudatives. Merci de vous rendre sur le forum pour toute autre question.

Kozlika

Première étape, l'installation, suivie du choix du placement du menu à gauche ou à droite et du type de comportement de la page (fixe ou fluide ?). Enfin il sera temps d'activer votre thème.

Cet article comprend trois parties :

• Installer le kit
• Choisir la structure
• Activer le thème

Installer le kit

Procédure

La première étape consiste bien entendu à installer le thème dans son blog. Pour cela vous devrez suivre les instructions usuelles données sur le wiki.

Liens d'installation :

• Installeur
• Archive

Contenu du kit

A l'aide de votre client ftp favori, rendez-vous dans le répertoire /themes/kit/ Si tout c'est bien passé vous devriez voir le contenu suivant dans ce répertoire :

• desc.xml : la carte d'identité du thème
• images : le répertoire contenant les images utilisées par le thème :
  • bas-sidebar.png : l'arabesque figurant au pied du menu latéral
  • comments.png : « l'escargot » figurant en tête de la zone des trackbacks et commentaires
  • deco-top-a.png : l'image s'affichant au survol de l'entête
  • deco-top : l'image s'affichant dans l'entête
  • icopost.png : l'imagette placée à gauche de chaque titre de billet
• style.css : la feuille de style du thème
• zegoodies, un répertoire comprennant des fichiers supplémentaires pour une utilisation éventuelle :
  • CSS-alternatives
    • fluide-D_style.css : css avec sidebar à droite
    • fluide-G_style.css : css avec sidebar à gauche
    • okazou.css : styles supplémentaires à copier dans sa feuille de style si besoin
  • images : toutes les images des exemples du présent guide
  • billet-test.txt : un billet en wiki utilisant de nombreuses balises à copier coller dans son blog.

Choisir la structure

Par défaut, le thème Kit s'installe avec la structure fluide (la largeur de la page s'adapte à la largeur de l'écran), et le sidebar (menu latéral) à droite.

Sidebar à gauche ou à droite ?

Vous pouvez choisir de placer le sidebar à gauche en remplaçant l'actuel fichier style.css par la copie du fichier fluide-G_style.css placé dans le répertoire kit/zegoodies/. Important : n'oubliez pas de renommer cette copie en style.css.

Fixe ou fluide ?

Après avoir choisi la position du menu, si vous souhaitez une page de taille fixe pour votre blog, cherchez les lignes :

#page {
       width : 90%;

et remplacez-les par :

#page {
      width : 740px;

Activer le thème

Dans l'onglet Outils, lien Gestionnaire de thèmes, choisir le thème Kit pour l'affichage de votre blog. Si tout s'est bien passé vous pouvez passer à l'étape suivante : la personnalisation.

Par défaut, le thème Kit s'installe avec la structure fluide (la largeur de la page s'adapte à la largeur de l'écran), et le sidebar (menu latéral) à droite.

Vous pouvez choisir de placer le sidebar à gauche en remplaçant l'actuel fichier style.css par la copie du fichier fluide-G_style.css placé dans le répertoire kit/zegoodies/. Important : n'oubliez pas de renommer cette copie en style.css.

Note : Bien que cette étape soit décrite dans l'article Installation, je la recopie ici pour lui accorder une meilleure visibilité puisque j'ai pu constater que nombre d'utilisateurs ont zappé ledit billet... (bouh !)

Un article en trois parties pour modifier à vos souhaits la largeur qu'occupe la page dans la fenêtre du navigateur et quelques recommandations si vous souhaitez apporter des modifications sur les largeurs des blocs intérieurs.

Lire la suite

Sauf si vous avez choisi une largeur fluide à 100% pour l'affichage du blog, un fond apparaît sur les côtés. On peut habiller ce fond avec une couleur uniforme, un motif répétitif ou, pouquoi pas, une couleur à gauche et une autre à droite.

Lire la suite

Voici deux sortes de personnalisations possibles pour le fond de page : en modifier la couleur (attention à rester lisible !) ou ajouter une bordure décorative.

Lire la suite

Comme pour le fond de fenêtre ou le fond de page, le fond du sidebar (menu latéral) peut être personnalisé à votre gré. Mais attention ! le sidebar est une boite et non une colonne, il faudra donc avoir recours à une mise en place un peu différente.

Lire la suite

Un logo, une image comportant le titre ou un simple fond de couleur, mais toujours cliquables pour un retour à l'accueil, toutes les solutions proposées ici ne réclament de changements que dans la feuille de style et restent lisibles en cas de désactivation des images et accessibles au navigateurs oraux. La preuve en code et en capture d'écran.

Lire la suite

Pour travailler sur les mises en forme du texte un billet test utilisant les principales balises html courantes c'est bien pratique. Le voici ci-dessous pour que vous puissiez observer les mises en forme du thème et avec un lien de téléchargement pour que vous puissiez le copier chez vous (syntaxe wiki).

Lire la suite

Changer la famille et/ou la couleur des caractères, pour tout le blog ou une partie seulement.

Lire la suite

Si vous avez le rouge en horreur, ça doit pouvoir s'arranger. En changeant systématiquement le rouge par une autre couleur ou en variant avec plusieurs couleurs.

Lire la suite

Très peu d'images sont utilisées ici. Vous pouvez les modifier et en ajouter d'autre pour décorer votre intérieur bloguesque.

Lire la suite

Par défaut le thème Kit ne prévoit pas de mise en forme spéciale des listes. Ce sont donc les puces pleines et les puces vides habituelles qui seront utilisées par le navigateur. Ou vos propres petites images.

Lire la suite

A titre d'exemple de personnalisation de la présentation des trackbacks et commentaires, le code nécessaire à leur affichage sous forme d'encadrés.

Lire la suite

Comme dans les billets, on peut personnaliser les listes du sidebar. Ici une méthode pour ajouter de petites flèches à la gauche de chaque item avec un effet au survol.

Lire la suite

Sur le même principe que les bannières-titre du blog on peut mettre des images pour les titres des rubriques du sidebar et masquer les "titres textes" sans les supprimer.

Lire la suite

Si vous personnalisez votre thème Kit, je vous propose de signaler votre blog ici. J'en ferai une capture d'écran et l'ajouterai à la mosaïque des utilisateurs si votre adaptation n'utilise de modifications de présentation que via CSS.