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.

copie d'écran du thème en version de base, mode clair copie d'écran du thème en version de base, mode sombre copie d'écran du thème en version personnalisée, mode sombre une autre copie d'écran du thème en version personnalisée, mode sombre copie d'écran du thème en version personnalisée, mode clair une autre copie d'écran du thème en version personnalisée, mode sombre

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.

copie d'écran du configurateur

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.

copie d'écran du pied de page du thème en version de base, mode clair aperçu du thème sur mobile

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.