.1019 — code, designs & roleplay

Tu fais du RP sur forum ? Tu gères trop de personnages, trop de fiches, trop d’avatars, trop de codes, trop d’onglets ouverts et pas assez de neurones disponibles pour tout suivre ? Alors tu es probablement au bon endroit.

RPG Portal, c'est deux plateformes dédiées aux forums RPG, aux outils pour rôlistes, à la gestion de personnages, aux annuaires, aux fiches, aux codes RP, à l’organisation… et parfois aux idées beaucoup trop ambitieuses pour notre santé mentale collective.

Le projet regroupe deux outils :

🦸 Heroes Portal Un dashboard pensé pour gérer tes personnages, tes forums, tes avatars, tes codes RP et ton organisation sans finir comme un gobelin sous caféine avec 47 onglets ouverts. ➡️ https://www.heroesportal.fr/

📖 Forum RPG Portal Un annuaire / top-site pour découvrir, référencer et faire vivre les forums RPG. ➡️ https://www.forumrpg.fr/

💬Discord communautaire Il existe aussi un Discord que je vous encourage à rejoindre afin de collaborer avec leurs créateurs ! ➡️ https://discord.gg/Cn4zn2GbkA

Le but du serveur est simple : aider les rôlistes, récolter vos retours, améliorer les outils avec vous, faire circuler les forums et les projets, et construire tout ça en mode multi-cerveau — parce qu’un seul cerveau, franchement, c’est surfait.

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

J'ai posté quelques wip et rencontré un certain enthousiasme donc je vous mets le code à disposition maintenant qu'il est terminé ! ✨

Documentation (+ doc sur le forum du Blank Theme)

HTML RECHERCHE, FILTRES ET TRI > https://textup.fr/868292Ea

JS MEMBERLIST > https://codepen.io/dinerchezdorsia/pen/NPGJepb

felid code vos forums !

REQUÊTES : OUVERTES

Mon but ici il est bien simple : donner une chance aux petits projets. Pas tout le monde sait coder un forum, parce-que qu'on se l'avoue c'est une galère monstre : sauf que moi je veux plus voir des projets incroyables bider parce-que "leur design est pas assez attrayant".

Du coup le topo ici, il est très simple : en ask, envoyez moi un pitch, le plus simple possible, du style "un forum dark academia avec une intrigue et des secrets" "un forum qui se passe à New York et qui se concentre sur le monde de la mode". Aussi, n'oubliez pas de me donner votre pseudo discord !

Si votre projet m'intéresse, bah je m'engage à coder votre forum pour vous. Je veux pas faire partie du staff, à la limite peut-être que je m'inscrirais après en simple membre : je veux juste aider votre forum a attirer le plus de gens possibles.

Avis à tous les adeptes de forum RPG (et même au-delà en vrai lol), Imgur ne fonctionne plus pour les utilisateurs au UK et de fait, si vous avez hébergé vos designs sur Imgur vos forums ne ressemblent plus à rien...

Quelques exemples :

