Comment je diffĂ©rencie lâaffichage de certains champs de profil (sans JS)
On mâa demandĂ© comment je faisais pour personnaliser Ă ce point les profils avec des champs Ă lâaffichage spĂ©cifique, voici donc un petit tuto qui prĂ©sente la mĂ©thode que jâutilise. Je prĂ©cise que celle-ci nâest peut-ĂȘtre pas la plus optimisĂ©e ni la plus simple, mais elle a le mĂ©rite de nâutiliser aucun javascript.
Comment je cible un champ de profil en particulier
Dans les pages de profils, les champs ont automatiquement des identifiants prĂ©cis quâon peut cibler facilement en CSS. Par exemple dans le template de base de ModernBB :
Vous pouvez donc cibler un champ par son id directement en CSS de cette façon :
#field_id3{ style associé }
Mais cet id nâest pas trĂšs parlant, donc Ă la relecture du CSS câest pas facile de comprendre quel style correspond Ă quel champ. Câest aussi impossible de cibler les champs comme cela dans les sujets car, sur ces pages, ils nâont pas dâidentifiant. Voyez plutĂŽt, toujours dans le template de base de ModernBB :
Donc, ce que je fais personnellement, câest que jâajoute une image associĂ©e au champ, et que jâutilise ensuite la propriĂ©tĂ© CSS :has() pour cibler les champs qui contiennent cette image. Voici comment faire.
Dans la configuration de votre champ :
Mettez un nom de champ explicite, puis ajoutez une image de votre choix dans la case URL de lâicĂŽne. Peu importe lâimage elle-mĂȘme, donc si vous nâen avez pas vous pouvez mettre lâimage vide de base de FA, Ă savoir https://2img.net/i/fa/empty.gif.
Enfin, rĂ©glez le Type dâaffichage sur IcĂŽne + Texte.
Voici ce que ces réglages produisent automatiquement au niveau du code :
Comme vous pouvez le voir, lâimage est apparue devant le nom du champ et porte un attribut alt qui a la valeur « Nom du champ ». Câest donc cet attribut que lâon va pouvoir cibler avec :has(). Lâurl de lâimage nâest pas importante du tout.
:has() permet notamment de cibler un bloc si celui-ci contient un Ă©lĂ©ment enfant prĂ©cis (ici, lâimage avec lâattribut souhaitĂ©). Dans le CSS, on peut ainsi cibler le champ de profil qui nous intĂ©resse en Ă©crivant :
.block-dl-default:has(img[alt="Nom du champ"]){ style associé }
De cette façon, le nom du champ apparaĂźt dans le CSS, ce qui est plus clair, et vous pouvez cibler de la mĂȘme maniĂšre les champs qui se trouvent dans les sujets.
Si vous voulez bien faire les choses, il ne vous reste plus quâĂ masquer lâimage que vous avez rajoutĂ©e grĂące Ă un display: none, comme ceci :
.block-dl-default img[alt="Nom du champ"]{ display: none }
Comment je fais pour faire des zones différentes dans le profil
Je vous rajoute un encart sur la façon dont je crĂ©e des âzonesâ diffĂ©rentes dans les profils (par exemple, une zone avec les champs de profil qui concernent le perso, et une autre avec ceux qui concernent lâIRL).
Câest bien simple, je multiplie le html plusieurs fois et je cache les champs que je ne veux pas afficher dans chaque zone.
Par exemple, pour deux zones, mon template ressemble à ça :
Et mon CSS Ă ceci :
/*-- Pour la zone avec le plus de champs Ă afficher, je masque simplement les champs dont je ne veux pas --*/ .zone_perso .block-dl-default:has(img[alt="Nom du champ"]), .zone_perso .block-dl-default:has(img[alt="Nom d'un autre champ"]){ display:none; }
/*-- Pour la zone avec le moins de champs Ă afficher, je masque tous les champs --*/ .zone_irl .block-dl-default{ display:none; }
/*-- Puis jâaffiche les champs que je veux voir dans cette zone --*/ .zone_irl .block-dl-default:has(img[alt="Nom du champ"]){ display: block; }
De cette façon, je nâutilise pas de JavaScript pour dĂ©placer les champs. Normalement, utiliser display : none permet que les champs masquĂ©s ne soient pas lus par les lecteurs dâĂ©cran, et le fait de doubler le html nâimpacte donc pas lâaccessibilitĂ© du forum ; mais le JavaScript est sĂ»rement + propre. Je ne sais pas. :>
Pour aller plus loin
Vous avez dâautres tutos qui utilisent JavaScript, notamment cette rĂ©ponse de âChrista (@lost-in-codes) sur le forum du Blank Theme qui contient un script permettant de dĂ©placer ses champs.
