Ductile blog

Très cher Franck,

Je sens que tu vas te moquer de moi, mais tu avais vu juste : je commence à m’éloigner quelque peu des premières maquettes au fur et à mesure que je mets en place les règles CSS « pour de vrai ». Aujourd’hui, tu pourras découvrir l’entête et le pied de page « définitifs » (sous réserve d’ajustements mineurs). J’ai aussi un tout petit peu modifié le comportement en fonction des mediaqueries.

Ce jour est aussi le premier où j’apporte des modifications aux fichiers HTML. Aujourd’hui top.html et footer.html

Rituellement, insérons ici pour mémoire une capture du thème dans son état avant aujourd’hui :

Et maintenant, si tu me lis depuis ton agrégateur, viens jeter un œil sur le blog… Tu as vu ? Un haut de page, ça change pas mal l’allure d’une page, non ? Il serait trop long de détailler toutes les modifications, n’hésite pas à me poser des questions si tu en as sur la façon de réaliser ceci ou cela. Je choisis aujourd’hui de m’attarder sur quelques points.

La boîte de recherche

Je me suis pas mal creusé la tête sur la façon dont j’allais pouvoir gérer ça uniquement avec les CSS. En effet, il s’agit là d’un thème distribué et non d’un thème sur mesure. Or je ne peux pas savoir si l’utilisateur voudra ou non insérer le widget de recherche et s’il l’insère je ne sais pas s’il le placera en premier ou non dans la zone bandeau de navigation. Telle que tu la vois, c’est la première boîte, mais tu penses bien que si l’utilisateur du thème devait la placer ailleurs, ça ferait bien moche !

Il fallait donc cibler cette boîte si et seulement si elle se trouvait tout en haut du « sidebar » et lui laisser la présentation normale au cas où elle soit placée ailleurs. Je n’ai donc pas modifié les règles du « jour 3 » mais j’en ai ajouté. Par ailleurs, comme cette présentation ne conviendrait pas pour le cas où les boîtes se trouvent en bas de la page, je n ‘ai pas placé ces nouvelles règles dans le fichier général style.css mais dans le fichier comportant les règles spécifiques, mediaqueries.css, sur le sélecteur englobant les règles concernant les fenêtres de plus de 1024px de large.

Et voici comment cibler la boîte de recherche si et seulement si elle est placée en premier de tous les widgets :

#sidebar #blognav div:first-child { }
	#sidebar div#search:first-child { }
	#sidebar div#search:first-child h2 { }
	#sidebar div#search:first-child p { }

Je ne les mets pas toutes, je pense que tu as compris le principe ! Comme tu es très observateur, j’anticipe ta question : « Mais, me diras-tu, la première ligne ne mentionne pas la boîte de recherche ! » et après t’avoir complimenté sur ta fine remarque je te répondrai que cette première règle me permet d’indiquer que faire de la première boîte (en l’occurrence, lui ajouter une marge haute pour qu’elle s’aligne avec la partie gauche).

J’espère que je suis assez claire et que ces explications ainsi que le zip qui accompagne ce billet te permettront de comprendre la manip. Si tu joues avec le thème, place la boîte de recherche ailleurs qu’en premier widget pour voir la différence.

Les stickers

Il s’agit des trois éléments tout en haut à droite. Il fallait trouver un moyen pour qu’ils s’affichent en haut sur les largeurs supérieures à 480px et en larges boutons en bas de la page pour les dimensions inférieures.

Première étape : la source

Je t’invite à regarder le nouveau fichier footer.html pour constater les modifications faites. Quand tu les ajouteras à la configuration n’oublie pas de leur affecter un identifiant correspondant à leur numéro d’ordre et d’affecter au dernier d’entre eux la classe last.

L’utilisateur choisira donc quels liens parmi les trois possibles il veut ajouter à cet endroit, dans quel ordre et vers quelle URL cela doit diriger.

Tu noteras que j’ai mis les images « en dur » et placé le texte assorti dans un span. Ces deux choses me permettent de cacher le texte quand les stickers sont en haut (et que l’image soit cliquable et accessible) et de limiter la zone de l’image quand les stickers sont en bas.

