Un mode sombre pour AwesomeBB

[Invité]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://jeuxvideo-club.forumactif.com/

Description du problème

Bonjour,

Je souhaite intégrer un mode sombre sur mon forum.

Je n'ai pas trouvé un tutoriel ou des codes déjà "toute faites" pour pouvoir permettre aux membres de choisir entre le mode clair (normal) et le mode sombre. Oui je vais être honnête avec vous, le codage, ce n'est pas vraiment mon truc.

Le thème de forum à part la couleur des catégories que j'ai mis en noir au lieu de bleu, je n'ai rien changé.

Est-ce que c'est possible ? Si oui, comment ?

Merci par avance de votre aide

[Invité]

Je relance.

Quelqu'un a pu trouver une solution ? Si ce n'est pas possible, ce n'est pas grave....

[Invité]

N'ayant toujours pas de réponse au bout de 3 jours, je relance à nouveau

[Invité]

Je reviens vers vous.

Mais cette fois, ce n'est pas une simple relance. Je ne comprends pas tout mais j'ai cherché.

J'ai utilisé le tutoriel pour le sélecteur de style : https://forum.forumactif.com/t308631-selecteur-de-style

Mais je bloque complètement sur le CSS.

J'ai trouvé un thème sombre, déjà créé : https://help.forumotion.com/t158803-awesomebb-midnightawe#1104842

Comment je peux avoir le CSS ? Ou comment je peux intégrer ce thème dans le sélecteur de style ?

[MlleAlys]

Bonjour,
Il me semble que le thème sombre choisi est un thème complet pour forum avec les éléments du panneau d'administration couleurs, images, css. Il n'est pas fait pour être installé seulement en css. Je ne pense pas qu'il soit possible de switcher d'un thème à l'autre à l'aide du sélecteur, le panneau ne permettant qu'un seul thème à la fois, donc il vaudrait mieux un thème sombre uniquement en css.
Par exemple, voici un css permettant d'obtenir en majorité les mêmes couleurs que le thème que vous avez choisi (j'ai fait rapidement avec les pages principales, il risque de manquer des choses et de devoir compléter) :

Code:

body {
  background-color: #2c3e50;
  color: #f5f7fa;
}
.forum-header, .posts-header {
  background-color: #8067b7;
}
.forum-section, .posts-section {
  background-color: #34495e;
}
.block-topics .block-topics-posts i, .block-topics .block-topics-views i, .forum-lastpost-header i, .forum-statistics-header i, .posts-lastpost-header i, .posts-statistics-header i, .posts-lastpost i, .forum-lastpost-author i, .forum-lastpost-location i, .forum-lastpost-time i, .posts-lastpost-author i, .posts-lastpost-time i, select, .input, input, .sceditor-container iframe, .sceditor-container textarea, .inputbox, a, a:visited, .forum-description h3, .posts-description h3 {
  color: white;
}
.forum-description p, .posts-description p, .forum-statistics-posts span, .forum-statistics-topics span, .posts-statistics-replies span, .posts-statistics-views span, .profile-advanced-stats dt span[style*="536482"] {
  color: #e0d6d6;
}
#tabs ul, .tabs ul, .box-body, .block .block-content, .block-subtle, .post, .post-aside, .panel, .post-section, .fb-or-text, .mod-news, .mod-news-footer, .social_login_group .fb-or-text, #chatbox_contextmenu, #help-button, .fontbutton, #header-user img, .avatar-big img, .avatar-default img, .avatar-mini img, .cb-avatar img, .mod-login-avatar img, input, .forumline tbody tr, .table1 tbody tr, .calendar-cell {
  background-color: #34495E;
}
.select-wrap select:hover, .jumpbox-wrap select:hover, .quickmod-wrap select:hover {
  border-color: #8067b7;
}
.block-market .market-item-price, .block .block-secondary-content, .block .sub-head, .block .block-footer, .post-aside, .attachbox, .box-foot, .post-footer, .sceditor-group, .posts-lastpost, .quick-reply .textarea, .jumpbox-wrap select, .quickmod-wrap select, .select-wrap select, #divcolor, #divsmilies, #help-button, #submit_button, .format-message+label, #tabs li:hover, .tabs li:hover {
  background-color: #2c3e50!important;
  border-color: #2c3e50;
  color: #fff;
}
.fa_like_list, .fa_dislike_list, .option_voters_list, blockquote cite {
  color: rgba(255,255,255,0.6);
}
dl.post-author-details span.label span, #block-online .headline a {
  color: white !important;
}
blockquote {
  background: #2c3e50;
}

[Invité]

Enfin du concret, je suis super content ! Merci.

Je vais regarder les couleurs de base et je reviendrai vers vous pour le reste

[Invité]

Je reviens vers vous.

D'abord merci beaucoup @MlleAlys

J'ai modifié une ou deux couleurs :

Code:

