Pour l’instant il n’y pas grand chose de visible, côté public ou côté privé — j’entends par là l’administration du blog, plus spécialement la gestion de l’apparence d’icelui — à part un commentaire dans le code source généré, j’y reviens après, ainsi qu’un début de formulaire de configuration.
La configuration du thème
Dotclear, lorsqu’on choisit d’utiliser un thème, vérifie si celui-ci comporte un fichier _config.php
. Dans le cas où ce fichier est présent un nouveau bouton est proposé qui permet de spécifier et d’enregistrer les réglages et la configuration du thème :
C’est sur ce formulaire que nous ajouterons les différents réglages que nous prévoyons d’offrir pour personnaliser le thème. Côté PHP, et comme je le précisais dans mon précédent billet, guère de nouveautés :
<?php # -- BEGIN LICENSE BLOCK --------------------------------------- # # This file is part of Dotclear 2. # # Copyright (c) 2003-2011 Olivier Meunier & Association Dotclear # Licensed under the GPL version 2.0 license. # See LICENSE file or # http://www.gnu.org/licenses/old-licenses/gpl-2.0.html # # -- END LICENSE BLOCK ----------------------------------------- if (!defined('DC_CONTEXT_ADMIN')) { return; } echo '<p class="area">Ici, bientôt, la configuration du thème Ductile.</p>'; ?>
Nous y reviendrons plus tard si tu le veux bien.
La mise en place des styles additionnels côté public
Pour que les réglages enregistrés par l’utilisateur soient utilisés au moment de l’affichage du blog qui utilise ce thème il est nécessaire de fournir a minima un fichier _public.php
— j’en ai également parlé précédemment —, et qui contient pour l’instant ceci :
<?php # -- BEGIN LICENSE BLOCK --------------------------------------- # # This file is part of Dotclear 2. # # Copyright (c) 2003-2011 Olivier Meunier & Association Dotclear # Licensed under the GPL version 2.0 license. # See LICENSE file or # http://www.gnu.org/licenses/old-licenses/gpl-2.0.html # # -- END LICENSE BLOCK ----------------------------------------- if (!defined('DC_RC_PATH')) { return; } $core->addBehavior('publicHeadContent',array('tplDuctileTheme','publicHeadContent')); class tplDuctileTheme { public static function publicHeadContent($core) { echo '<style type="text/css">'."\n".'/* Additionnal style directives */'."\n</style>\n"; } } ?>
Comme tu peux t’en douter à la lecture de ce code, il ne fait pas grand chose de plus que de fournir du contenu à ajouter juste avant la fermeture de la balise HTML <head>
.
Lorsqu’on consulte le code source fourni au navigateur on retrouve celui-ci :
Il est presque l’heure d’aller photographier quelques bateaux, car mon stock se réduit dangereusement ces jours derniers et j’ai peur qu’on vienne à en manquer. Mais avant cela je crois que tu avais quelques questions en suspens à propos :
- des « stickers »
- du menu de premier niveau personnalisable
- du pliage et dépliage des éléments du sidebar
Les « stickers »
La solution que tu as proposée est tout à fait envisageable à condition de développer une balise template qui prendra en charge, à partir des choix effectués par l’utilisateur, la génération du code HTML correspondant.
Menu de premier niveau personnalisable
Je crois en effet qu’il est sage d’attendre un peu le développement de l’éventuelle intégration d’un menu dans le cœur de Dotclear. Cela dit il est tout à fait possible de prévoir en attendant une gestion simplifiée qui permette au moins de préciser le libellé et l’URL pour chacun des éléments de menu. Il faudra songer au passage au positionnement idoine de l’option choisie en fonction de l’URL courante sur le blog. Rien de bien compliqué, c’est un sujet qui a déjà été abordé dans au moins deux plugins de ma connaissance.
Pliage et dépliage des éléments du sidebar
Si j’ai bien compris, il faut assurer le pliage initial de tous les éléments sur les petits affichages et le dépliage de tous les éléments au delà. Pour les grands affichages ça veut donc dire qu’il suffit de ne rien prévoir du tout. Par contre, sur les petits affichages, il faudra penser à ajouter une classe à ces éléments pour que le code javascript puisse les reconnaître et les plier initialement et d’assurer l’effet accordéon (l’ouverture d’un des éléments provoquant la fermeture de tous les autres).
Pour résumer, si l’affichage est inférieur au seuil prévu pour les grands écrans, il faut penser à ajouter une classe particulière aux éléments du sidebar.
Ma chère Kozlika je te laisse ici et vais derechef manger de ce délicieux clafoutis qui m’attend en bas puis attraper mon appareil et filer au port…
4 réactions
1 De mirovinben - 07/06/2011, 18:02
Une question brûle le bout de mes deux doigts (ceux qui frappent sur les touches du clavier) : qu’entendez-vous par “stickers” ?
La lecture du billet d’avant (clafoutis) ne m’ayant pas totalement expliqué le truc.
2 De Kozlika - 08/06/2011, 10:35
Il s’agit, mirovinben, des (un, deux ou trois) petits “marque-page” placés tout en haut sur la maquette http://ductile.dotaddict.org/post/2… (que je vais tout à l’heure placer dans une page pour qu’on y accède plus facilement).
3 De Kozlika - 09/06/2011, 14:25
Je viens de tout relire et je crois que j’ai tout compris \o/
Une question : pourquoi est-ce ce système prévoit une écriture des règles CSS directement dans le head et pas par exemple l’appel d’un fichier mycss.css qui comporterait toutes les règles additionnelles ?
Sinon, si tu es d’accord, je vais publier l’ensemble des règles CSS que je peux mettre en place sans modifier les fichiers HTML dans l’après-midi. On aura donc un thème s’appuyant sur la structure par défaut et utilisable tel quel pour ceux qui voudraient s’en tenir là.
Les étapes suivantes concerneront donc la personnalisation de la structure et sa mise en forme, à travers tes tutos et les miens.
Qu’en dis-tu ?
4 De Franck - 09/06/2011, 17:26
Pourquoi directement dans le <head> ? Simplement parce que ça évite de devoir gérer un fichier physiquement écrit quelque part (et où ?). Par contre je ne sais pas si ça a un impact question performance.
Ok pour moi pour le ”full CSS” dans un premier temps. On peut même commencer à imaginer quelques réglages pour cette étape-ci. Je pense entre autres à la couleur des liens, les choix de police, etc.
Mon prochain billet sera alors consacré à la mise en place de ces réglages.