Bien chère Kozlika,

Je n’ai malheureusement pas eu beaucoup d’occasions de photographier des bateaux alors je me suis rattrapé avec les coccinelles sur les rochers. Tu verras elles iront très bien dans les billets à venir, j’en suis sûr. En attendant j’ai lu avec soin ton dernier message et me suis beaucoup amusé à consulter le blog sur des écrans de tailles diverses et variées. La version pour petit écran, utilisée sur les smartphones, rend la lecture beaucoup plus aisée qu’auparavant.

Pendant que tu jouais avec les mediaqueries je me suis amusé à mettre en place un premier réglage de couleur, simplement pour avoir une idée de la mécanique fournie par Dotclear.

J’ai choisi de mettre en place un petit formulaire qui propose le réglage de trois couleurs :

  • La couleur des liens de base, ce qui correspond à la règle CSS a {}.
  • La couleur des liens visités, ce qui correspond à la règle CSS a:visited {}.
  • La couleur des liens survolés, pour la règle CSS a:hover, a:focus, a:active {}.

Voilà à quoi ressemble le formulaire de réglage :

Formulaire de choix des couleurs de lien

Je suis persuadé que tu auras remarqué les pipettes qui accompagnent chacun des champs où l’utilisateur peut directement entrer une couleur au format hexadécimal #rrvvbb (avec rr, vv et bb prenant une valeur entre 00 et FF respectivement pour la composante rouge, verte et bleue, en allant du noir le plus profond #000000 au blanc le plus pur #ffffff).

Lorsqu’on clique sur une de ces pipettes un sélecteur de couleur tel que ci-dessous est affiché et permet de choisir de manière plus intuitive et plus visuelle une couleur qui sera ensuite convertie dans le format que j’explicite ci-avant. De plus, le fond du champ sera également coloré avec la couleur choisie.

Sélecteur de couleur

Voilà un choix que j’ai fait, tu sais que j’aime assez les camaïeux, pour les trois couleurs (#3f0a8a, #640a8a et #880a8a) :

Couleurs enregistrées pour les liens

Pour la petite histoire, une fois le choix fait pour la première couleur, je me suis contenté de faire glisser le curseur sur l’anneau extérieur du sélecteur pour obtenir une autre couleur en harmonie avec la précédente. Si tu prends garde aux valeurs tu verras que seule la première composante qui représente la quantité de rouge a été modifiée.

J’ai ensuite enregistré ces réglages, ce qui se traduit par un enregistrement d’un setting spécifique au blog, setting qui est ensuite récupéré au moment de l’affichage des pages publiques comme tu peux le constater sur la copie d’écran suivante :

Les couleurs choisies en situation

Si l’on est un peu curieux il suffit de consulter le code source de la page pour constater de visu les nouvelles règles additionnelles dans le code de la page, juste avant la balise </head> :

<style type="text/css">
/* Additionnal style directives */
a {
color:#3F0A8A;
}
a:visited {
color:#640A8A;
}
a:hover, a:focus, a:active {
color:#880A8A;
}
</style>

Il va falloir maintenant que j’étudie tes feuilles de style d’un peu plus près pour adapter ce que j’ai fait rapidement à ce que tu as réellement prévu. Je crois par exemple qu’il y a plusieurs couleurs de lien possible en fonction de l’élément concerné (titres et liens normaux par exemple). Nous pourrons si tu le souhaite établir une liste exhaustive des réglages CSS possibles, je pense entre autres à des choix de famille de police, de couleurs de texte mais aussi de fond, etc.

Quoi qu’il en soit la mécanique de gestion de la configuration est en place et fonctionnelle, il ne s’agit plus maintenant que de déterminer précisément ce qu’on veut y voir figurer. Attention toutefois, je n’ai parlé ici que de règles CSS qui viennent surcharger celles que tu as prévues. Il y a d’autres aspects qui seront également pris en charge par la configuration mais c’est un peu tôt pour en parler.

J’espère que tu t’amuseras bien avec cette première version assez ludique qui permet de personnaliser un peu le thème. Je t’imagine très bien choisir un rose soyeux pour les liens survolés par exemple !