body {
  background-color: #2c3e50;
  color: #f5f7fa;
}
.forum-header, .posts-header {
  background-color: #172329;
}
.forum-section, .posts-section {
  background-color: #34495E;
}
.block-topics .block-topics-posts i, .block-topics .block-topics-views i, .forum-lastpost-header i, .forum-statistics-header i, .posts-lastpost-header i, .posts-statistics-header i, .posts-lastpost i, .forum-lastpost-author i, .forum-lastpost-location i, .forum-lastpost-time i, .posts-lastpost-author i, .posts-lastpost-time i, select, .input, input, .sceditor-container iframe, .sceditor-container textarea, .inputbox, a, a:visited, .forum-description h3, .posts-description h3 {
  color: white;
}
.forum-description p, .posts-description p, .forum-statistics-posts span, .forum-statistics-topics span, .posts-statistics-replies span, .posts-statistics-views span, .profile-advanced-stats dt span[style*="536482"] {
  color: white;
}
#tabs ul, .tabs ul, .box-body, .block .block-content, .block-subtle, .post, .post-aside, .panel, .post-section, .fb-or-text, .mod-news, .mod-news-footer, .social_login_group .fb-or-text, #chatbox_contextmenu, #help-button, .fontbutton, #header-user img, .avatar-big img, .avatar-default img, .avatar-mini img, .cb-avatar img, .mod-login-avatar img, input, .forumline tbody tr, .table1 tbody tr, .calendar-cell {
  background-color: #34495E;
}
.select-wrap select:hover, .jumpbox-wrap select:hover, .quickmod-wrap select:hover {
  border-color: #172329;
}
.block-market .market-item-price, .block .block-secondary-content, .block .sub-head, .block .block-footer, .post-aside, .attachbox, .box-foot, .post-footer, .sceditor-group, .posts-lastpost, .quick-reply .textarea, .jumpbox-wrap select, .quickmod-wrap select, .select-wrap select, #divcolor, #divsmilies, #help-button, #submit_button, .format-message+label, #tabs li:hover, .tabs li:hover {
  background-color: #2c3e50!important;
  border-color: #2c3e50;
  color: #fff;
}
.fa_like_list, .fa_dislike_list, .option_voters_list, blockquote cite {
  color: rgba(255,255,255,0.6);
}
dl.post-author-details span.label span, #block-online .headline a {
  color: white !important;
}
blockquote {
  background: #2c3e50;
}

Bien sûr, il y a encore pas mal de choses à compléter. D'abord les plus gros morceaux. Je vous ai fais quelques captures d'écran



Tous les boutons sont en noir, y compris ceux de la modération. Je ne sais pas si c'est possible mais j'aimerais pouvoir les voir. En gris ou blanc de préférence...

Sur la réponse rapide, j'aimerais changer la couleur du cadre et aussi le fond du message, j'aimerais qu'il soit en bleu et non blanc, le même que :



Les balises, si possible le fond en gris/blanc et le bouton prévisualiser pareil que les autres, en gris ou blanc de préférence.

Et la couleur de texte en blanc, quand on tape notre message.

Voilà pour commencer.

Ne vous inquiétez pas pour les couleurs, je peux changer si besoin. C'est surtout les codes que j'ai besoin d'aide. Je suis un vrai débutant là-dessus.

Merci beaucoup de votre aide par avance !

[MlleAlys]

Essayez le css ainsi :

Code:

body {
  background-color: #2c3e50;
  color: #f5f7fa;
}
.forum-header, .posts-header {
  background-color: #172329;
}
.forum-section, .posts-section {
  background-color: #34495E;
}
.block-topics .block-topics-posts i, .block-topics .block-topics-views i, .forum-lastpost-header i, .forum-statistics-header i, .posts-lastpost-header i, .posts-statistics-header i, .posts-lastpost i, .forum-lastpost-author i, .forum-lastpost-location i, .forum-lastpost-time i, .posts-lastpost-author i, .posts-lastpost-time i, select, .input, input, .sceditor-container iframe, .sceditor-container textarea, .inputbox, a, a:visited, .forum-description h3, .posts-description h3 {
  color: white;
}
.forum-description p, .posts-description p, .forum-statistics-posts span, .forum-statistics-topics span, .posts-statistics-replies span, .posts-statistics-views span, .profile-advanced-stats dt span[style*="536482"] {
  color: white;
}
#tabs ul, .tabs ul, .box-body, .block .block-content, .block-subtle, .post, .post-aside, .panel, .post-section, .fb-or-text, .mod-news, .mod-news-footer, .social_login_group .fb-or-text, #chatbox_contextmenu, #help-button, .fontbutton, #header-user img, .avatar-big img, .avatar-default img, .avatar-mini img, .cb-avatar img, .mod-login-avatar img, input, .forumline tbody tr, .table1 tbody tr, .calendar-cell {
  background-color: #34495E;
}
.select-wrap select:hover, .jumpbox-wrap select:hover, .quickmod-wrap select:hover {
  border-color: #172329;
}
.block-market .market-item-price, .block .block-secondary-content, .block .sub-head, .block .block-footer, .post-aside, .attachbox, .box-foot, .post-footer, .posts-lastpost, .quick-reply .textarea, .jumpbox-wrap select, .quickmod-wrap select, .select-wrap select, #divcolor, #divsmilies, #help-button, #submit_button, .format-message+label, #tabs li:hover, .tabs li:hover {
  background-color: #2c3e50!important;
  border-color: #2c3e50;
  color: #fff;
}
.fa_like_list, .fa_dislike_list, .option_voters_list, blockquote cite {
  color: rgba(255,255,255,0.6);
}
dl.post-author-details span.label span, #block-online .headline a {
  color: white !important;
}
blockquote {
  background: #2c3e50;
}

.btn, input[type="submit"], input[type="button"] {
  background: white;
  color: black !important;
}
.quick-reply .quick-reply-btn {
  background: none;
  color: white !important;
}
.sceditor-container textarea {
  color: white !important;
}
.quick-reply-textarea-wrap .sceditor-container {
  border: none !important;
}
.quick-reply .sceditor-button {
  background: white;
}
.quick-reply-textarea-wrap .sceditor-container iframe, .quick-reply-textarea-wrap .sceditor-container textarea {
  background-color: unset !important;
  color: white;
}

[Invité]

Essayez le css ainsi :

Super content. Parce que je suis très satisfait du résultat et parce qu'on avance !

Je continue. Je m'excuse de faire petit à petit mais j'essaye comprendre un minimum ce qu'on fait

Que ce soit dans les messages rapides ou messages classiques (répondre ou créer un sujet), j'écris en noir (pas de problème avec les citations ou code). Et j'aimerais que ce soit en blanc



Ensuite, il reste encore des morceaux à corriger avant de passer aux petits détails :

Le profil.

Voir profil :



Dans modifier profil.





J'ai installé un module Evenement. Le seul que j'installerai et j'ai un problème :



Les liens et l'écriture sont en blanc sur un fond blanc....

Merci beaucoup par avance, encore une fois !

[MlleAlys]

Pour le profil et les évènements, ajoutez cela à votre css :

Code:

#profile-tab-field-profil dt span, #profile-menu a, .profile-field label span, .cp-sidebar a {
  color: white !important;
}
.EV_List .EV_Item {
  background: #34495E;
}

Pour la couleur du texte dans l'éditeur, pardon j'ai travaillé en mode source et j'ai oublié le mode wysiwyg. Pour ce mode, il faut passer par un javascript :
- dans modules > javascripts
- vérifiez que l'option "activer la gestion des javascripts" est cochée sur OUI
- créez un nouveau code javascript :
- nom : ce que vous souhaitez (par exemple "éditeur wysiwyg")
- placement : sur toutes les pages
- code :

Code:

