Les ateliers du klafoutis - Thèmes pour Dotclear 1

Sauterelle

Kozlika — Wed, 07 Nov 2007 14:03:00 +0000

Sauterelle est un thème plus particulièrement destiné aux diaristes : l'accueil affiche les billets jour par jour et la navigation est plus centrée sur la chronologie que sur les catégories.

Pour laisser toute la place aux billets, l'habituel menu est déporté sur une page annexe (incluse dans le thème) accessible depuis l'item « Centre d'aiguillage ». On le modifie en éditant le fichier plan.php.

Trucs kifonjoli et trucs pratiques :

Le lien de retour à l'accueil (quand on n'est pas à l'accueil, sinon rien) porte la date du billet le plus récent.
Le cartouche sous la sauterelle contextualise la page affichée.
Lorsque plusieurs billets ont été écrits le même jour, un cartouche en bas d'un billet indique les autres de la même date.
Le calendrier des billets est en forme de "ruban" à plat.
Le centre d'aiguillage contient les éléments habituels du sidebar, sauf la recherche et la syndication qui sont en pied de toutes les pages. La division en deux boites permet de séparer les liens internes et externes.

Pour les personnalisations :
- l'image du top est indépendante de la bannière elle-même, suffit de mettre l'image de son choix aux mêmes dimensions (225 * 170px) à la place dans le rep des images du thème.
- les couleurs s(er)ont listées en haut de la css pour faciliter le chercher/remplacer (en cours, gépofini)

Liens de téléchargement sur themes.dotaddict.org.

Kit 1for2

Kozlika — Sat, 15 Sep 2007 14:16:00 +0000

Pour ceux qui turbinent sous Dotclear 1 et que les thèmes pour Dotclear 2 font rêver.

Voici un kit pour pouvoir utiliser un thème prévu à l'origine pour Dotclear 2 sur votre blog turbinant sous Dotclear 1. Les fichiers *.php ont été modifiés afin de pouvoir retrouver la correspondance des règles d'une feuille de style DC2.

Vous pouvez en voir la démonstration avec le thème par défaut de Dotclear 2 appliqué sur ce blog. J'ai strictement suivi la procédure ci-dessous décrite sans aucune autre intervention.

Je développerai plus bas pour les amateurs de détails les modifs intervenues, mais passons tout de suite à la procédure pour l'utilisation de ce thème.

Procédure

Téléchargez sur votre disque dur l'archive du kit 1for2. Décompressez-la.
Téléchargez sur votre disque dur l'archive du thème DC2 que vous souhaitez adapter pour votre blog^[1]. Décompressez-la.
Transférez une copie du fichier style.css (et layout.css s'il existe) de themedc2 dans kit1for2.
Transférez une copie du répertoire des images de themedc2 vers kit1for2.
Envoyez votre répertoire kit1for2 ainsi modifié dans le répertoire themes de votre installation.
Rendez-vous dans votre interface d'administration, onglet Outils, lien Gestionnaire de thèmes et activez le thème kit1for2.

C'est tout.

Compléments

Il vous faudra ensuite éventuellement ajouter quelques règles (par exemple pour le style du calendrier) afin de peaufiner votre thème. Vous pouvez supprimer les règles inutiles pour un blog Dotclear 1 mais ça n'est pas gênant qu'elles y restent, ça alourdit inutilement le fichier style.css de quelques octets mais ça n'est pas bien grave.

Avertissement

Seuls les thèmes DC2 100% CSS pourront ainsi être facilement « convertis ». Je n'assure aucun support pour modifier les fichiers php de 1for2 en vue d'un portage de thèmes dc2 dont les fichiers html ont été personnalisés. Sachez toutefois que même si les fichiers *.html ont été modifiés ça ne veut pas dire que la procédure décrite plus haut ne suffira pas. Vous pouvez donc toujours essayer :)

Détails

Changements effectués sur les fichiers par rapport à ceux du thème par défaut de Dotclear 1.2.7 :

Ajout d'une class en fonction du contexte sur le body (dc-home, dc-category, dc-post, dc-search, dc-archive-month, dc-archive-day – dc-else pour les autres).
Ajout d'une div "wrapper" englobant "main" et "sidebar".
Ajout d'une class "feed" sur tous les liens de flux de syndication.
Réordonnancement des blocs Commentaires / Formulaire des commentaires / Trackbacks / URL de trackback / Abonnement aux commentaires d'un billet et leur encapsulage dans des blocs spécifiques en conformité avec l'organisation de ces blocs dans les thèmes pour Dotclear 2.
Placement des commentaires et des trackbacks dans des listes de définition.
Affichage conditionnel des commentaires et des trackbacks en fonction de leur ouverture.
Subdivision du sidebar en deux div blognav et blogextra.
Ajout d'une class pour chaque élément du sidebar pour conformité avec les thèmes Dotclear 2 et les nommages des widgets.
Ajout d'un bloc "topnav" dans la partie "blognav" avec lien de retour à l'accueil.
Remplacement de la structure <p id="footer"></p> par <div id="footer"><p></p></div>

Je suis toute ouïe pour les améliorations à apporter à ce kit, de préférence en s'inscrivant à ma ml de support^[2] ou éventuellement ici.

Notes

[1] Que j'appelerai par la suite themedc2.

[2] Pour s'inscrire envoyer un mail à dckozthemes (@) ml.free.fr en inscrivant seulement subscribe dans le sujet.

Kit 1

Kozlika — Sun, 13 Nov 2005 07:41:00 +0000

Un thème de base, des structures, un blog dédié pour les personnalisations.

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.

Un guide de personnalisation livre quelques pistes pour aménager son blog sur la base de ce thème, accompagné d'exemples de codes et de captures d'écran.

Le thème est livré par défaut en version fluide avec sidebar à droite. Suivez les instructions de l'article Installation du blog associé pour permuter le sidebar à gauche et/ou fixer la largeur de la page. Les liens de téléchargement du thème de base et ses variations sont disponibles sur Dotaddict.

Hotel Room

Kozlika — Mon, 31 Oct 2005 07:21:00 +0000

Tonalités et image du fond inspirés du tableau Hôtel Room d'Edward Hopper.

Hotel Room est un thème élastique (la largeur s'adapte à celle de l'écran). L'idée m'en est venue après la lecture d'un billet chez Nonal, qui aime Hopper autant que moi. Pour le voir, on clique là, pour tester le rendu des balises xhtml/wiki vous pouvez afficher le billet de test.

Comme pour la plupart de mes autres thèmes, j'ai ajouté des classes utilisables lors de la saisie des billets : center pour centrer, right pour aligner le texte à droite, petites-cap pour les petites majuscules.

Si vous utilisez la syntaxe wiki, il suffit de passer le temps de cette mise en forme en syntaxe html comme dans l'exemple suivant :

///html
<p class="right">Zanzibar, le 23 janvier 1975.</p>
///

Téléchargement et démo sur Dotaddict.

Keldroledenom

Kozlika — Wed, 25 May 2005 10:08:00 +0000

Volontairement sobre, monochromatique dans la gamme des gris avec des illustrations de type planches naturalistes.

Un nouveau thème élastique à adapter à vos envies en remplaçant les images et/ou les couleurs. Petit guide à l'usage de la personnalisation...

Les images : vous pouvez les remplacer par des images de mêmes dimensions en glissant tout simplement vos nouveaux fichiers dans le répertoire images/, soit en ayant pris soin de les nommer exactement de la même façon, soit en modifiant le nom des images dans le fichier style.css du répertoire du thème.

Les couleurs utilisées sont toutes dans la gamme des blancs et gris. Là encore, vous pouvez repérer les couleurs et les modifier à votre guise par un chercher/remplacer sur ce même fichier style.css.

#f5f5f5 : couleur du fond de fenêtre et du fond des bouts de code
#fff : couleur du fond de page
#333 : couleur du texte
#666 : couleur des liens et des boutons de formulaire
#ddd : couleur des bordures diverses (titre du blog, cadre des images, etc)
#000 : couleur des titres des billets

Si la taille des caractères vous semble trop petite, remplacez x-small par small (attention : la largeur de la page en sera un peu augmentée).

A savoir

Outre les informations et aide à la personnalisations données dans le billet précédent, sachez que vous disposez de quatre classes supplémentaires à utiliser à votre gré dans vos billets ou dans votre template si vous y opérez des modifs :

class ="center" : pour centrer du texte
class="right" : pour aligner du texte à droite
class="petites-cap" pour des majuscules de taille réduite
class="petit" pour des caractères plus petits

Si vous utilisez la syntaxe wiki et que votre version de DotClear est la 1.2.1 ou supérieure, vous pouvez utiliser ces classes de la façon suivante :

Saisie du billet comme à l'habitude en wiki avec les balises auxquelles 
vous êtes habitués
///html
<p class="center">Bonjour &agrave; tous</p>
///
et reprise de la saisie en syntaxe wiki.

Enjoy, retours bienvenus. :)

Les liens d'installation et de téléchargement se trouvent dans le billet dédié de Dotaddict.

PDI Collector

Kozlika — Mon, 02 May 2005 17:31:00 +0000

Le thème du premier Petit Dotclear illustré, basé sur le thème par défaut de l'époque avec l'ajout d'une troisième colonne.

Un vrai-faux nouveau thème puisqu'il s'agit de l'ancien thème créé à l'usage du Petit DotClear illustré, réadapté à une utilisation plus courante et actualisé pour le rendre compatible avec la dernière version de DotClear 1.2.1.

