Les ateliers du klafoutis - Tag - thèmes

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.

Malaclemys : au boulot les gens !

Kozlika — Wed, 31 Oct 2007 14:39:00 +0100

Selon une tradition que j'ai inventée moi même et que vous êtes priés de respecter, je mets en phase de test un nouveau thème à livrer dans les galeries de dotaddict.

Merci de tester sur vos navigateurs et de me faire part de vos remarques z'et suggestions.

Hop là : afficher Malaclemys !

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.

Welsh 2.0, 2 colonnes

Marcel Biou — Wed, 29 Aug 2007 07:53:00 +0200

Variation pour deux colonnes du thème Welsh 2.0

A la demande de l'ami Biou pour son blog et d'autres auparavant, j'ai terminé la variation pour deux colonnes du thème Welsh 2.0.

Il est livré dans le même emballage que Welsh 2.0 en trois colonnes. Pour utiliser la version en deux colonnes, créer un répertoire nommé 3cols-files dans le répertoire du thème Welsh et y placer les fichiers :

layout.css
screenshot.jpg
style.css

Puis déplacer les trois fichiers contenus dans le répertoire 2cols-files à la place de ceux que vous venez de retirer.

(Pour ne pas nous éparpiller, merci de n'utiliser les commentaires du présent billet que pour les questions spécifiques à cette variation et de poser vos questions générales sur ce thème dans le billet de Welsh 2.0.)

Ouverture d'une liste d'informations et d'entraide

Kozlika — Sun, 03 Jun 2007 12:52:00 +0000

Je viens de créer une liste de discussion à l'usage des utilisateurs de mes thèmes. Cette liste est destinée à recevoir les informations de mise à jour ou de création nouvelles et à en assurer le support et l'entraide.

Pour s'inscrire, envoyez simplement un mail vide à dckozthemes-request (@) ml.free.fr en indiquant simplement dans le sujet subscribe.

Je débute dans la gestion de ce type d'outil alors ne vous fâchez pas si je fais des bêtises ou s'il y a des dysfonctionnements. Vous pouvez signaler les soucis éventuels d'inscription ou désinscription dans les commentaires de ce billet.

Welsh 2.0

Kozlika — Sun, 08 Apr 2007 09:32:00 +0000

Welsh 2.0 (private joke) est un thème trois colonnes fluides avec onglets.

Pour personnaliser les onglets, éditez le fichier _top.html. Je ne mets pas ce thème en version 1.0 : il reste en beta jusqu'à ce que je trouve – ou que l'un de vous m'indique – un moyen simple et élégant d'alimenter automatiquement le menu horizontal (par exemple avec le premier lien pour l'accueil et les suivants pour les pages connexes choisies), avec le marqueur de la page active.

En attendant vous pouvez ici ou via mon formulaire de contact me demander de l'aide pour la personnalisation de votre menu.

Amusez-vous bien :)

Edit du 29 août. Mise à jour en 0.6 du thème : un répertoire 2-cols-files offre désormais les fichiers alternatifs pour une variation de ce thème en deux colonnes. Détails et mise en œuvre dans le billet y consacré.

Démonstration et téléchargement sur Dotaddict.

Aorakits en thèmes paramétrables

Kozlika — Tue, 30 Jan 2007 16:54:00 +0100

Dans le billet consacré aux structures prêtes à l'emploi pour Dotclear 2.0, j'ai ajouté au téléchargement de la feuille de style la possibilité de télécharger sous forme de thème en « prêt à personnaliser » chacune de ces structures.

Installez-le en le décompressant dans le répertoire /themes de votre blog.

Vous y trouverez le fichier layout.css correspondant à la structure choisie, le fichier style.css comportant l'import de ce layout et toutes les balises courantes d'un thème pour Dotclear 2.0, le fichier _define.php à modifier pour y placer le nom que vous aurez donné à votre nouveau thème et votre signature.

Le fichier config.php et le répertoire /locales ont été mis en place pour que vous puissiez éditer la feuille de style directement depuis le Tableau de bord -> Paramètres des thèmes -> Sélection de l'Aorakit choisi -> Onglet Paramètres du thème.

N'hésitez pas à me signaler d'éventuelles erreurs : j'ai procédé un peu « à la chaîne » pour les préparer, j'ai pu faire quelques bourdes au passage (je me connais ;)) !