(j'avoue m'être pété une barre sur le dernier qui a je suppose des particules qui tombent et du coup y'a des grosses images qui gigotent dans tous les sens... bef mdr)

La seule solution pour les usagers au Royaume-Uni est de passer par un VPN, seulement ce n'est pas l'idéal et tout le monde n'a pas les moyens/l'envie de pouvoir s'en payer un.

Lorsqu'un usager au UK tenter d'accéder au site, il est accueilli par ceci :

{ "data": { "error": "Content not available in your region." }, "success": false, "status": 400 }

Voilà voilà. Super.

Gros big up pour le OSA (Online Safety Act) qui démontre bien la connerie des partis. Bref.

À titre personnel, c'est triste mais je ne pense pas changer d'hébergeur d'images... parce que :

- potentiellement tous les hébergeurs pourraient subir le même sort

- Imgur est l'hébergeur le plus fiable que j'ai jamais utilisé

Il est devenu indisponible en raison de la législation aux UK, qui cause aussi les problèmes sur Twitter, bientôt Discord (vérification d'identité etc).

Cette loi est une abomination qui attaque directement l'anonymat en ligne mais aussi la liberté en général.

Ton assistant personnel magique !

✨ Megaverse a son générateur V2 ! ✨

Tu veux créer un perso sur Megaverse, mais les nombreuses pages de notre lore encyclopédique t'effraient ? On te comprend. Et c’est pour ça qu’on a tout repensé. Nouveau design, nouveau flow, nouvelle énergie et un concept aussi ludique qu'immersif pour faire tes premiers pas sur MGV.

🎮 Le principe ?

Un générateur interactif, façon “omni-reflective mirror” connecté (les "téléphones" de mgv 👀), qui te guidera pas à pas. Tu choisis, tu découvres, tu t’immerges. Et à la fin ? Une fiche perso complète, prête à t’inspirer pour te lancer dans l’univers, avec une présentation des personnages ou liens recherchés qui pourraient t'intéresser.

🧭 C’est quoi les nouveautés ?

Une interface épurée et responsive (PC, tablette, mobile)

Un ton plus narratif et immersif : plus de vibe, moins de cours magistral

Des infos allégées au max pour que tu ne sois jamais noyé.e → Et si tu veux creuser ? Clique sur “+ en savoir plus”, et découvre les détails des points qui t'inspirent

Et surtout : une version pensée pour les invité·es. Tu n’as pas besoin de tout connaître dès le début pour t’amuser à créer un personnage !

💡 Tu veux tester ?

On t’invite à jouer, à explorer, à rêver. Que tu sois déjà un membre du forum ou juste curieux·se, viens jeter un œil : Megaverse n’attend que toi !

Et n'hésite pas à nous faire tes retours sur l'app via la section commentaires : c'est une version bêta qui peut connaître des failles non détectées (et on te serait super reconnaissantes de nous les faire remonter !), et qui ne peut que s'améliorer grâce aux feedbacks des utilisateur·rice·s 💜

Avec la màj d'hier sur Epicode, j'ai eu envie d'updater mes LS/tutos dessus et je commence par reprendre le guide des différentes versions de forum ! Malheureusement, il faut avoir un compte pour lire, donc pour ceux qui en ont un voici le lien du sujet :

et pour ceux qui n'en ont pas, je vous invite à cliquer sur le lien ci-dessous pour lire l'article complet directement sur tumblr.

Disclaimer : je suis quasi sûre qu'il reste plein de choses à dire, n'hésitez pas à me suggérer des rajouts (notamment sur phpbb3 et punbb que je connais pas bien) et j'updaterai ça ✨

Nouveaux tutoriaux !

'Christa Lostmindy nous a réécrit le code qui permet de déplacer les champs de profil dans un post pour qu'il soit plus simple d'utilisation ! (il sera mis par défaut sur le Blank Theme sous peu) Elle l'a accompagnée d'un tutoriel hyper pédagogue qui explique en détails le fonctionnement des champs de profil en général.

▶ Déplacer et personnaliser les champs de profil

Elle a également réécrit le tutoriel pour les champs de contact afin de le rendre plus complet, toujours en étant très pédagogue ! Merci pour sa patience et son implication 👏

La Piscine vous rappelle que demain, c'est un jour de vote et nous vous invitons à vérifier votre bureau de vote ( https://www.service-public.fr/particuliers/vosdroits/services-en-ligne-et-formulaires/ISE ) pour pouvoir vous y déplacer.

Je m'adresse principalement à ceux et celles qui ne votent pas : votre vote compte.

Dans certaines circonscriptions, l'écart lors des dernières législatives tenait à quelques voix, parfois 1 seulement.

Personnellement, je ne crois pas que le changement pour le mieux se fera dans les urnes. Je ne crois pas spécialement aux promesses du NFP et j'ai en horreur certain(e)s de leurs candidat(e)s. À titre personnel, je crois que la révolution est le seul moyen d'obtenir ce que je souhaite.

Mais je sais par dessus tout que si l'extrême-droite passe, je perdrais des droits dès cet été. Des propositions de lois transphobes ont été validées par le Sénat et attendaient d'être examinées à l'assemblée. Je comptais sur cette dernière pour faire barrage.

Ma compagne quant à elle pourrait ne plus pouvoir travailler en France si le RN prend le pouvoir, comme l'a suggéré Jordan Bardella sur le cas des binationaux au sujet des "postes stratégiques de l'Etat".

De mon côté, mon état de santé ne me permet pas de fuir dans un autre pays, après m'être (malheureusement) renseigné.

Et ça, ce n'est que ma situation, moi un inconnu sur internet. Parmi vos proches, vous aurez des personnes touchées comme je le suis, parfois plus durement. Que ce soit tout de suite ou dans quelques années, à leur retraite ou quand ils voudront quitter un job dont le burn-out menace gravement leur santé.

On rappelle également que le RN a voté :

contre l'augmentation du SMIC,

contre l’indexation des salaires sur l’inflation,

pour forcer les salariés en CDD à accepter un CDI,

contre l’instauration de salaires minimum en Europe,

contre l’égalité salariale entre les femmes et les hommes,

contre le gel des loyers.

Je n'évoque pas encore tout ce qui devrait être évoqué : ce post est déjà long et je crains qu'il ne faille un dossier de plusieurs pages pour vraiment pouvoir balayer toutes leurs mesures racistes, xénophobes, sexistes, autoritaires et fascistes.

C'est pourquoi la Piscine vous invite à voter pour le Nouveau Front Populaire demain et le 7 Juillet.

Si vous ne le faites pas pour vous, faites le pour vos adelphes qui souffriront du RN au pouvoir.

Merci pour votre attention,

La Piscine.

Salut !

Croyez-le ou non, j'ai oublié de fournir le lien d'invitation vers le serveur Discord d'entraide codage / design sur Forumactif "La Piscine".

Du coup le voilà :

Bonjour tout le monde 👋

Ici @1019-code, je viens vous annoncer l'ouverture (officielle) de La Piscine, un discord de commandes et d'entraide pour forums Forumactif dans les domaines du codage et du graphisme.

Vous pourrez :

trouver des épreuves, "challenges", pour tester votre créativité ou faire fleurir l'inspiration (et accessoirement peut-être réussir à booster le libre-service),

rejoindre des équipes pour gagner des POINTS qui ne servent à RIEN !!!

si vous êtes prestataire, discuter entre nous dans le but de se mettre d'accord sur nos pratiques ou trouver de l'aide dans le monde merveilleux du freelance,

trouver un répertoire de prestataires pour réaliser des commandes payantes en code ou en design,

partager votre plateforme, tumblr, forum, etc pour présenter votre travail,

partager du libre-service que ce soit en code ou en design,

nous faire part de vos meilleures ressources (et en trouver !) que ce soit en code ou en design,

vous entraider et réussir à traquer les bugs ou à comprendre comment on fait des incrustations trop classes sur des bannières,

présenter votre travail en cours et recevoir tous les compliments du monde pour faire un peu de bien à votre ego,

recevoir des feedbacks si vous le souhaitez, que ce soit sur un design, une création ou un code,

demander de l'aide pour trouver l'inspiration, finie la page blanche,

présenter vos objectifs de la journée, du mois, de l'année, au choix,

partager vos coups de coeur en terme de codage ou de design, que ces derniers soient des forums où d'autres sites qui n'ont absolument rien à voir,

partager vos meilleurs memes sur le burn-out,

et tout simplement discuter de codage et graphisme !

Et en plus on a déjà 280 membres !

J'ai récemment terminé la configuration du serveur (après 2 ans, oups...), de fait j'en fais maintenant la publicité !

Le but de La Piscine

Avec La Piscine, j'espère composer une vraie communauté d'entraide autour de Forumactif, mais aussi une plateforme de partage de ressources, de tutoriels, et aussi d'idées "irréalisables".

On a quelques scripts inédits et totalement révolutionnaires qui sont uniquement présents là-bas, faute de temps de leurs créat·eur·rice·s (oups, je parle peut-être que des miens). On a par exemple le processus complet de @code-lab concernant la génération de fiches de présentation, mais on a aussi des tentatives de bases de données de membres pour permettre des bottins automatiques mais aussi des listes de membres avancées, style masterlist, entre autre choses.

Ce que j'aimerais également, c'est que ça booste la création de libre-service. Que ce soit en design ou en code, qu'on propose + de contenu libre. Donc si vous créez régulièrement du libre-service (maquettes ou code), n'hésitez pas à nous rejoindre pour remplir les placards de vos créations !

Vous êtes débutant·e ?

Pas de panique : La Piscine est ouverte à TOUS les niveaux ! On est là pour vous aider, même si c'est pour quelque chose d'ultra simple mais que vous ne maîtrisez pas. Et vous n'êtes vraiment pas seul·e !

Vous êtes professionnel·le ?

Hey ! Sous l'impulsion de @Tamaraa, on travaille sur un générateur de fiche de présentation qu'on pourrait intégrer au Blank Theme.

C'est un code qui existe déjà sous plusieurs version mais là on s'est dit que ça serait mieux qu'il soit plus complet que juste générer un code à c/c dans son post.

L'idée ça serait d'avoir un formulaire qui s'affichage à la création de sa fiche (comme à la création normal d'un post) et chaque information serait remplie dans un champs texte normal puis sauvegardé. En éditant le post de la fiche, le formulaire sera remplie des informations sauvegardés. En gros, on remplirait sa fiche comme on remplit ses informations de profil de compte !

On travail dessus à plusieurs et vous pouvez nous rejoindre sur le discord de La Piscine pour participer ! Et le début de code se trouve sur ce post pour tout ceux qui souhaiterait tester en cours de route et donner des retours.

Hey again !

Le plugin avance bien mais est toujours en production. Vous pouvez le tester ici si ça vous intrigue.

N'hésitez pas à donner vos retours, poser des questions, etc !

Avoir un formulaire simple qui s'affiche dans la catégorie dédiée aux fiches

Modifier le contenu de sa fiche avec le formulaire à l'édition du post

Afficher le code de présentation de la fiche dans le post et à sa prévisualisation

Utiliser du HTML/BBcode et des emojis dans les inputs du formulaire

Impossibilité de poster sans fiche s'il y a des erreurs HTML (balise mal fermée par ex)

Indicateur du nombre de caractère restant selon la limite max de FA

Hey ! Sous l'impulsion de @Tamaraa, on travaille sur un générateur de fiche de présentation qu'on pourrait intégrer au Blank Theme.

C'est un code qui existe déjà sous plusieurs version mais là on s'est dit que ça serait mieux qu'il soit plus complet que juste générer un code à c/c dans son post.

L'idée ça serait d'avoir un formulaire qui s'affichage à la création de sa fiche (comme à la création normal d'un post) et chaque information serait remplie dans un champs texte normal puis sauvegardé. En éditant le post de la fiche, le formulaire sera remplie des informations sauvegardés. En gros, on remplirait sa fiche comme on remplit ses informations de profil de compte !

