Comment ajouter une icône personnalisée pour chaque sous-forum de WoltLab

Bonjour cher visiteur,


Je n'ai malheureusement plus beaucoup le temps de m'occuper du site en ce moment, si le projet de l'animer t'intéresse, n'hésite pas à me contacter ! :)

Actuellement, le forum n'affiche que les mêmes icônes pour chaque sous-forum.


Si vous souhaitez personnaliser cela, il vous suffit de récupérer l'ID du sous-forum concerné, et de décider quelle icône Font-Awesome vous souhaitez mettre à la place de l'actuelle, car WoltLab utilise Font Awesome pour ses icônes. Vous pouvez aussi choisir de mettre une image à la place de l'icône !


Vous pouvez vous rendre sur le site de FontAwesome pour trouver l'icône qui vous plaira : Font Awesome

Comment récupérer l'ID du sous-forum ?

Vous avez deux possibilités pour cela :


1. Lorsque vous êtes sur votre forum, vous pouvez cliquer droit sur le sous-forum concerné et sélectionner "inspecter l'élément", ainsi une fenêtre s'ouvrira et vous pourrez voir l'ID du sous-forum concerné :




Ici vous pouvez voir data-board-id="2", donc l'ID de ce sous-forum est : 2


2. Depuis votre administration WoltLab, rendez-vous dans la gestion des forums (APPS => Forums), en cliquant sur le forum concerné pour le modifier, vous pourrez retrouver l'ID dans l'URL de votre navigateur : /index.php?board-edit/2/


Maintenant que nous connaissons l'ID du sous-forum, nous allons pouvoir personnaliser l'icône !

Comment changer l'icône d'un sous-forum ?

Vous devez donc vous rendre dans le personnalisateur de style de WoltLab, dans votre administration (Personnalisation => Thèmes => Éditez le thème concerné => Paramètres avancés) et ajoutez le code suivant :

CSS
  1. .wbbBoardContainer[data-board-id="2"] > .wbbBoard > .icon::before {
  2. content: "\f0e5";
  3. }

Dans ce code vous pouvez voir qu l'on précise l'ID du sous-forum (2), et on précise aussi le code de l'icône choisi.

Pour trouver le code de l'icône souhaitée, rendez-vous sur le site de FontAwesome, cherchez une icône, cliquez dessus et vous verrez le code "Unicode" à réutiliser, dans notre exemple nous avons choisi l'icône suivante :




Lorsque vous avez choisi l'icône à utiliser et que vous copiez le code "Unicode" et l'entrez dans le code CSS, vous devez absolument penser à ajouter cela juste avant, comme dans notre exemple plus haut : \

Comment mettre une image personnalisée plutôt qu'une icône ?

Pour utiliser des images à la place des icônes, vous devez réutiliser le code CSS suivant :

Code
  1. .wbbBoardContainer[data-board-id="2"] > .wbbBoard > .icon::before {
  2. background-image: url("https://cdn0.iconfinder.com/data/icons/glyphpack/85/info-alt-128.png");
  3. content: "";
  4. display: block;
  5. height: 32px;
  6. width: 32px;
  7. }

Vous devez donc dans ce code, changer l'ID du forum concerné, ainsi que l'URL de l'image à afficher.


Attention, l'image doit avoir les dimensions suivantes : 32px de haut et de large.


Ces changements ne sont apportés qu'aux sous-forums de premier niveau, si vous avez des sous-sous-forums, vous devrez réutiliser les codes suivants :


Pour utiliser une icône Font Awesome :

Code
  1. .wbbSubBoards > li[data-board-id="2"] > .icon::before {
  2. content: "\f0e5";
  3. }


Pour utiliser une image :

Code
  1. .wbbSubBoards > li[data-board-id="2"] > .icon::before {
  2. background-image: url("https://cdn0.iconfinder.com/data/icons/glyphpack/85/info-alt-128.png");
  3. content: "";
  4. display: block;
  5. height: 16px;
  6. width: 16px;
  7. }

Attention, cette fois-ci, l'image doit avoir les dimensions suivantes : 16px de haut et de large.

Comment remplacer uniquement les icônes de base ?

Si vous ne souhaitez pas mettre une icône différente pour chaque forum et sous-forum, mais que vous voulez remplacer les icônes Font Awesome de base, vous devrez alors réutiliser et personnaliser le code CSS suivant :


Code
  1. /* Icône pour les forums déjà lus */
  2. .fa-folder-open-o::before {
  3. content: "\f0e5";
  4. }
  5. /* Icône pour les forums non lus */
  6. .fa-folder-open:before {
  7. content: "\f0e5";
  8. }

Remplacez juste le code Unicode pour l'icône souhaitée comme expliqué plus haut.


Et voilà, vous avez réussi à personnaliser vos icônes, n'hésitez pas à venir sur le forum de support si vous avez besoin d'aide ! :)

    Partager

    Commentaires