Enjoy !

Edit : voir désormais la page des Aorakits.

A l'attention des Gandiblogueurs

Marcel Biou — Tue, 23 Jan 2007 19:10:00 +0100

Je me doute qu'il est plus facile pour vous d'afficher la feuille de style d'un thème qui vous plaît et de la copier dans votre custom.css. Sur le principe ça ne me dérange pas, les thèmes sont en GPL.

Par contre, merci de ne pas linker les images associées directement depuis ici, tant pour vous que pour moi :

Pour vous : rien ne vous met à l'abri d'un déménagement de ce blog ou du renommage d'une image, auquel cas vous seriez bien embêté
Pour moi, si vous êtes quelques centaines à faire ça, bonjour la bande passante.

Alors :

On télécharge le thème sur son disque dur.
On copie la css dans le custom.css.
On copie le répertoire des images dans son propre gestionnaire d'images.
On indique les urls des images du thème depuis chez soi et pas chez moi.

Merci pour moi, merci pour vous !

Créer un nuage de tags

Kozlika — Sat, 20 Jan 2007 19:17:00 +0100

La présentation la plus prisée des tags est sans conteste ce qu'on appelle le "nuage". Les tags sont les uns à la suite des autres et la taille de leurs caractères varie en fonction de la fréquence d'utilisation du tag. Vous en voulez ? Voyons comment faire.

Où ?

On retrouve les tags en trois endroits : dans le menu du blog, dans la page les regroupant tous et dans les informations du billet. Nous ne parlerons pas ici des tags mentionnés dans les informations du billet car leur présentation en nuage demanderait des modifications dans les fichiers html. D'autant que sauf maquette particulière cela risquerait d'être particulièrement inesthétique !

Quoi ?

Dans le menu comme dans la page de tous les tags :

un lien est posé sur chaque tag conduisant vers la liste des billets dotés de ce tag ;
tous les tags sont dans une liste ;
chaque tag est un item de cette liste.

Structure de la liste dans le menu

<div class="tags">
   <h2>Tags</h2>
   <ul>
       <li><a href="lien_vers_page_correspondante" class="tag20">nom du tag A</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag10">nom du tag B</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag90">nom du tag C</a></li>
   </ul>
</div>

Structure de la liste dans la page de tous les tags

<div class="content-inner">
   <ul class="tags">
       <li><a href="lien_vers_page_correspondante" class="tag50">nom du tag A</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag10">nom du tag B</a></li>
       <li><a href="lien_vers_page_correspondante" class="tag20">nom du tag C</a></li>
   </ul>
</div>

Comment ?

Pitite parenthèse : Vous aurez noté (je l'espère !) deux choses : la class posée sur la div englobant la liste des tags dans le menu et celle posée sur la liste des tags regroupés dans la page est la même : class="tags". A une petite nuance près (et zioup on en profite pour une petite leçon de css au passage...) :

* dans le sidebar, la liste est à l'intérieur d'un bloc de class tags
* dans la page des tags, la liste est elle-même de class tags

Autrement dit, dans le sidebar le marqueur sera .tags ul { } tandis que dans la page le marqueur sera ul.tags { }}}

Cette parenthèse refermée, on voit bien qu'en donnant des règles à .tags elles seront communes à ces deux listes. De la même manière les class marquant la fréquence du tag (onze niveaux : class="tag0", class="tag10", class="tag20", class="tag30", class="tag40", class="tag50", class="tag60", class="tag70", class="tag80", class="tag90", class="tag100") sont communes aux deux listes.