En « home » un bloc de texte accueille vos visiteurs. On le modifie dans le fichier home.php. En pied de page, un autre bloc de texte, permanent celui-là, peut contenir un autre texte ; il se trouve dans le fichier template.php. En le déplaçant à la fin du fichier list.php vous pouvez l'utiliser pour la pagination par exemple. A vous de jouer !

Téléchargement et démo sur Dotaddict.

Kiwi Cassis

Kozlika — Sun, 17 Oct 2004 11:33:00 +0000

Par cette chaleur, vous prendrez bien un petit sorbet ?

Comme promis, un autre thème fluide en trois colonnes, qui doit tout à ce modèle de web producer : http://www.webproducer.at/flexible-....

Histoire de ne pas laisser l'été s'envoler, un thème à la gloire des sorbets... Kiwi Cassis peut retrouver une allure plus sobre en modifiant les couleurs ;-). Si vous ne savez comment opérer ces modifications c'est que vous n'avez pas encore appris par cœur Le Petit DotClear illustré, notamment l'article « Votre blog à vos couleurs », et ça c'est pas bien !

La largeur de la page s'ajuste à celle de la fenêtre du navigateur en conservant les marges indiquées dans la feuille de style (fichier style.sss) par la règle de #page :

#page {
	margin: 24px 36px;
	text-align:left;
	background:#fff;
}

24px est la valeur des marges haute et basse et 36px la valeur des marges gauche et droite. Ajustez-les comme bon vous semble en modifiant ces deux valeurs.

Fiche détaillée et liens de téléchargement sur Dotaddict.

Komtuveux du soir

Kozlika — Thu, 09 Sep 2004 14:45:00 +0200

Vous pouvez personnaliser ce thème avec l'image de votre choix de mêmes dimensions que celles-ci (500 pixels en largeur et 300 pixels de hauteur).

Komtuveux du jour et Komtuveux du soir, deux variations sur la même structure : tailles fixes, place pour une grande image. La personnalisation devrait être relativement facile d'accès aux débutants car le code est beaucoup commenté.

Fiche descriptive et liens de téléchargement sur Dotaddict.

Komtuveux du jour

Kozlika — Thu, 09 Sep 2004 14:30:00 +0000

Vous pouvez personnaliser ce thème avec l'image de votre choix de mêmes dimensions que celles-ci (500 pixels en largeur et 300 pixels de hauteur).

Fiche descriptive et liens de téléchargement sur Dotaddict.

Keepsake

Kozlika — Wed, 08 Sep 2004 13:44:00 +0000

Mon premier thème en trois colonnes.

Un thème en trois colonnes pour Dotclear 1. Le contenu de la colonne de gauche se modifie en éditant le fichier extra.txt situé dans le répertoire du thème. Ce fichier interprète la syntaxe wiki.

Ce thème embarque tout le nécessaire pour afficher la barre d'enrichissement typographique pour les commentaires (aka wikibar). Pour sa mise en œuvre, il vous suffit d'indiquer dans la configuration du blog que vous acceptez les commentaires en syntaxe wiki.

Edit 25/12/2007. Les couleurs de ce thème respectaient celles du thème par défaut de l'époque. Je dois avouer aujourd'hui que s'il me semblait opportun de faire ainsi, je n'aime ni ces couleurs ni les layouts en trois colonnes menu-centre-menu. Mais force m'est de constater que ce thème remporta un très grand succès :-D

Fiche détaillée et liens de téléchargement sur Dotaddict.

Kimogeek

Kozlika — Sun, 05 Sep 2004 23:26:00 +0200

Variation basée sur le thème Kimono, Kimogeek est... geek :)

Comme son grand frère Kimono, Kimogeek, est un thème élastique c'est-à-dire que toutes les mesures sont proportionnelles à la taille des caractères utilisés par votre visiteur. Il ne faut pas confondre élastique avec fluide, qui signifie que les tailles des éléments varient en fonction de la taille de la fenêtre du navigateur.

Fiche descriptive et liens de téléchargement sur Dotaddict.

Kimono

Kozlika — Sun, 05 Sep 2004 18:38:00 +0000

Mon premier thème pour Dotclear.

Kimono et sa variation, Kimogeek, sont des thèmes élastiques c'est-à-dire que toutes les mesures sont proportionnelles à la taille des caractères utilisés par votre visiteur. Il ne faut pas confondre élastique avec fluide, qui signifie que les tailles des éléments varient en fonction de la taille de la fenêtre du navigateur.

Si vous rencontrez le moindre dysfonctionnement, merci de me le faire savoir ici.

Ce thème a été amélioré grâce notamment à l'aide de ST et de Julien qui m'ont aidée pour le traitement des images.

Fiche descriptive et liens de téléchargement sur Dotaddict.