$(function(){
  $(function(){
    $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{color:#fff!important;} blockquote,code{color:black;}</style>");
  });
});

- validez.

Cependant, ce code pour l'instant s'active automatiquement, peut importe mode clair ou sombre, il faudra le modifier en fonction de la façon dont vous allez installer le css.

[Invité]

Cependant, ce code pour l'instant s'active automatiquement, peut importe mode clair ou sombre, il faudra le modifier en fonction de la façon dont vous allez installer le css.

OK. Avant de répondre à cette question (vu qu'on passe au Javascript), je voudrais régler quelques petits détails sur le graphique encore.



Quand je passe la souris sur "Sélectionner un forum" ou "Sélctionner", je voudrais que le cadre soit blanc



Quand je sélectionne un événement, en haut à gauche, il y a la date. J'aimerais si possible l'écriture en noir. (ou un fond d'une autre couleur)

Et pour finir mais c'est peut-être plus complexe voire impossible :



Les couleurs bleu, rouge, vert, etc.... (ce sont des couleurs qu'on a sur la balise : ⁾

Est-ce qu'il est possible de changer automatiquement selon le thème ?

Merci par avance !

[MlleAlys]

Couleur de la bordure des sélections :
Dans le css, changez cette couleur-ci pour du blanc :

Code:

.select-wrap select:hover, .jumpbox-wrap select:hover, .quickmod-wrap select:hover {
  border-color: #172329;
}

Pour la couleur des dates des évènements en noir, ajoutez le code suivant :

Code:

.date-block {
  color: black;
}

Pour ce qui est de changer les couleurs.... je suppose que c'est faisable en css, avec des codes de ce type :

Code:

*[style="color:#004599"] {   /*couleur d origine*/
  color: #5ea7ff !important;    /*nouvelle couleur*/
}

A copier/coller et adapter pour chaque couleur à remplacer... Sûrement y-a-t-il une façon plus "compacte" en javascript mais ça s'éloigne de mes compétences ^^"

[Invité]

Super !

Je voudrais revenir sur deux choses, si ça ne dérange pas parce que j'ai beaucoup embêté aujourd'hui

Pour la couleur du texte dans l'éditeur, pardon j'ai travaillé en mode source et j'ai oublié le mode wysiwyg. Pour ce mode, il faut passer par un javascript :
- dans modules > javascripts
- vérifiez que l'option "activer la gestion des javascripts" est cochée sur OUI
- créez un nouveau code javascript :
- nom : ce que vous souhaitez (par exemple "éditeur wysiwyg")
- placement : sur toutes les pages
- code :

Code:

$(function(){
  $(function(){
    $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{color:#fff!important;} blockquote,code{color:black;}</style>");
  });
});

- validez.

Cependant, ce code pour l'instant s'active automatiquement, peut importe mode clair ou sombre, il faudra le modifier en fonction de la façon dont vous allez installer le css.

Oui, c'est gênant pour ceux qui utilise le mode clair (par défault) :/ J'ai suivi le tutoriel.

J'ai mis un Javascript pour le selecteur de style

Code:

$("head").append('<link rel="stylesheet" type="text/css" id="tstyle" />');
 
if (my_getcookie("sstyle")) {
    $("#tstyle").attr("href", my_getcookie('sstyle'));
}
 
function addstyle(nom, lien) {
    $("#sstyle").append('<option value="' + lien + '">' + nom + '</option>');
}
 
function changestyle(cssurl) {
    var chatbox = true;
    my_setcookie('sstyle', $('#tstyle')[0].href = cssurl, 1, 0);
    if(chatbox == true) {
        $('#frame_chatbox').attr('data', $('#frame_chatbox').attr('data'));
    }
}
 
$(function() {
  $(function() {
      var version = 'awesomebb';
      var mobile = false;
      var selectors = {
          'phpbb2': 'table:has(a.mainmenu[href^="/login"]) + div',
          'phpbb3': '#search-box',
          'punbb': '#pun-visit ul',
          'invision': '#submenu li a',
          'modernbb': 'ul.linklist.top a',
          'awesomebb': '#main-menu a',
          'mobilemodern': 'main'
      };
      if ($("#mpage-body-modern").length) {
          version = 'mobilemodern';
          if(mobile == false) {
              $("#tstyle").remove();
              return;
          }
      }
 
      $("iframe[name=smilies]").load(function() {
          $("iframe[name=smilies]").contents().find("head").append($("#tstyle").clone()).append('<style type="text/css">body{margin:0!important;}</style>');
      });
 
      $(selectors[version]).first().before('<select id="sstyle" onChange="changestyle(this.value);"><option value="">MODE CLAIR</option></select>');
 
    addstyle("MODE SOMBRE (test)", "LIEN");
 
      if (my_getcookie("sstyle")) {
          $('#sstyle option[value="' + my_getcookie("sstyle") + '"]').attr("selected", "selected");
      }
 
  });
});

Le CSS complet du mode sombre :

Code:

body {
  background-color: #2c3e50;
  color: #f5f7fa;
}
.forum-header, .posts-header {
  background-color: #172329;
}
.forum-section, .posts-section {
  background-color: #34495E;
}
.block-topics .block-topics-posts i, .block-topics .block-topics-views i, .forum-lastpost-header i, .forum-statistics-header i, .posts-lastpost-header i, .posts-statistics-header i, .posts-lastpost i, .forum-lastpost-author i, .forum-lastpost-location i, .forum-lastpost-time i, .posts-lastpost-author i, .posts-lastpost-time i, select, .input, input, .sceditor-container iframe, .sceditor-container textarea, .inputbox, a, a:visited, .forum-description h3, .posts-description h3 {
  color: white;
}
.forum-description p, .posts-description p, .forum-statistics-posts span, .forum-statistics-topics span, .posts-statistics-replies span, .posts-statistics-views span, .profile-advanced-stats dt span[style*="536482"] {
  color: white;
}
#tabs ul, .tabs ul, .box-body, .block .block-content, .block-subtle, .post, .post-aside, .panel, .post-section, .fb-or-text, .mod-news, .mod-news-footer, .social_login_group .fb-or-text, #chatbox_contextmenu, #help-button, .fontbutton, #header-user img, .avatar-big img, .avatar-default img, .avatar-mini img, .cb-avatar img, .mod-login-avatar img, input, .forumline tbody tr, .table1 tbody tr, .calendar-cell {
  background-color: #34495E;
}
.select-wrap select:hover, .jumpbox-wrap select:hover, .quickmod-wrap select:hover {
  border-color: white;
}
.block-market .market-item-price, .block .block-secondary-content, .block .sub-head, .block .block-footer, .post-aside, .attachbox, .box-foot, .post-footer, .posts-lastpost, .quick-reply .textarea, .jumpbox-wrap select, .quickmod-wrap select, .select-wrap select, #divcolor, #divsmilies, #help-button, #submit_button, .format-message+label, #tabs li:hover, .tabs li:hover {
  background-color: #2c3e50!important;
  border-color: #2c3e50;
  color: #fff;
}
.fa_like_list, .fa_dislike_list, .option_voters_list, blockquote cite {
  color: rgba(255,255,255,0.6);
}
dl.post-author-details span.label span, #block-online .headline a {
  color: white !important;
}
blockquote {
  background: #2c3e50;
}
 
.btn, input[type="submit"], input[type="button"] {
  background: white;
  color: black !important;
}
.quick-reply .quick-reply-btn {
  background: none;
  color: white !important;
}
.sceditor-container textarea {
  color: white !important;
}
.quick-reply-textarea-wrap .sceditor-container {
  border: none !important;
}
.quick-reply .sceditor-button {
  background: white;
}
.quick-reply-textarea-wrap .sceditor-container iframe, .quick-reply-textarea-wrap .sceditor-container textarea {
  background-color: unset !important;
  color: white;
}

#profile-tab-field-profil dt span, #profile-menu a, .profile-field label span, .cp-sidebar a {
  color: white !important;
}
.EV_List .EV_Item {
  background: #34495E;
}

.date-block {
  color: black;
}

Et le CSS à mettre dans FA :

Code:


#sstyle {
  position: relative;
  left: 32px;
  width: auto;
  color: #fff;
  border-color: #fff;
  width: 235px;
  max-width: 235px;
}
#sstyle option {
  color: initial;
}

Deuxième chose :

Pour ce qui est de changer les couleurs.... je suppose que c'est faisable en css, avec des codes de ce type :

Je veux bien essayé mais il faut mettre ça où ? Dans le CSS de FA ou le CSS du mode sombre ?

[MlleAlys]

Je veux bien essayé mais il faut mettre ça où ? Dans le CSS de FA ou le CSS du mode sombre ?

Dans le css du mode sombre ^^


Pour ce qui est du reste.... Je vais peut être passer la main !

Ici le tutoriel vous propose d'héberger votre feuille css via Archive-Host avant d'indiquer le lien de celle-ci dans le javascript : Lors du choix du mode sombre, le lien vers la feuille de style sera automatiquement ajoutée à la page, et votre css mode sombre s'appliquera donc.
Je dois avouer que la dernière fois que j'ai touché à un sélecteur de style, il ne liait pas une feuille de style hébergée ailleurs, mais il se contentait de modifier la class du body, et donc tous mes codes css passaient par la feuille de style du forum... Je ne peux donc pas tellement vous aider pour ce côté hébergement ^^"

Quant au javascript pour l'éditeur wysiwyg, le javascript n'est pas mon fort... En théorie, je suppose qu'il "suffit" de récupérer un marqueur du thème sombre (le cookie ? autre chose ?) pour le mettre en condition de déclenchement de la fonction... Relativement simple, mais en pratique, je ne maîtrise pas hyper bien le javascript, et je n'ai pas vraiment assez de temps ni de courage pour me pencher dessus.... Et je pense que quelqu'un de plus compétent que moi pourra le faire bien plus efficacement et rapidement que moi ! ^^"

[Invité]

Dans le css du mode sombre ^^

Et ça marche ! Merci beaucoup, je vais faire tout ça demain !

Pour ce qui est du reste.... Je vais peut être passer la main !

---

Quant au javascript pour l'éditeur wysiwyg, le javascript n'est pas mon fort... En théorie, je suppose qu'il "suffit" de récupérer un marqueur du thème sombre (le cookie ? autre chose ?) pour le mettre en condition de déclenchement de la fonction... Relativement simple, mais en pratique, je ne maîtrise pas hyper bien le javascript, et je n'ai pas vraiment assez de temps ni de courage pour me pencher dessus.... Et je pense que quelqu'un de plus compétent que moi pourra le faire bien plus efficacement et rapidement que moi ! ^^"

Je ne sais pas si ça peut servir

Mais sur Mobile et Chrome, ça écrit en blanc..... Sur Firefox ou Edge, ça écrit en noir....

[Invité]

Bonjour,

Je m'excuse pour le double post mais je viens de rencontrer un bug :

Quand je navigue sur mobile, une partie du tableau (uniquement en page d’accueil) passe en fond blanc/gris. Est-il possible de corriger s'il vous plait ?



Et dans les messages privées (boite de réception, messages envoyés, boîte d'envoi et archives) :



Les cases sont en blancs alors qu'elles devraient être de la même couleur que les autres (comme celle juste au dessus).
Et le bouton à côté et tout blanc. J'aimerais l'écriture "Nouveau" et le petit crayon en noir si possible

Et enfin, je voudrais savoir si on peut supprimer complètement la bannière (pas la barre de navigation) ?

Merci par avance

[MlleAlys]

Pour le fond blanc apparaissant en navigation mobile, j'ai ajouté ce code dans le css du mode sombre :

Code:

 @media (max-width: 750px) {
    .forum-lastpost, .posts-lastpost {
      background: none;
    }
  }

Pour le bouton blanc dans les messages privés, j'ai complété le css déjà présent :
.cp-sidebar a
en :
.cp-sidebar a:not(.btn)


Pour la liste des mp blanche, j'ai complété le css déjà présent :
.forum-section, .posts-section
en :
.forum-section, .posts-section, .notification-row


Pour supprimer la bannière, si vous souhaitez faire disparaitre tout le bloc, titre du forum compris, vous pouvez ajouter ce code css :

Code:

#header-banner {
  display: none;
}

Si vous souhaitez seulement supprimer l'image de fond et garder le titre du forum :

