Version FA : AwesomeBB


Objectif

D'après une liste prédéfinie, pouvoir afficher cette liste  sur le profil et dans les messages. Chaque élément de la liste doit pouvoir s'afficher  individuellement d'après une liste de mot clé dans un champ du profil.


Étapes

  • Créer une page HTML qui contient la liste des  éléments.
  • Créer un champ dans le profil (Texte ou zone de  texte).
  • Afficher dans le profil (JavaScript/JQuery – par  Nihil).
  • Afficher dans les messages (JavaScript/JQuery –  par Kiowa).

Autres indications

L'affichage de ce système dans le profil a été conçu par  Nihil de Never Utopia. Toutefois, d'après ce système, j'ai conçu une seconde  version qui, d'après celui de Nihil, permet l'affichage directement dans les  messages.


Tutoriel

Créer une page HTML qui contient la liste des  éléments

La toute première étape est de créer votre page HTML qui  contiendra la liste de vos éléments à afficher.

Pour ce faire :


Panneau d'administration > Modules > Gestion des pages HTML

Je vous conseille d'utiliser le bouton « Création en mode avancé (HTML) »  pour créer votre page. Votre page doit respecter la sémantique pour vous assurer  qu'il n'y a aucune erreur. Voici donc celle-ci :


Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
<style>
<!-- En cas de besoin -->
</style>

<body>
<!-- Ici se trouvera le contenu de votre page -->
</body>
</html>

Débutons donc avec l’ajout d’une balise DIV dans le body où vous devrez lui indiquez un ID. L’ID est généralement unique à un seul élément contrairement à une classe. Pour l'exemple l'id sera « triggerWarning ». Vous devez positionner cette ligne dans body.


Code:

<div id="triggerWarning"></div>


Maintenant, la façon que vous allez lister vos éléments dépends que de vous. Certains ne font que mettre des images d’autre crée réellement une liste UL. Pour ma part, j’ai une préférence pour la liste en bonne et dû forme.


Chacun de vos éléments devra comporter au moins 1 classe applicable à tous (ici pas_actif) et une classe unique qui permettra au javascript de ciblé chacun des éléments. Vous pouvez en ajouté d'autre au besoin.


Il vous suffit donc d'ajouter votre liste dans votre DIV


Code:

<ul>
      <li class="pas_actif tw_raceRel">Racial et religieux</li>
      <li class="pas_actif tw_lgbtq">LGBTQ+</li>
      <li class="pas_actif tw_smental">Santé mentale</li>
      <li class="pas_actif tw_handicape">Handicaps</li>
      <li class="pas_actif tw_sexuel">Contenu sexuel</li>
      <li class="pas_actif tw_violence">Violence & mort</li>
      <li class="pas_actif tw_harcelement">Harcèlement</li>
      <li class="pas_actif tw_autres">Autres</li>
    </ul>

Enregistrer Avant de quitter la page, prenez en note le numéro de votre page, c'est le chiffre suivant /h


Créer un champ dans le profil (Texte ou zone de  texte)

Il vous faut maintenant créer le champ dans le profil qui vous permettra d'y inscrire les indications qui servira a faire afficher que les éléments propre a chaque utilisateur. Tout dépend de l'utilité que vous en ferez mais le champ peut être éditable ou non par le membre.


Panneau d'administration > Utilisateurs et groupes > Utilisateurs > Profil