Dark Mode

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Dark Mode

Message par Robinmc Dim 24 Mar 2024 - 13:05

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 !
Robinmc

Robinmc
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 09/02/2024

https://innerlife.forumactif.com/
Robinmc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dark Mode

Message par MlleAlys Dim 24 Mar 2024 - 16:02

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).
MlleAlys

MlleAlys
Membre actif

Messages : 5793
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dark Mode

Message par Robinmc Lun 25 Mar 2024 - 18:46

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

Robinmc
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 09/02/2024

https://innerlife.forumactif.com/
Robinmc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dark Mode

Message par MlleAlys Lun 25 Mar 2024 - 20:19

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 ?
MlleAlys

MlleAlys
Membre actif

Messages : 5793
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dark Mode

Message par Robinmc Mer 27 Mar 2024 - 13:00

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 ?
Robinmc

Robinmc
Nouveau membre

Féminin
Messages : 19
Inscrit(e) le : 09/02/2024

https://innerlife.forumactif.com/
Robinmc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dark Mode

Message par MlleAlys Mer 27 Mar 2024 - 15:54

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é.
MlleAlys

MlleAlys
Membre actif

Messages : 5793
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dark Mode

Message par Chacha Mar 2 Avr 2024 - 10:16

Dark Mode UmaslZ4Bonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 69405
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dark Mode

Message par Chacha Mer 3 Avr 2024 - 10:19

Dark Mode 8djze9qBonjour,

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.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69405
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum