Bonjour à tous·tes ! J'ai ce projet dans mes brouillons depuis des mois et je crois que si j'attends de rassembler 12000 autres titres, je le sortirai jamais, donc je le mets déjà en ligne avec 105 titres dispos et j'en rajouterai d'autres au fur et à mesure.
N'hésitez pas à m'envoyer vos idées dans ma askbox si vous en avez ; sachez juste que je ne suis pas en mesure de vous créditer pour vos idées car de toute façon ces titres n'ont pas vocation à être crédités du tout par les utilisateur·ice·s, ils sont entièrement libres d'utilisation ! Le but est de vous donner des idées en fonction du mood/thème recherché, que vous repreniez le titre tel quel ou construisiez le vôtre dans le même style, etc.
Les titres sont parfois des citations de chansons, films, séries, théâtre... de longueurs diverses, et classés par thème, émotion et mood global. Ils peuvent aussi servir pour grapher et tout ça, j'espère que ça aidera la commu ♥
Heyyyyyyyy entre deux màjs de PaB j'ai réalisé cette ressource inspirée du color thesaurus d'Ingrid Sunberg en anglais, mais cette fois-ci ce sont les termes français associés aux couleurs, pour vous aider à les décrire.
Version PDF via google drive : vocabulaire des couleurs
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.
Comme d’hab j’ai trop peur que ça plaise pas, mais nous (le staff) ça nous plaît donc c’est déjà ça. Je vous ferai une petite liste des nouveautés ici quand la màj sera finie, mais en attendant j'ai eu l'envie de faire une petite “note d’intention” un peu plus longue cette fois pour décrire un peu mon process. Ce sera sous le cut pcq en vrai ça spoil un peu et en plus j'pense tout le monde s'en fout 😎
Le design de la v.4.5 s’appelle Poison, parce que dès le départ je voulais partir sur des éléments empoisonnés et/ou venimeux partout. Au final, y’a un peu moins d’éléments que je pensais donc jsp si c’est toujours si cohérent que ça, le nom, mais osef.
En tous cas pour le header j’ai dessiné une branche de belladone & des champignons, ainsi qu’une flaque bien toxique, là, miom. J’ai rajouté un peu de blobs animés pour dynamiser le tout !
Les blobs animés
C’était la première fois que je faisais des blobs, à coups de border-radius un peu plus poussés que d’habitude. J’ai utilisé ce générateur tout simple et après tout est affaire de @keyframes.
L’animation sur les blobs est assez lente, donc je pense qu’à l’œil ça va, mais j’ai toujours un peu peur que les vieux ordis souffrent — et j’ai un membre en particulier qui a beaucoup de mal à visualiser le design v.4.4 déjà — donc j’ai rajouté au dernier moment un petit bouton pause/play pour arrêter les animations si besoin. Elles répondent aussi aux paramètres de Windows (genre si la personne a désactivé les animations), grâce au media query prefers-reduced-motion.
Les couleurs
J’ai trouvé assez vite celles du dark mode, je savais que je voulais partir sur du bleu comme on a déjà eu bcp de violet par le passé et que je suis pas fan du noir/gris (idk c’est trop neutre pour PaB je trouve ?)
Bref, pour l’aspect poison j’ai aussi vite opté pour du vert pétant sur les flaques toxiques et tout, et je trouvais que ça faisait une chouette couleur d’accent — elle est un poil annulée dans le dégradé principal avec le bleu et c’est pas plus mal parce que j’avais peur que ça arrache trop les yeux… Hopefully ça va, du coup. ↓
Niveau light mode ça a été beaucoup plus compliqué ! J’ai essayé mille versions des couleurs… À un moment j’étais partie sur bleu et rouge (genre les champignons devaient être rouges comme des amanites quoi ça faisait sens) et j’avais avancé quelques pages déjà avant qu’on me dise que ça faisait un peu « bleu-blanc-rouge la FRONCE !!! » et là… can’t unsee it mdrrrrr.
Finalement on a décidé de transformer le rouge en rose pâle (j’avais vu notamment passer cet artwork de kun333r qui m’a grave parlé dans ses couleurs), et là, révélation, ça faisait les couleurs du drapeau trans ??? omg banger pour une màj prévue au mois de juin.
Au niveau du code j’ai un poil update notre script de switch de mode ; jusque là on mettait le forum en dark mode par défaut. J’avais envie d’améliorer l’accessibilité donc ce coup-ci, on prend en compte les paramètres de Windows et/ou du navigateur pour la vue par défaut.
Le header
En cours de route, j’ai aussi refait le header de A à Z. J’étais partie sur quelque chose de plus chargé et plus difficile pour moi à dessiner de façon convaincante, et j’aimais bof le résultat. Ça m’arrive souvent de pas trop aimer mes headers, généralement je les laisse un temps pendant mes pérégrinations sur figma et je finis par changer 💀 Là quand je revois le premier header je le déteste vraiment de fouuuuuuu. ↓
Ça m’était déjà arrivée sur la v.4.3 en particulier, avec les nuages qui s’écartaient au scroll, vous savez. J’ai refait au moins 6 fois les nuages mais j’étais finalement arrivée à quelque chose qui me plaisait et qui changeait pas tant que ça du premier jet. Pour la 4.5, c’est la première fois que je change complètement en cours de route…
La barre latérale
Next j’avais surtout en tête l’orga que je voulais pour la barre latérale, qui est maintenant partie intégrante de PaB mais qui ne trouve(ait ?) toujours pas une organisation optimale. C’est dû au fait que je veux pas mettre trop d’éléments en hauteur au risque de devoir en retirer sur les petits écrans. Mais du coup, y’a souvent du vide dedans et on m’en a parlé dans la consultation que j’ai faite auprès des membres.
Là, sur la v.4.5, j’ai fait plusieurs onglets pour pouvoir afficher plus d’infos en tout, mais jsp si les membres vont apprécier d’avoir un clic supplémentaire, on verra. Et puis, il y a toujours du vide en bas de la barre, du coup… Mais je vois vraiment pas comment pallier à ça sans devoir display: none des trucs pour les petites hauteurs d’écran, idk. Shiverstone a un exemple de barre latérale responsive qui marche bien, mais on aurait beaucoup + d’éléments à afficher donc jsp si ça marcherait vraiment pour PaB… à explorer pour un prochain design. Mais en tous cas c’est bien apprécié d’avoir une barre latérale où on trouve tout à portée de main facilement.
Mais la question, c’était — comme j’avais déplacé les quelques petits boutons de la barre du haut jusque dans la barre latérale — est-ce qu’on supprime la barre du haut, du coup ? (celle-là ↓)
J’ai posé la question dans la consultation des membres et j’ai été surprise de voir qu’iels y étaient vraiment attachés, notamment parce qu’elle contient un lien vers l’index visible en toutes circonstances. Le fait est que ma barre latérale contient aussi un lien vers l’index, mais qu’il y a un problème : celui-ci, contrairement à celui de la barre du haut, n’est plus accessible en dessous des 1280px de large une fois qu’on a scrollé un peu la page.
La solution que j’ai trouvée a été de faire apparaître la barre du haut en dessous de 1280px seulement, comme ça sur mobile et tablette ils ont quand même leur lien vers l’index, le switch de mode, le bouton pause des animations facilement accessibles sans avoir à rescroller tout en haut du forum.
Les profils
Sur PaB, les profils sont pas mal développés… pour ne pas dire super longs. Mais entre les inventaires, les différentes cases pour les animaux de compagnie, les poches, les badges personnage et irl, la partie irl… Bon, voilà, c’est beaucoup de choses à remplir mais globalement les gens en sont pas mal satisfaits, iels sont pas perdus en tous cas. Et bien figurez-vous que j’ai ENCORE rallongé jpp, j’avais envie que les profils soient un peu plus illustrés, donc j’ai rajouté pas moins de 4 espaces pour des images.
↑ Truc sur lequel j’ai le plus galéré, ça a été les nouvelles infobulles qui suivent la souris sur les inventaires et sur les badges. J’ai dû demander de l’aide (coucou mary) pour les maths sur le positionnement dynamique des <div>, mais le résultat est super beau !!!! Et j’ai voulu le faire sans jqueryui, que j’utilisais avant pour la facilité, mais qui entrait en conflit avec la version de jquery de forumactif. (Pitié FA mettez-la à jour !!!!!!)
En passant sachez que pour générer les contenus des infobulles j’utilise le plugin Bédédé de Poumon, qui est juste incroyab. Ça me permet désormais d’afficher les descriptions complètes des objets dans les inventaires, sans qu’elles soient présentes dans le champ de profil (sinon ça dépasserait de fou la limite de 15000 caractères des zones de texte).
C’était important pour moi de rajouter les descs directement dans l’inventaire, parce que je sais que sinon les membres doivent aller chercher la boutique ou le sujet récap des objets exclusifs pour voir ce que font les objets un peu originaux… Donc ce sera + facile maintenant.
La chatbox
La cb de PaB c’est spécial. C’est notre petit cocon donc j’essaie toujours de l’améliorer, et là, sur ces mots, arrive Ellie qui m’a filé un de ses vieux scripts pour la personnaliser… et me voilà à regarder de plus près les requêtes de la CB pour bidouiller des fonctionnalités de fou.
Déjà, avec le switch dark/light on galère toujours à trouver une couleur de message qui passe sur les deux modes, alors parfois on veut tout annuler, revenir à la couleur de base qui, elle, s’adapte au mode. Et bah désormais, ce sera super facile, il y aura juste à écrire la commande /couleur, et bim.
Ensuite, difficile de savoir qui est le dc de qui quand ça switche à tout va, donc j’ai rajouté aussi une commande /dcs qui va directement ouvrir le sujet listing des dcs pour éviter d’avoir à aller le chercher.
Sinon, le truc qu’Ellie a codé à l’époque, c’était un système de tags de noms d’utilisateurs dans la cb : je l’ai à peine retouché, et désormais on pourra mettre un message en valeur chez quelqu’un qu’on tag, ou chez tout le monde en taguant @/pabous. Pour faciliter la chose, j’ai modif un poil l’action qui met le nom d’utilisateur dans le message quand on clique dessus, pour qu’il y ait automatiquement une @ devant.
Enfin, il y a un son sur les nouveaux messages de la cb et certains n’aiment pas du tout. Jusqu’à présent, iels mutaient leur onglet, mais c’est effectivement un peu nul (comme on me l’a fait remarquer dans la consultation), donc j’ai implémenté moi-même un bouton dans la cb pour la mute. C’est fait à partir du code donné par FA qui utilisait le localstorage pour les options du son, donc il m’a suffit d’ajouter un bouton qui change le localstorage en mode on/off et voilà.
Au passage j’en ai profité pour refaire la fenêtre des commandes (bouton (?) de la cb) pour faire état de ces nouvelles commandes.
Les sujets
En vrai pas beaucoup de changements sur cette partie, mais on m’a réclamé une possibilité de faire des posts extra-larges qui prendraient tout l’espace du corps du forum (donc en virant le profil). C’est chose faite grâce à une toute petite class à ajouter quelque part dans son message.
C’est la géniale pseudo-class :has() qui permet de modifier l’affichage d’une div si elle contient une class précise. Je l’utilise à toute les sauces depuis qu’elle est baseline hihi. Mais par contre j’avais eu des soucis avec au départ, certains membres étaient sur des vieux PCs avec de vieux navigateurs qui ne géraient pas cette fonction du tout… Donc il avait fallu qu’ils aillent activer manuellement le :has() dans les options. 😔
Je l’utilisais aussi notamment pour attribuer des couleurs de groupe sur les différents posts, mais désormais forumactif a rajouté des classes propres aux groupes sur les posts ! Donc j’ai pu grandement simplifier mon CSS grâce à ça. Blessed. Malgré tout, ces classes ne sont pas (encore ?) présentes ailleurs genre dans les profils, donc j’ai encore besoin de mon super script des couleurs de groupe à cet endroit. Snirf.
La to-do list
Truc de fou que j’avais envie de faire depuis un bail, on avait brainsto ça sur @la-piscine-rpg, mais ouais une to-do list de rps a trouvé sa place dans la barre latérale de PaB. En gros, les membres ajoutent leurs rps dans la liste, ils cliquent sur le bouton s’ils ont répondu, et ça conserve les données. Gala avait donné sa version en LS sur le discord de la Piscine ; moi j’ai fait ma propre version qui conserve et récupère les données sous forme de json dans un champ de profil, donc ça produit une to-do list pour chaque compte, qui n’est pas perdue lorsqu’on vide son localstorage.
Ça m’a trop éclatée de coder ça dès lors que j’ai trouvé l’idée de comment faire, et j’ai eu un chouille d’aide de la part de Mary encore pour une fonctionnalité qui a pas vu le jour finalement mdrrrrr. À la base je voulais que le champ de profil s’update en direct à chaque ajout/clic sur sur un bouton mais en fait ça aurait été trop gourmand en ressources + c’était juste pas possible avec le fonctionnement de forumactif qui remplaçait pas correctement le contenu si on enregistrait deux fois de suite… Bref, j’ai finalement mis un bouton “sauvegarder” à cliquer dès qu’on a fini ses modifs sur la liste.
↑ Ça s’accompagne d’un bouton dans les sujets pour ajouter directement un sujet à la to-do list. Juste parce qu’on pouvait le faire. Et ouais.
Le guidebook
Pour finir je veux parler un peu de notre guidebook qui est un vrai banger !!! Et c’est toujours grâce à .1019 qui m’a filé son code pour faire la barre de recherche interne au guidebook, qu’on a ensuite brainstorm pour ajouter le surlignement du mot recherché et tout. Bref ça c’est là depuis la version précédente donc osef. (mais j’en parle quand même)
Le truc c’est qu’avec le fonctionnement de ce guidebook, les différentes pages s’affichent selon le hash de l’url. Du coup, les ancres internes au pages changent le hash et conduisent les membres à envoyer souvent des liens vers le guidebook qui ne fonctionnent pas. Et bien plus maintenant !! Désormais les ancres mèneront vers les pages concernées et scrolleront automatiquement vers le paragraphe souhaité !
C’était vraiment pas sorcier mais j’ai dû transformer mes ancres avec le hash de la page, un tiret, et le mot associé à l’ancre. Du coup, le script split le hash au niveau du tiret s’il y en a un, et si oui il affiche la page de la première partie du hash, puis scrollTo l’ancre correspondante dans la seconde partie. C’est un peu artisanal mais ça fonctionne !!!
-----
Bon ça fait déjà un bon gros pavé que personne va lire donc je m'arrête là sur le blabla, je vous ferai je pense un autre post un peu + focus sur l'accessibilité pcq ça a vraiment été mon focus sur ce design, et c'est pas très facile sur FA 😔 Mais un aspect intéressant à discuter en tt cas.
Voilà un petit code de rp pour forumactif ; il est plutôt simple mais s'avère responsive et vous pouvez contrôler la taille de texte, les polices, et les couleurs (fond, hachures, bordures, texte...). Vous pouvez également changer l'image de la fleur pour en mettre une qui vous plaît +, l'image s'adaptera pour se mettre à moitié à l'intérieur du cadre. cf exemple sous le cut.
Important : je code exprès pour forumactif, je fais donc en sorte que les retours à la ligne ne soient pas pris en compte dans le code, sauf dans la div qui contient le rp. Vous pouvez donc copier-coller tel quel la partie HTML du codepen dans votre post sur FA. Pour le CSS, vous pouvez l'enregistrer dans un fichier .css et l'héberger sur dropbox par exemple, ou bien l'intégrer directement à votre post entre deux balises <style></style>, mais à ce moment-là il faudra retirer les retours à la ligne.
Personnalisation :
Pour personnaliser les couleurs et les polices, utilisez les variables css au début de la div .pkb_magnolia :
.pkb_magnolia{
--pkbmag_font: POLICE PRINCIPALE (par défaut : Roboto);
--pkbmag_wgt: GRAISSE DE LA POLICE PRINCIPALE (400);
--pkbmag_size: TAILLE DU TEXTE PRINCIPAL (16px);
--pkbmag_font_titre: POLICE DU TITRE (Pirata One);
--pkbmag_wgt_titre: GRAISSE DU TITRE (400);
--pkbmag_size_titre: TAILLE DU TITRE (60px);
--pkbmag_font_infos: POLICE DU TAG/NBRE DE MOTS (Roboto Serif);
--pkbmag_wgt_infos: GRAISSE DU TAG/NBRE DE MOTS;
--pkbmag_color_txt: COULEUR DU TEXTE (#300b12);
--pkbmag_color_bord: COULEUR DES BORDURES (#300b12);
--pkbmag_color_hash: COULEUR DES HACHURES (#958281);
--pkbmag_color_fond: COULEUR DU FOND (#f6f4eb);
}