Code:

#header-banner {
  background: no-repeat;
}

Sinon, j'ai retrouvé le vieux code dont je parlais pour choisir un mode sombre ou clair : Il fonctionne non pas avec un menu déroulant mais avec un "interrupteur" (donc seulement deux styles possible, contrairement à celui proposé par forumactif), et ajoute simplement une classe au body : tout le css du mode sombre est à mettre dans le css habituel du forum en précédant les sélecteur par cette class.
(ce qui évite de devoir héberger la feuille de style ailleurs, mais charge un peu plus celle du forum déjà parfois bien fournie).
Le code est vieux et sans doute pas optimal, mais a priori fonctionnel.

[Invité]

Pour le fond blanc apparaissant en navigation mobile, j'ai ajouté ce code dans le css du mode sombre :

Code:

 @media (max-width: 750px) {
    .forum-lastpost, .posts-lastpost {
      background: none;
    }
  }

Cela a été corrigé, merci !

Pour le bouton blanc dans les messages privés, j'ai complété le css déjà présent :
.cp-sidebar a
en :
.cp-sidebar a:not(.btn)


Pour la liste des mp blanche, j'ai complété le css déjà présent :
.forum-section, .posts-section
en :
.forum-section, .posts-section, .notification-row


Pour supprimer la bannière, si vous souhaitez faire disparaitre tout le bloc, titre du forum compris, vous pouvez ajouter ce code css :

Code:

#header-banner {
  display: none;
}

Si vous souhaitez seulement supprimer l'image de fond et garder le titre du forum :

Code:

#header-banner {
  background: no-repeat;
}

J'ai un problème. Je ne sais pas si c'est dû à la suppression de la bannière mais pour les MP, j'ai ça :



C'est collé à la barre de navigation.

Les autres pages, c'est la petite publicité qui colle à la barre de navigation mais sinon, c'est OK. Peut-être mettre un espace entre la barre de navigation et le reste du forum ?

Puis le titre du MP est noir. De même pour le menu à côté, quand on clique sur un des 4 onglets, ça devrait s'écrire en blanc et non noir

Sinon, j'ai retrouvé le vieux code dont je parlais pour choisir un mode sombre ou clair : Il fonctionne non pas avec un menu déroulant mais avec un "interrupteur" (donc seulement deux styles possible, contrairement à celui proposé par forumactif), et ajoute simplement une classe au body : tout le css du mode sombre est à mettre dans le css habituel du forum en précédant les sélecteur par cette class.
(ce qui évite de devoir héberger la feuille de style ailleurs, mais charge un peu plus celle du forum déjà parfois bien fournie).
Le code est vieux et sans doute pas optimal, mais a priori fonctionnel.

Je suis très intéressé ! Mais il faudra m'expliquer comment faire

[MlleAlys]

Mince, c'est bien suite à la suppression de la bannière, je n'avais pas pensé aux marges.
Remplacez le code précédent :

Code:

#header-banner {
  display: none;
}

par celui-ci :

Code:

#header-banner {
  height: 0;
  visibility: hidden;
}

Et ça devrait être bon ^^

Pour le menu à côté des mp, j'ajoute le sélecteur "#privmsgs-menu li" à la liste de tous ceux auxquels ont a déjà appliqué "color: white;".
Pour le titre des mp eux même, c'est un peu étrange, chez moi ils sont bien blancs  


Pour l'interrupteur jour/nuit sur mon forum test :



Le javascript, à mettre sur toutes les pages, est le suivant

Code:

$(function() {
  if (my_getcookie("cookiemode")) {
    $('body').addClass('darkmode');
  }
});

