Créer une nouvelle icone de sujet/message

[Tricorion]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://galaxieasteria.forumactif.com/

Description du problème

Bonjour,

Ce n'est pas vraiment un problème, mais dans tout les cas, ça concerne bien l'apparence de mon forum

En faite, j'aimerais pouvoir créer de nouvelles icones de message qui pourrait les catégoriser autrement que dans annonce ou bien note. Par exemple, j'aimerais avoir une icone qui pourrait catégoriser ensemble les fiches personnages. Je ne sais pas si c'est réellement faisable, mais autant demander !

Je vous remercie d'avance

[Toryudo]

Bonjour !
Si on peut trouver un "pattern", comme par exemple "remplacer toutes les icônes de messages qui se situent à tel endroit par telle image", alors oui, quelque chose comme ça devrait être possible via JavaScript. Est-ce que vous pourriez donner plus de précisions ?
- le forum / la page / catégorie concernés (avec un lien si possible, accessible aux invités pour les tests)
- l'image à remplacer, avec l'adresse de la nouvelle image (pour les tests là encore)
- s'il y a des sujets où l'image doit être remplacée et s'il y a des sujets où l'image ne doit pas être remplacée (c'est là qu'il y aura probablement le plus de problème)

[Tricorion]

Bonjour !
Si on peut trouver un "pattern", comme par exemple "remplacer toutes les icônes de messages qui se situent à tel endroit par telle image", alors oui, quelque chose comme ça devrait être possible via JavaScript. Est-ce que vous pourriez donner plus de précisions ?
- le forum / la page / catégorie concernés (avec un lien si possible, accessible aux invités pour les tests)
- l'image à remplacer, avec l'adresse de la nouvelle image (pour les tests là encore)
- s'il y a des sujets où l'image doit être remplacée et s'il y a des sujets où l'image ne doit pas être remplacée (c'est là qu'il y aura probablement le plus de problème)

Bonjour !

Je vous remercie pour pour votre temps et votre réponse. Je ne souhaite pas remplacer les icones déjà existantes, mais bien en créer des nouvelles, je ne sais pas si c'est bien claire xD

[Toryudo]

Ce sera possible également, mais je veux bien un petit schéma alors, un petit montage qui montre le résultat désiré !

[Tricorion]

Ce sera possible également, mais je veux bien un petit schéma alors, un petit montage qui montre le résultat désiré !

Je vous fait cela au plus vite ! Actuellement, je me bat avec la bannière de mon forum merci encore pour votre aide !

EDIT :

Voilà le schéma ! J'aimerai donc un nouveau bouton qui s'affiche avec les autres et qu'on pourrait choisir dans "option" quand on écrit dans l'éditeur de texte ^^

[Toryudo]

Alors afficher le nouveau bouton, ce serait possible.
Associer des messages à l'image de ce bouton, ce serait possible.
Par contre, on ne peut pas faire en sorte d'avoir d'autres options, non.

A la base, quand vous parliez de "fiches personnages", je me suis dit : les fiches personnages sont en général toujours dans le même forum. Par exemple, on pourrait se dire que tous les sujets présents ici https://galaxieasteria.forumactif.com/f2-les-passeports seront des fiches personnages. Alors sans avoir besoin de rajouter des options, je me disais que oui, il serait possible de remplacer les icônes de ces messages présents dans le forum f2-les-passeports par d'autres images, comme sur l'exemple suivant :



Pour ça, un script dans ce style pourra convenir je pense :

Code:


var imageFiches = 'https://2img.net/i/fa/i/smiles/icon_biggrin.png';
var texteFiches = 'Fiches Personnages';

$(function(){
   if(document.location.pathname.includes('f2-')){
      document.querySelectorAll('.forumbg:not(.announcement) .row .icon').forEach(function(fiches){
         fiches.style.backgroundImage = 'url(' + imageFiches + ')';
      });

      let fichesPerso = document.createElement('li');
      fichesPerso.innerText = texteFiches;

      let fichesPersoImg = document.createElement('img');
      fichesPersoImg.src = imageFiches;
      fichesPersoImg.alt = texteFiches;
      
      fichesPerso.prepend(fichesPersoImg);
      document.getElementById('picture_legend').appendChild(fichesPerso);
   }
});

(par ici https://forum.forumactif.com/t311791-gestion-des-codes-javascript pour savoir comment ajouter des scripts sur un forum si besoin, à placer dans notre cas sur "Sur toutes les pages")

Pour l'exemple, le script place l'image https://2img.net/i/fa/i/smiles/icon_biggrin.png à la place des sujets présents sur la page https://galaxieasteria.forumactif.com/f2-les-passeports mais ça pourrait évoluer un peu comme vous le voulez. Qu'est-ce que vous en pensez ?

[Tricorion]

Ecoutez, cette solution me convient parfaitement, en plus de fonctionner Merci d'avoir prit le temps de bidouiller ce petit code ! J'ai une petite question : si je souhaite le réutiliser pour une autre partie du forum, que dois-je changer ? Encore merci de votre temps !

Edit : je remarque d'ailleurs que l'icone est redimensionné automatique, est-ce possible d'empêcher cela s'il vous plait ? ^^

[Toryudo]

Voilà, avec le code suivant, il ne sera plus redimensionné :

Code:

var imageFiches = 'https://2img.net/i/fa/i/smiles/icon_biggrin.png';
var texteFiches = 'Fiches Personnages';

$(function(){
   if(document.location.pathname.includes('f2-')){
      document.querySelectorAll('.forumbg:not(.announcement) .row .icon').forEach(function(fiches){
         fiches.style.setProperty('background-image', 'url(' + imageFiches + ')');
         fiches.style.setProperty('background-size', 'auto', 'important');
      });

      let fichesPerso = document.createElement('li');
      fichesPerso.innerText = texteFiches;

      let fichesPersoImg = document.createElement('img');
      fichesPersoImg.src = imageFiches;
      fichesPersoImg.alt = texteFiches;
      fichesPersoImg.style.setProperty('width', 'auto');
      fichesPersoImg.style.setProperty('height', 'auto');
      
      fichesPerso.prepend(fichesPersoImg);
      document.getElementById('picture_legend').appendChild(fichesPerso);
   }
});

Pour le faire fonctionner autre part, il faudra adapter le test suivant :

Code:

document.location.pathname.includes('f2-')

Ceci signifie que le script ne doit s'exécuter que sur la page f2-

Si vous voulez qu'il fonctionne sur la page f2- et sur la page f57- par exemple, vous ajoutez ceci juste après (deux barres || puis le nouveau test) :

Code:

|| document.location.pathname.includes('f57-')

Ce qui nous donnerait :

Code:

if(document.location.pathname.includes('f2-') || document.location.pathname.includes('f57-')){


Ainsi de suite, vous pouvez ajouter autant de forum que vous désirez !

[Tricorion]

Merci beaucoup, ça fonctionne ! Et merci également pour les explications Je vais marquer ce sujet comme étant résolu !

Bonne nuit à vous