[AwesomeBB] Problème avec l'intégration d'un bouton mode sombre

[orpheus]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://anima-news.superforum.fr

Description du problème

Bonsoir à tous !

Voila, après avoir suivi les instructions sur ce topic pour l'intégration d'un mode sombre, je rencontre un soucis avec le bouton du mode sombre qui s'affiche sous forme de coche et non pas sous forme d'interrupteur gauche/droite.



Si quelqu'un a une idée de comment résoudre ce problème car à part ça, le mode sombre semble bien fonctionner.

Merci.

[MlleAlys]

Bonjour,
Il semble que ce soit le css de mise en forme de l'interrupteur qui n'est pas pris en compte :
Soit il est mal installé, soit vous avez une erreur plus haut dans votre feuille de style css qui fait que tout ce qui suit n'est pas pris en compte.

Le code est à copier/coller dans Affichage > couleurs & css > onglet feuille de style css.

Code:

/***************************** SELECTEUR DARKMODE **************/
#modeselect {
  color: white;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 20px;
  vertical-align: middle;
  margin: 0 5px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 2px;
  background-color: #c7c7c7;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #3a474e;
  outline: 1pt solid white;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  background:white;
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/************************************* FIN SELECTEUR DARKMODE *************************/

[orpheus]

Bonjour MlleAlys

Avec le nouveau CSS, je confirme qu'effectivement, le bouton apparaît, par contre, le mode sombre ne semble pas s'activer (dans le sens ou même si je met le curseur sur on, il semble rester en mode off).

Pour info, j'avais utilisé le CSS modifié de Zlork :

voir le code:

Quant à ma feuille de description, si cela peut vous aider à mieux comprendre, la voici dans son intégralité :

Code:

.Description_none{display:none;/**ont efface la description**/}

.action-bar-top{
display:none !important;
}

ul.action-bar.action-bar-bottom{display:none;}

div.forum-header {
    border-radius: 10px 10px 0 0;
}


a[href*="/register"] {
    color: #fff;
    background-color: #DC143C;
    box-shadow: none;
}

.posts-description h3 {
  width: auto;
  margin-right: 5px;
}
 
.topic-description {
  float: left;
}
 
.without-after-element::after {
  display:none;
}


.global-stat-bar {
  display: flex;
  width: 100%;
  text-align: center;
  background: #1f156e;
  font-size: 1rem;
}
.global-stat-bar > div {
  flex: 1 1 auto;
  color: white;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.global-stat-bar > div > span {
  border-radius: 0.3rem;
  background: white;
  color: #1f156e;
  padding: 0.3rem;
  margin-right: 0.3rem;
}

/* on masque les statistiques de la version AwesomeBB */
#forum-statistics {
    display: none;
}
/* on passe le footer en transparent */
footer {
    background-color: transparent;
}

.post-content a, .block-content > a {
  text-decoration: none;
}

/***************************** SELECTEUR DARKMODE **************/
#modeselect {
  color: white;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
 
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 20px;
  vertical-align: middle;
  margin: 0 5px;
}
 
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 2px;
  background-color: #c7c7c7;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}
 
input:checked + .slider {
  background-color: #3a474e;
  outline: 1pt solid white;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
 
input:checked + .slider:before {
  background:white;
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/************************************* FIN SELECTEUR DARKMODE *************************/

Merci en tout cas pour ton aide

[MlleAlys]

Il faut mettre les deux css.
Il y en a un pour l'apparence de l'interrupteur, et un autre pour l'apparence sombre du forum.

[orpheus]

Donc si j'ai bien tout compris, il faut que j'utilise le code que tu m'as donné et mettre à la suite celui de Zlork ?
Si oui, je viens de tester et je confirme que ça a effectivement résolu mon problème !

Avant de classer le sujet en résolu, j'ai une dernière question à poser (rien à voir avec le bouton mais toujours en lien avec le mode sombre).
Voila, le mode sombre change bien les couleurs des catégories des forums sur l'index, en revanche, celui-ci n'agit pas sur la barre des statistiques.

voir l'exemple:

Est-ce qu'il y aurait moyen que le mode sombre change également la couleur de la barre des statistiques ?

De mémoire (je suis plus tout à fait sur), j'avais utilisé ce tutoriel pour modifier ma barre des statistiques si ça peut aider

[MlleAlys]

Oui, peu importe l'ordre mais il faut mettre les deux ^^

Celui que je viens de donner qui commence par "SELECTEUR DARKMODE", est exactement le même que celui qui commence par "DEBUT INTERRUPTEUR DARKMODE" dans le message de Zlork : Il permet de régler l'apparence de l'interrupteur.

Dans le message de Zlork, celui qui commence par "CSS DARKMODE" contient quant à lui tous les changements de couleurs à appliquer au forum en mode sombre.

L'ordre des deux n'est pas important (on peut repeindre la chambre en bleu d'abord puis ensuite le bureau en vert, ou bien le bureau en vert d'abord puis ensuite la chambre en bleu, cela ne changera pas le résultat final )


Pour changer la couleur de la barre des statistiques en mode sombre, actuellement bleue, vous pouvez ajouter dans la partie "CSS DARKMODE" le code css suivant :

Code:


.darkmode .global-stat-bar {
  background: #172329;
}


J'ai mis la même couleur que les autres en-têtes, mais vous pouvez la modifier en changeant le code #172329 par celui de la couleur que vous souhaitez.

[orpheus]

Merci beaucoup pour toutes tes explications détaillées ainsi que pour le nouveau code qui a bien résolu mon problème sur la barre des statistiques !
Je passe le sujet en résolu