Deuxième étape : les CSS

Si j’ai choisi de placer ces liens dans le pied de page par défaut c’est qu’il s’agit là à mon sens de leur place « naturelle » ; je les « remonte » sur les grandes largeurs, grâce à un positionnement en absolute. La difficulté que j’ai rencontrée était de réussir à réduire la zone affichée des images pour garder à ces liens des hauteurs normales sur les petites largeurs.

Pour cela j’ai utilisé les règles suivantes dans les règles concernant les largeurs inférieures à 480px :

#stickers {
		margin: 0;
		padding: 0;
		border-bottom: 8px solid #fff;
		}
	#stickers li {
		position: relative;
		line-height: 2.5em;
		margin-left: 0;
		padding-left: 0;
		border: 2px solid #fff;
		border-left: 8px solid #fff;
		border-right: 8px solid #fff;
		}
	#stickers img {
		display: block;
		position: absolute;
		clip: rect(0px,32px,32px,0px);
		}
	#stickers span {
		margin-left: 40px;
		}

Note la position: relative attribué aux li, c’est afin de pouvoir donner une position:absolute à l’image, indispensable à l’utilisation de la propriété clip. Ne me demande pas pourquoi mais c’est une condition impérative pour que le clip fonctionne. Je l’ai lu mais n’ai pas trouvé d’explications à ce sujet.

Le haut de page

J’ai apporté un gros lot de nouveautés dans cette zone, gérée dans le fichier top.html.

Déplacement des liens d’évitement

C’est une décision provisoire – et qui ne bouleversera pas les choses si je le redéplace – mais l’accessibilité recommande de placer les liens d’évitement le plus haut possible dans la page. Leur placement dans les versions actuelles du thème par défaut de Dotclear n’est pas incorrect (juste après le titre du blog) mais comme j’aimerais que le titre et le sous-titre du blog soient dans un bloc cohérent et que je ne voulais pas rejeter les liens d’évitement après, je les ai carrément mis en tout premier lieu.

Ajout de la description du blog

Demande souvent faite par les utilisateurs sur le forum : que la description du blog, actuellement utilisée seulement dans le flux RSS, puisse s’afficher sur le blog. Je l’ai donc insérée. Si tu le peux, je crois que ça serait bien que le configurateur du thème permette de préciser si on veut ou pas qu’elle soit visible sur le blog.

Ajout d’un menu de premier niveau

Là aussi c’est une demande de plus en plus fréquente. Nous avons d’ailleurs un « ticket » qui propose la livraison par défaut d’un plugin de gestion de menu dans la distribution de base Dotclear. Je ne sais pas quelle sera la décision de l’équipe, aussi pourrions-nous passer pour le moment par le configurateur, d’autant que mon menu à moi prévoit la présence d’un sous-titre à chaque item et ne prévoit pas de sous-menus.

Je n’aime pas les sous-menus, ça m’agace de devoir survoler un lien pour voir d’autres bidules, de veiller à descendre soigneusement verticalement pour atteindre celui qui m’intéresse en veillant scrupuleusement à ne pas relâcher ma souris avant d’avoir atteint le Graal.

Comme par ailleurs ce type de menu pose des difficultés ergonomiques et d’accessibilité, zou, pas de niveaux inférieurs !

Quant à la présentation, je te laisse découvrir les CSS non sans t’avoir montré auparavant que quelques lignes suffisent à modifier l’ambiance générale du blog rien qu’en retouchant deux-trois règles. Regarde :

Dans le second fichier .zip joint à ce billet tu trouveras pour chaque variation sa capture d’écran, l’image de fond utilisée et les règles CSS assorties. Amuse-toi bien et si les lecteurs et toi voulez nous montrer vos variations, welcome !

Oh la la, tu as vu l’heure ? Ma maman va me gronder si je ne vais pas me coucher car demain j’ai école. Que la nuit te soit douce, très cher Franck, et à bientôt !