$(function() {
  $('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
  if (my_getcookie("cookiemode")) {
    $('#modeselect input').prop("checked", true );
  }
});

$(function() {
  $('#modeselect input').on('change', function() {
    $('body').toggleClass('darkmode');
    my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
  });
});

(la première partie applique le thème en mémoire dans le cookie, la deuxième partie insère le bouton dans le menu du forum, la troisième partie applique le thème sélectionné et change le cookie lorsqu'on utilise l'interrupteur)

Le css pour la mise en forme de l'interrupteur, à mettre dans le css du forum :

Code:

/***************************** DEBUT INTERRUPTEUR 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 INTERRUPTEUR DARKMODE *************************/

En thème "nuit", le javascript ajoute la class" darkmode" à la balise "body", c'est à dire à l'ensemble de la page du forum.
A partir de là, il faut modifier votre css pour indiquer au début de chaque élément que c'est seulement dans le cas où la page est en darkmode.
Ce qui donne ce css-ci (que j'ai construit à partir des modifs faites dans ce sujet et qui est actuellement sur mon fo test), à mettre également dans le css de votre forum :

Code:

/*************************** CSS DARKMODE *************************/

body.darkmode {
  background-color: #2c3e50;
  color: #f5f7fa;
}
  
.darkmode .forum-section, .darkmode .posts-section, .darkmode .notification-row {
  background-color: #34495E;
}

.darkmode .forum-header, .darkmode .posts-header {
  background-color: #172329;
}
.darkmode #privmsgs-menu li, .darkmode .block-topics .block-topics-posts i, .darkmode .block-topics .block-topics-views i, .darkmode .forum-lastpost-header i, .darkmode .forum-statistics-header i, .darkmode .posts-lastpost-header i, .darkmode .posts-statistics-header i, .darkmode .posts-lastpost i, .darkmode .forum-lastpost-author i, .darkmode .forum-lastpost-location i, .darkmode .forum-lastpost-time i, .darkmode .posts-lastpost-author i, .darkmode .posts-lastpost-time i, .darkmode select, .darkmode .input, .darkmode input, .darkmode .sceditor-container iframe, .darkmode .sceditor-container textarea, .darkmode .inputbox, .darkmode a, .darkmode a:visited, .darkmode .forum-description h3, .darkmode .posts-description h3 {
  color: white;
}
.darkmode .forum-description p, .darkmode .posts-description p, .darkmode .forum-statistics-posts span, .darkmode .forum-statistics-topics span, .darkmode .posts-statistics-replies span, .darkmode .posts-statistics-views span, .darkmode .profile-advanced-stats dt span[style*="536482"] {
  color: white;
}
.darkmode #tabs ul, .darkmode .tabs ul, .darkmode .box-body, .darkmode .block .block-content, .darkmode .block-subtle, .darkmode .post, .darkmode .post-aside, .darkmode .panel, .darkmode .post-section, .darkmode .fb-or-text, .darkmode .mod-news, .darkmode .mod-news-footer, .darkmode .social_login_group .fb-or-text, .darkmode #chatbox_contextmenu, .darkmode #help-button, .darkmode .fontbutton, .darkmode #header-user img, .darkmode .avatar-big img, .darkmode .avatar-default img, .darkmode .avatar-mini img, .darkmode .cb-avatar img, .darkmode .mod-login-avatar img, .darkmode input, .darkmode .forumline tbody tr, .darkmode .table1 tbody tr, .darkmode .calendar-cell {
  background-color: #34495E;
}
.darkmode .select-wrap select:hover, .darkmode .jumpbox-wrap select:hover, .darkmode .quickmod-wrap select:hover {
  border-color: #172329;
}
.darkmode .block-market .market-item-price, .darkmode .block .block-secondary-content, .darkmode .block .sub-head, .darkmode .block .block-footer, .darkmode .post-aside, .darkmode .attachbox, .darkmode .box-foot, .darkmode .post-footer, .darkmode .posts-lastpost, .darkmode .quick-reply .textarea, .darkmode .jumpbox-wrap select, .darkmode .quickmod-wrap select, .darkmode .select-wrap select, .darkmode #divcolor, .darkmode #divsmilies, .darkmode #help-button, .darkmode #submit_button, .darkmode .format-message+label, .darkmode #tabs li:hover, .darkmode .tabs li:hover {
  background-color: #2c3e50!important;
  border-color: #2c3e50;
  color: #fff;
}
.darkmode .fa_like_list, .darkmode .fa_dislike_list, .darkmode .option_voters_list, .darkmode blockquote cite {
  color: rgba(255,255,255,0.6);
}
.darkmode dl.post-author-details span.label span, .darkmode #block-online .headline a, .darkmode .cp-sidebar a:not(.btn) {
  color: white !important;
}
.darkmode blockquote {
  background: #2c3e50;
}