Si vous voulez donner un style différent aux deux listes, précisez le marqueur avec son parent, par exemple pour le menu utilisez #sidebar .tags et/ou pour la page des tags le marqueur .dc-tags .tags

Oui, bon, tu la craches ta valda ?

Voué, mais c'est mieux si on explique avant et que vous comprenez suffisamment pour adapter à vos besoins.

Sur la page des tags on voudrait bien que la taille de base soit plus importante :

.dc-tags ul.tags { font-size : 1.5em; }

On enlève les puces sur la liste des tags de la page tags :

.dc-tags ul.tags { list-style-type : none; }

On enlève les puces sur la liste des tags du menu :

.sidebar .tags ul { list-style-type : none; }

Ces deux règles peuvent être regroupées :

.dc-tags ul.tags, .sidebar .tags ul { list-style-type : none; }

On part de zéro pour les marges intérieures et extérieures des listes et des items qui les composent :

.dc-tags ul.tags, .sidebar .tags ul, .dc-tags ul.tags li , .sidebar .tags ul  li { margin:0; padding:0; }

On supprime le retour à la ligne pour chaque item :

.dc-tags ul.tags li, .sidebar .tags ul li { display : inline; }

On varie la hauteur des caractères en fonction de la fréquence :

.tag0 { font-size: 85%; }
.tag10 { font-size: 90%; }
.tag20 { font-size: 95%; }
.tag30 { font-size: 100%; }
.tag40 { font-size: 105%; }
.tag50 { font-size: 110%; }
.tag60 { font-size: 115%; }
.tag70 { font-size: 120%; }
.tag80 { font-size: 125%; }
.tag90 { font-size: 130%; }
.tag100 { font-size: 135%; }

Dans le menu (et uniquement lui) on voudrait bien placer une icône à gauche de chaque tag (l'image sera placée dans le rep images du thème et je la nomme ici tag.png).

#sidebar .tags ul li a { padding-left:16px; background: transparent url(images/tag.png) no-repeat; }

Ah zut ! l'item suivant vient se coller à l'item précédent, réservons une marge à droite de chaque lien :

.tags ul li a, ul.tags li a { padding-right : 12px; }

Servez-vous ci-dessus des ingrédients qui vous plaisent ou mettez tout ça ensemble :

 .dc-tags ul.tags { 
       font-size : 1.5em; 
       }
 .dc-tags ul.tags, .sidebar .tags ul { 
       list-style-type : none;
       margin : 0;
       padding : 0;
       }
 .dc-tags ul.tags li , .sidebar .tags ul  li { 
       margin:0; 
       padding:0;
       display : inline; 
       }
 .tag0 { font-size: 85%; }
 .tag10 { font-size: 90%; }
 .tag20 { font-size: 95%; }
 .tag30 { font-size: 100%; }
 .tag40 { font-size: 105%; }
 .tag50 { font-size: 110%; }
 .tag60 { font-size: 115%; }
 .tag70 { font-size: 120%; }
 .tag80 { font-size: 125%; }
 .tag90 { font-size: 130%; }
 .tag100 { font-size: 135%; }

 .tags ul li a, ul.tags li a { padding-right : 12px; }
 #sidebar .tags ul li a { padding-left:16px; background: transparent url(images/tag.png) no-repeat; }

Pfiou, ayé terminé ! Enfin... pour moi, parce que vous il vous reste à l'adapter à ce que vous aimez !

Mise à jour de tous les thèmes

Marcel Biou — Wed, 17 Jan 2007 16:50:00 +0100

Tous mes thèmes ont été mis à jour pour être compatibles avec la beta 5 de Dotclear. J'en ai profité pour remanier sur plusieurs d'entre eux la présentation des citations en ligne pour lesquelles j'avais souvent fait la boulette d'y apposer des marges et des bordures comme pour les citations en bloc.

Mais l'essentiel de cette mise à jour a consisté à modifier les marqueurs des boites intérieures de #blognav et #blogextra.