Changer le thème du forum avec javascript (8 couleurs)
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Changer le thème du forum avec javascript (8 couleurs)
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
Problème apparu depuis : 31/12/2023
Lien du forum : https://rise-of-the-abyss.forumactif.com/
Description du problème
Bonjour !Je travaille actuellement sur un script qui permettrait de changer de thème pour le forum. Comme un mode sombre / clair mais cette fois-ci, avec huit couleurs différentes. J'ai récemment trouvé un script (voici le tutoriel : https://xebia.com/blog/themed-website-with-multiple-color-schemes-the-easy-way/) qui pourrait me permettre de faire ce que je veux mais j'ai une erreur sur le code, et n'étant pas très doué en javascript je viens solliciter votre aide.
En haut de mon header, j'ai un menu de boutons permettant de choisir le thème voulu. Voici le code HTML du menu :
- Code:
<div class="buttons roa-switch-theme">
<button id="rouge" class="selected"></button>
<button id="orange"></button>
<button id="rose"></button>
<button id="violet"></button>
<button id="bleu"></button>
<button id="vert"></button>
<button id="clair"></button>
<button id="sombre"></button>
</div>
D'après le tuto, lorsqu'on clique sur l'un des boutons, ça lui ajoute une classe "selected" et ça change le schéma appliqué à la div ayant l'id "wrapper". Dans mon cas, la div ayant l'id "wrapper" est la div ayant la classe "main_forum", celle qui englobe tout le forum.
Voilà mon CSS :
- Code:
:root {
--primary: var(--roa-rouge);
--roa-rouge: #86484A;
--roa-orange: #BE7A4F;
--roa-rose: #AB6984;
--roa-violet: #53466A;
--roa-bleu: #3C6F90;
--roa-vert: #5D7363;
--roa-clair: #CEBC81;
--roa-sombre: #4D4D54;
--sombre: #0B0B0B;
--fond-gris: #7A7A7A;
--fond-fonce: #171717;
--couleurBouton: #656565;
}
:root .rouge {
--primary: var(--roa-rouge);
}
:root .orange {
--primary: var(--roa-orange);
}
:root .rose {
--primary: var(--roa-rose);
}
:root .violet {
--primary: var(--roa-violet);
}
:root .bleu {
--primary: var(--roa-bleu);
}
:root .vert {
--primary: var(--roa-vert);
}
:root .clair {
--primary: var(--roa-clair);
}
:root .sombre {
--primary: var(--roa-sombre);
}
Et voici le JS :
- Code:
function selectSchema(schema) {
// Select button and unselect the other button
document.querySelectorAll('button').forEach(el => el.classList.remove('selected'));
document.getElementById(schema).classList.add('selected');
// Set schema class
document.getElementById('wrapper').className = schema;
}
document.getElementById('rouge').addEventListener('click', (e) => {
selectSchema('rouge');
});
document.getElementById('orange').addEventListener('click', (e) => {
selectSchema('orange');
});
document.getElementById('rose').addEventListener('click', (e) => {
selectSchema('rose');
});
Mon problème est que lorsque je clique sur un bouton, le script n'ajoute pas la classe "selected" au bouton et du coup, ça ne change pas le schéma. Même en mettant "background: var(--primary);" aux endroits concernés, rien ne change et je rencontre cette erreur de javascript dans ma console :
99581.js:1 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at 99581.js:1:2157
Je ne sais pas trop comment m'y prendre. De plus, j'aimerais me servir de ce script pour changer plusieurs images sur l'index quand il fonctionnera (l'image de la PA, la rune sur la PA, la bannière du forum et l'image du QEEL), mais si je n'arrive déjà pas à changer la couleur...
Merci d'avance ! ^^
Re: Changer le thème du forum avec javascript (8 couleurs)
Bonjour !
Très souvent, dans les scripts proposés par Forumactif (et dans d'autres scripts déjà chez vous d'après ce que je vois), vous avez ce morceau de code :
Il permet de dire "une fois que toute la page est chargée, alors exécute le code entre "$(function() {" et "});"
C'est indispensable, parce qu'au moment de l'exécution du script (qui se trouve dans le <head>), le id n'existe pas encore puisqu'il se trouve plus loin dans le <body>. Donc si vous corrigez votre script comme ceci, ça devrait fonctionner (en tout cas, ne plus planter) :
Très souvent, dans les scripts proposés par Forumactif (et dans d'autres scripts déjà chez vous d'après ce que je vois), vous avez ce morceau de code :
- Code:
$(function() {
- Code:
});
Il permet de dire "une fois que toute la page est chargée, alors exécute le code entre "$(function() {" et "});"
C'est indispensable, parce qu'au moment de l'exécution du script (qui se trouve dans le <head>), le id n'existe pas encore puisqu'il se trouve plus loin dans le <body>. Donc si vous corrigez votre script comme ceci, ça devrait fonctionner (en tout cas, ne plus planter) :
- Code:
function selectSchema(schema) {
// Select button and unselect the other button
document.querySelectorAll('button').forEach(el => el.classList.remove('selected'));
document.getElementById(schema).classList.add('selected');
// Set schema class
document.getElementById('wrapper').className = schema;
}
$(function() {
document.getElementById('rouge').addEventListener('click', (e) => {
selectSchema('rouge');
});
document.getElementById('orange').addEventListener('click', (e) => {
selectSchema('orange');
});
document.getElementById('rose').addEventListener('click', (e) => {
selectSchema('rose');
});
});
Re: Changer le thème du forum avec javascript (8 couleurs)
Oh merci beaucoup! Ça fonctionne. ^^
Je passe le sujet en résolu! Au revoir. ^^
Je passe le sujet en résolu! Au revoir. ^^
Sujets similaires
» Changer également le thème de la boîte de smiley avec le sélecteur de thème
» ModernBB - Soucis avec les couleurs, code CSS, panneau d'admin hélas limité, thème foncé, etc.
» Javascript changer background/fond du forum
» Changer de theme avec possibilité de récupérer l'ancien
» Problème avec l'apparence de mon forum. Changement de thème avec l'actualisation
» ModernBB - Soucis avec les couleurs, code CSS, panneau d'admin hélas limité, thème foncé, etc.
» Javascript changer background/fond du forum
» Changer de theme avec possibilité de récupérer l'ancien
» Problème avec l'apparence de mon forum. Changement de thème avec l'actualisation
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum