Et tout d’abord, puisque tu me lis, c’est que tu vois le thème tel qu’en sa version d’aujourd’hui. Pour qu’on puisse constater l’évolution d’un jour à l’autre, j’ai fait une petite capture d’écran du thème en son Jour 1.

Capture Ductile, Jour 1

Les CSS du jour

J’ai travaillé aujourd’hui sur l’entête du blog, j’ai caché les liens d’accès rapides et modifié un peu la présentation des titres du billet. En fait, pour causer CSS, je me suis appliquée à fixer les règles pour tout ce qui est dans #top et tout ce qui est dans .post. C’est ma façon habituelle de travailler : d’abord la page d’accueil, puis le contexte du billet seul et ensuite les autres pages.

Je te détaille ci-dessous les deux trucs vaguement tordus du jour.

Liens d’évitement

Tu noteras un élément dont je suis assez contente : les liens d’accès rapides (qu’on appelle aussi liens d’évitement : Aller au contenu, aller au menu, aller à la recherche) n’apparaissent qu’à la tabulation – ce qui correspond bien aux utilisateurs auxquels ils sont le plus utile. En téléchargeant le zip au pied de ce billet, tu pourras récupérer le code mis en place. Il est assez simple en fait : dans un premier temps je place ces liens là où je veux qu’ils apparaissent puis je les colorie en blanc, comme le fond de page :

#prelude {
	position: absolute;
	margin: 0;
	top: 0;
	left: 3px;
	color: #fff;
	}
#prelude a {
	color: #fff;
}

Puis, à l’aide de la pseudo-class focus (c’est-à-dire lorsque la tabulation arrive dessus) je leur donne une couleur qui se voit :

#prelude a:focus {
	color: #666;
}

Voilà. Rien de compliqué et ça satisfait tout le monde, ceux qui ne comprennent pas à quoi ça peut bien servir et ceux qui en ont vraiment besoin.

Le trait de séparation entre les billets

On pourrait croire que devant m’occuper de l’intégration je vais imaginer des trucs faisables vachement facilement. C’est ce que j’essaie de faire, mais pas toujours. Ces traits de séparation ne présentent pas non plus une difficulté majeure mais enfin, faire en sorte que le compteur des commentaires, trackbacks et pièces jointes viennent le chevaucher demande un petit tour de passe-passe. En voici les règles nécessaires :

D’abord je place la bordure :

.post {
	background: transparent url(img/filet.png) repeat-x left bottom;
	}

Et toute l’astuce est là en fait, en utilisant une image plutôt que la propriété border, je peux la placer légèrement au-dessus de la fin réelle de la boîte (en réalité mon image est constituée d’une bande de blanc surmontée d’un trait gris). Ainsi, les infos du billet (.post-info-co) vont empiéter sur ce filet.

Mais encore faut-il que ces infos possèdent un fond blanc, si je le laisse transparent le filet gris va être visible sous cette partie. Je ne peux pas non plus simplement attribuer un background: #fff; à cet élément car comme les éléments de ce type prennent toute la largeur disponible, le filet disparaîtrait complètement.

J’utilise donc la propriété display: inline; qui restreindra alors la largeur du paragraphe à son contenu et non à la place disponible. Ça donne ça, côté code :

.post-info-co {
	margin: 0;
	background: #fff;
	display: inline;
	font-size: 0.875em;
	font-style: italic;
	}

Magique, non ?

Les éléments à compléter

Pour la page d’accueil, si tu te souviens des maquettes, je n’ai pas fini : il y a mes petits stickers à coller là-haut, le menu de premier niveau sous le titre et la présentation du #sidebar (dans l’administration, le contenu du sidebar se détermine grâce aux widgets de présentation).

C’est que pour ces trois éléments je vais avoir besoin de toi :

  • comment va-t-on ajouter les « stickers » ?
  • comment inclure un menu de premier niveau personnalisable ?
  • comment faire en sorte que les éléments du sidebar puissent être pliés/dépliés ?

Ça va être à toi de jouer et de me dire quand tu souhaites le faire, je peux tout à fait continuer à styler le reste pour le moment. Quand ils seront en place, je leur appliquerai les styles qui vont bien.

Cahiers des charges

Voici comment j’imagine le détail des trois éléments sus-indiqués

Les stickers

J’y ai longuement réfléchi : selon la largeur de consultation il ne sera pas toujours opportun d’en placer plusieurs. Dans le cas du tout petit écran (320px) le mieux serait même qu’il n’y en ait aucun. La solution de les placer directement dans le #top ne me convient donc pas. Il faut que ceux qui n’apparaissent pas en haut apparaissent tout en bas.

Je verrais bien une liste s’ajoutant dans le #footer (pied de page) et que je placerai en position absolue lorsque je veux tout ou partie de ses éléments en haut. Cette liste doit donc être constituée d’éléments avec un id pour que je puisse les positionner (elle-même devra aussi posséder son id). Comme je voudrais aussi laisser le choix à l’utilisateur de n’en mettre aucun ou un seul, deux ou les trois et dans quel ordre, je verrais bien un fonctionnement dans le goût de ce que tu as fait pour les favoris dans l’admin de Dotclear. Les éléments quant à eux prendraient un id en fonction de leur ordre. Ça peut ?

Le menu de premier niveau

Je sais qu’il existe un plugin qui gère ça. Je ne souhaite pas avoir à demander à l’utilisateur d’installer tel ou tel plugin. Il faudrait donc soit prévoir le “remplissage” de ce menu dans le configurateur du thème, soit que l’équipe décide d’intégrer un tel menu dans la distribution de base. Ce sujet a déjà été évoqué, nous devrions peut-être attendre de savoir quelle décision sera prise et nous décider en fonction d’icelle ?

Plier / déplier

Si tu observes les maquettes que j’ai publiées l’autre jour, lorsqu’on navigue sur un tout petit écran j’aimerais que le sidebar n’affiche que les titres des widgets et qu’ils se déploient lors du clic. Il faut mettre du javascript donc, reste à savoir comment en combinant le javascript et les mediaqueries/css on peut faire en sorte que ceux-ci ne soient repliés que dans certains cas. Est-ce que je demande l’impossible ?

Je te laisse réfléchir et me répondre. Je te dois d’ailleurs quelques réponses moi aussi à la suite de tes billets précédents. C’est ce que je m’appliquerai à faire devant une assiette de langoustines et un verre de cidre, mais plus tard. Pour le moment le temps me presse : la Bretonnie m’attend !

Ta très sincère,
Kozlika

Version 0.2.1 à sortir demain (3 juin) pour correctifs :

  • placement d’une icône pour les pièces jointes
  • meilleure gestion des liens rapides sur petit écran
  • suppression de l’icône de catégorie dans le post-info en attendant que je modifie le html pour distinguer les liens
  • réduction de l’interlignage du .post-info-co pour quand il passe sur deux lignes (petits écrans)
  • rapprochement du .post-info sous le titre

5 juin : fait ! Nouvelle archive 0.2.1 à télécharger en pièce jointe.