Personnaliser une catégorie ou un sujet selon son état ou son type

Présentation

Depuis l'arrivée de la version awesomeBB de Forumactif, nous avons a disposition des variables qui permettent de gérer l'état (pas de nouveau message, nouveau message, verrouillé) ou le status (normal, note, annonce, globale) d'une catégorie ou d'un message. Comment ? En ajoutant des .class qui correspondent à chaque état/status.

Une fois que vous avez connaissance de ces class, libre à vous de personnaliser l'apparence de vos catégories ou vos sujets avec du CSS ! Sur l'exemple, j'ai ajouté une bordure à toute ma catégorie pour signaler un nouveau message. C'est pas super esthétique mais ça donne une idée.

Installation  

L'installation étant déjà faite dans le Blank Theme, vous pouvez passer les deux premières étapes.

Les variables se sont les drôles de balises entre accolades que vous trouvez dans les templates. Dans notre cas, celles-ci vont fournir des .class qui nous aideront à personnaliser notre forum.

index_box (template des catégories)
Dans ce template, identifiez le container de votre catégorie et ajoutez dans sa propriété class la variable {catrow.forumrow.FOLDER_CLASSNAME}

Exemple du Blank Theme :

Code:

<div class="forum row {catrow.forumrow.FOLDER_CLASSNAME}">

topics_list_box (template de la liste des sujets)
Dans ce template, identifiez le container d'un sujet et ajoutez dans sa propriété class les variables {topics_list_box.row.FOLDER_CLASSNAME} et {topics_list_box.row.TOPIC_READ_STATUS}

Exemple du Blank Theme :

Code:

<div class="topicslist_row row {topics_list_box.row.FOLDER_CLASSNAME} {topics_list_box.row.TOPIC_READ_STATUS}">

Comprendre leur fonctionnalité

Si vous inspectez le code de votre page (clique droit sur une catégorie → inspectez l'élément), vous verrez une class à la place de l'étrange variable que l'on vient d'installer.

Par exemple, par défaut, une catégorie aura la class .cat_no_new puis, lorsqu'un membre va poster un nouveau message, cette class deviendra .cat_new

C'est cette deuxième class qui va vous être utile pour ajouter des effets supplémentaire visuelles lors d'un nouveau message. Dans mon exemple, j'ai ajouté une bordure. Voici mon CSS :

Code:

.cat_new {
  border: 2px solid var(--accentClr);
}

Liste des class

.cat_no_new → catégorie sans nouveau message
.cat_new → catégorie avec nouveau message

.forum_no_new → sous-forum sans nouveau message
.forum_new → sous-forum avec nouveau message

.post_new → sujet sans nouveau message
.post_no_new → sujet sans nouveau message

.folder_locked → sujet verrouillé
.folder_sticky → sujet de type note
.folder_announce → sujet de type annonce
.folder_global → sujet de type annonce globale

Maintenant que vous avez ces informations à disposition, il n'y a plus qu'à être créatif !

Je trouve que ça peut être particulièrement utile pour mieux différencier les notes et les annonces des sujets normaux.