On travail dessus à plusieurs et vous pouvez nous rejoindre sur le discord de La Piscine pour participer ! Et le début de code se trouve sur ce post pour tout ceux qui souhaiterait tester en cours de route et donner des retours.

Hey again !

Le plugin avance bien mais est toujours en production. Vous pouvez le tester ici si ça vous intrigue.

N'hésitez pas à donner vos retours, poser des questions, etc !

Ce n'est pas le droit à la critique que je remet en question, mais le moyen.

Pourquoi ne pas formuler les critiques directement aux personnes visées ?

Pourquoi exprimer son mécontentement sur une plateforme sur laquelle les concernés ne sont peut-être pas (et par extension, n'ont pas le droit de réponse)

Pourquoi ne pas accompagner les critiques avec des ressources dont on a déjà connaissance ?

Pourquoi assumer que tout les cas rencontrés sont issus de la mauvaise foi des concernés ?

Et pourquoi faire d'un cas prouvé de mauvaise foi une généralité ?

Pourquoi assumer que tout le monde à accès/connaissance à toutes les ressources ?

Si mon message semble accusateur, comment se sentent les personnes qui se reconnaissent dans les critiques formulées avec une claire intention d'exprimer de l'indignation et du ras-le-bol ?

La façon dont on s'exprime provoque un cercle vicieux dans lequel ceux qui sont d'accord surenchérissent et ceux qui ne le sont pas entrent directement en conflit et/ou se braquent.

Plus d'apprentissage, plus d'échange.

On est une communauté qui doit se nourrir sur les bonnes intentions des un et des autres (tu rp -> je réponds, tu créés -> je partage). Manquer de temps et de connaissance peut être comblé par l'ouverture de discussion dans lequel on peut proposer des initiatives.