Dark Mode

[Robinmc]

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 : Depuis le départ
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour !
Sous la demande d'un utilisateur j'ai mis le bouton dark mode mais j'aimerais le déplacer et le mettre en haut à droite mais je ne sais pas du tout comment faire.

Je vous laisse le code ici

Code:

 
(function() {
          if (/msie/i.test(window.navigator.userAgent)) return; // browser exclusion
          if (!window.fa_night_mode && typeof document.getElementsByTagName('HEAD')[0].style.pointerEvents === 'string') {
     
            window.fa_night_mode = {
              targets : ['page-footer', 'pun-foot', 'ipbwrapper'], // target node that the dimmer will be attached to
       
              // executed when the dimmer is changed
              dimLight : function() {
                var val = +fa_night_mode.dimmer.value;
                fa_night_mode.shade.style.backgroundColor = 'rgba(0, 0, 0, ' + val / 100 + ')';
                fa_night_mode.counter.innerHTML = ( val / 90 * 100 ).toFixed() + '%';
                my_setcookie('fa_night_level', val);
              }
            };
     
            // startup variables
            var dimmer = document.createElement('INPUT'),
                container = document.createElement('DIV'),
                counter = document.createElement('SPAN'),
                cookie = my_getcookie('fa_night_level'); // cookies <3
         
            // set the night shade and styles
            document.write('<style type="text/css">#fa_night_shade { font-size:0; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:999999999; } #fa_night_dimmer { margin:0 6px; vertical-align:middle; cursor:pointer; } #fa_night_container { font-size:12px; font-family:arial, sans-serif; background:#EEE; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style>');
            fa_night_mode.shade = $('<div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>')[0];
     
            fa_night_mode.interval = window.setInterval(function() {
              if (document.body) {
                document.body.appendChild(fa_night_mode.shade);
                window.clearInterval(fa_night_mode.interval);
              }
            }, 1);
     
            // dimmer attributes
            dimmer.id = 'fa_night_dimmer';
            dimmer.type = 'range';
            dimmer.min = 0;
            dimmer.max = 90;
            dimmer.value = cookie || 0;
            dimmer[/trident/i.test(window.navigator.userAgent) ? 'onchange' : 'oninput'] = fa_night_mode.dimLight; // IE11 cannot use oninput
     
            // percentage counter
            counter.id = 'fa_night_counter';
            counter.innerHTML = ( cookie ? cookie / 90 * 100 : 0 ).toFixed() + '%';
     
            // container contents
            container.id = 'fa_night_container';
            container.innerHTML = '<span>Mode nuit:</span>';
            $(container).append([dimmer, counter]);
     
            // cache nodes to the global object
            fa_night_mode.dimmer = dimmer;
            fa_night_mode.counter = counter;
     
     
            // stuff to do when the document is ready
            $(function() {
              // find one ( AND ONLY ONE ) of the targets to attach the dimmer
              for (var i = 0, j = fa_night_mode.targets.length, footer; i < j; i++) {
                footer = document.getElementById(fa_night_mode.targets[i]);
                if (footer) {
                  footer.appendChild(container);
                  break;
                }
              }
       
              if (!footer) {
                document.body.appendChild(container); // fallback if footer cannot be found
              }
            });
          }
        }());
 
 

Merci beaucoup à vous !

[MlleAlys]

Bonjour,
Vous pouvez ajouter dans la feuille de style de votre forum le code css suivant :

Code:

#fa_night_container {
    position: fixed;
    top: 60px;
    right: 10px;
}

Vous pouvez adapter sa position en modifiant les valeurs de top et right (positionnement vertical et horizontal par rapport au bord de la page).

[Robinmc]

Merci beaucoup pour votre aide mais malheureusement le code n'a pas fonctionné

[MlleAlys]

Je ne vois pas le code proposé en inspectant votre forum, l'avez-vous retiré ? Si c'est le cas, pourriez-vous le remettre dans votre feuille de style, le temps de comprendre pourquoi il ne fonctionne pas ?

[Robinmc]

Bonjour !
Excusez moi du temps de réponse !
Le code est bien dans la feuille de style CSS
Il se trouve à la fin
Je me suis peut etre trompée d'endroit ?

[MlleAlys]

Il est effectivement bien au bon endroit, mais n'est pas pris en compte à cause d'un code mis juste avant, qui n'est du css, je vois ça :

Code:

/style> /head> body> h1>The blink> Element /h1> blink>The blink> element is deprecated. To attain blinking effect you should use CSS or JavaSrcipt. See examples in the next section./blink> /body> /html>

Je ne sais pas d'où ça vient ni quel en était le but, mais ce n'est pas du css et cela n'a rien à faire dans la feuille de style : cela fausse la lecture des codes suivants, comme celui que je vous ai donné.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.