Un nouveau thème pour Dotclear, plutôt destiné aux diaristes je pense. Il est bien entendu adaptable sur toutes les tailles d’écran et également en fonction des préférences système de vos visiteuses et visiteurs pour alterner les modes clair/sombre selon l’heure.
L’image en exergue est le tableau « La Chambre bleue », de Suzanne Valadon, qu’elle a peint en 1923. À son sujet, vous pouvez lire par exemple cet article de Phalène ou le dossier ressources que le Centre Pompidou lui a consacré.
J’aime aussi beaucoup l’affiche que Solidaires en a faite.
Voici une petite galerie du thème avec différentes images et différents réglages. Les deux premières sont les captures du thème tel qu’il est sans personnalisations.
Configuration (optionnelle)
Le thème est utilisable tel quel ou personnalisable via son configurateur, qui permet :
- De changer l’image mise en valeur dans la bannière.
- De modifier le texte qui se situe dans le cartouche sous cette image, avec lien possible, ou de laisser le cartouche vide.
- De choisir une autre couleur d’accompagnement pour le mode clair et/ou le mode sombre.
Si vous n’utilisez pas l’une des couleurs prédéfinies proposées dans le configurateur, faites attention à ce que le contraste résultant de ce choix soit suffisant pour ne pas gêner la lecture. Un lien vers un outil de vérification figure dans les notes au bas de cet article.
À savoir
Sidebar
Les widgets sont tous situés en bas des pages. Ceux rangés dans « Volet de navigation » et « Volet d’extra » sont affichés en boîtes encadrées, ceux placés dans « Volet supplémentaire » sont intégrés au footer. Sur mobile ces blocs sont repliés.
Menu simple
Si le nombre des éléments du « Menu simple » (partie droite de la bannière) est supérieur à quatre, seuls les trois premiers s’affichent, une flèche permet de dérouler la suite.
Pour le voir en action si ça n’est pas celui qui s’affiche chez vous cliquez ici ou choisissez-le via le menu Changer le thème. Il sera également sur le blog de démo de Dotclear incessamment sous peu, dès que je l’aurai déposé (dans les tout prochains jours).
Notes et crédits
- Le style appliqué aux boîtes de bas de page lorsqu’elles sont repliées est inspiré de ce tutoriel de Geoff Graham sur CSS-tricks.
- La taille des titres varie en fonction de la largeur d’écran. Je me suis servie de cet outil pour les formules magiques.
- Les icônes ont été puisées sur icones.js et sur CSS-shape.
- Les valeurs de contraste ont été vérifiées grâce à Contrast Finder, un outiil qui permet non seulement la vérification mais aussi des suggestions si le contraste est insuffisant.
- Les petits coins des encadrés, en pur CSS, sont dérivés de ce code pen.