.darkmode .btn, .darkmode input[type="submit"], .darkmode input[type="button"] {
  background: white;
  color: black !important;
}
.darkmode .quick-reply .quick-reply-btn {
  background: none;
  color: white !important;
}
.darkmode .sceditor-container textarea {
  color: white !important;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container {
  border: none !important;
}
.darkmode .quick-reply .sceditor-button {
  background: white;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container iframe, .darkmode .quick-reply-textarea-wrap .sceditor-container textarea {
  background-color: unset !important;
  color: white;
}
.darkmode #profile-tab-field-profil dt span, .darkmode #profile-menu a, .darkmode .profile-field label span {
  color: white !important;
}
.darkmode .EV_List .EV_Item {
  background: #34495E;
}
.darkmode .select-wrap select:hover, .darkmode .jumpbox-wrap select:hover, .darkmode .quickmod-wrap select:hover {
  border-color: #172329;
}
.darkmode .date-block {
  color: black;
}
.darkmode .block-faq .faq-answer {
  background: #2c3e50;
  border: none;
}


.darkmode *[style="color:#004599"] {  /*couleur d origine*/
  color: #5ea7ff !important;    /*nouvelle couleur*/
}
  
  
  @media (max-width: 750px) {
    .darkmode .forum-lastpost, .darkmode .posts-lastpost {
      background: none;
    }
  }


/***************************** FIN CSS DARKMODE ******************/

Comme je disais, je ne suis pas certaine que ce soit hyper optimisé, mais c'est relativement simple à gérer et a priori ça fonctionne ^^


ET de ce fait avec cette technique, on peut utiliser la même méthode dans le javascript qui modifiait la couleur de l'éditeur :

Code:

$(function(){
  $(function(){
    $(".darkmode .sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{color:#fff!important;} blockquote,code{color:black;}</style>");
  });
});

[Invité]

J'ai testé et ça marche à merveille ! Bien mieux que le script avec la liste déroulante.

Bon, le changement de thème quand on change de page n'est pas invisible, il y a un petit flash blanc qui vient du thème clair mais ce n'est pas trop gênant

J'ai une question. j'ai 13 couleurs à adapter. Faut-il utiliser un script par couleur ? Ou on peut utiliser 13 en un seul ? Si oui, comment ?

Et pour la énième fois, merci beaucoup pour ton aide et ta patience

[MlleAlys]

Pour le petit flash blanc, oui, malheureusement, ça vient du court moment de récupération du cookie et d'application du css, je n'ai aucune idée de s'il est possible d'éviter ça, peut être que quelqu'un de plus doué en javascript saura répondre à cette question... (si solution il y a, je suis preneuse également ! )

Pour les couleurs, si vous voulez modifier chaque couleur spécifiquement par une autre, alors oui, malheureusement en css il faudra autant de code correspondant.
Un javascript pourrait sans doute être plus compact à l'équilibre, je ne sais pas cependant si ça serait intéressant d'un point de vue "lourdeur" de la page... Et pareil que précédemment, pour ce qui est d'écrire des javascripts, je vais laisser le soin à quelqu'un d'autre de répondre ^^"

[Invité]

Pour les couleurs, si vous voulez modifier chaque couleur spécifiquement par une autre, alors oui, malheureusement en css il faudra autant de code correspondant.

Alors, j'ai essayé cet CSS avec cette couleur par exemple :

Code:

.darkmode *[style="color:##660000"] {  /*couleur d origine*/
  color: #a00000 !important;    /*nouvelle couleur*/
}

Et ça ne marche pas

Les couleurs que je souhaite adapter viennent du BBCode :



Je précise car je ne sais pas si ces couleurs viennent du CSS ?

Après s'il faut absolument passer par un script, j'attends s'il y a un expert prêt à m'aider

[MlleAlys]

Il est écrit dans votre code "color:##660000" avec deux "#" dans le code couleur au lieu de un seul.

[Invité]

Il est écrit dans votre code "color:##660000" avec deux "#" dans le code couleur au lieu de un seul.

J'ai bien corrigé et toujours pas

Ca marche chez vous ?

[MlleAlys]

Effectivement, dans les messages, le code correspondant aux couleurs appliquées via l'éditeur est en fait le suivant :

Code:

.darkmode *[color="#660000"] {
  color: #a00000 !important;
}

Le code précédent fonctionnait pour les couleurs des groupes.

[Invité]

Effectivement, dans les messages, le code correspondant aux couleurs appliquées via l'éditeur est en fait le suivant :

Code:

.darkmode *[color="#660000"] {
  color: #a00000 !important;
}

Le code précédent fonctionnait pour les couleurs des groupes.

Toujours pas  

La couleur change bien dans la liste des couleurs BBCode mais pas dans le texte....

[MlleAlys]

Auriez-vous un lien vers le message concerné ?

[Invité]

Auriez-vous un lien vers le message concerné ?

> https://jeuxvideo-club.forumactif.com/

Page d'accueil en haut, juste en dessous de la barre des navigations.

[MlleAlys]

Ah, l'éditeur de la PA n'est pas le même que celui des messages, il faut un code encore différent... ^^"
Voici le code :

Code:

.darkmode *[style="color: rgb(102, 0, 0);"] {
  color: #a00000 !important;
}

En fait, si on réunit les trois versions de ce code qui correspond chaque fois à la même couleur (rouge foncé), on peut les fusionner ainsi, en séparant les différents sélecteurs par une virgule :

Code:

.darkmode *[style="color: rgb(102, 0, 0);"], .darkmode *[style="color:#660000"], .darkmode *[color="#660000"] {
  color: #a00000 !important;
}

[Invité]

Ah, l'éditeur de la PA n'est pas le même que celui des messages, il faut un code encore différent... ^^"
Voici le code :

Code:

.darkmode *[style="color: rgb(102, 0, 0);"] {
  color: #a00000 !important;
}

En fait, si on réunit les trois versions de ce code qui correspond chaque fois à la même couleur (rouge foncé), on peut les fusionner ainsi, en séparant les différents sélecteurs par une virgule :

Code:

.darkmode *[style="color: rgb(102, 0, 0);"], .darkmode *[style="color:#660000"], .darkmode *[color="#660000"] {
  color: #a00000 !important;
}

A première vue, ça a l'air de fonctionner !

Je testerai mieux demain avec tous les couleurs et je vous dis.

Et je vous dirai si le script pour l'écriture en blanc marche ou pas :

Code:

$(function(){  $(function(){    $(".darkmode .sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{color:#fff!important;} blockquote,code{color:black;}</style>");  });});

En attendant, merci beaucoup. On a vraiment fait le plus gros !