Compteur de visites gratuit
CAForum infos
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Imgser10
Derniers sujets
» » Pas autorisé à poster pendant 7 jours?
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Aujourd'hui à 16:30 par Diane M

» » Le coucou du jour
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Aujourd'hui à 13:03 par David1195

» » Joyeux anniv Splash
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Aujourd'hui à 13:00 par David1195

» » Avatar de profil arrondit dans les messages
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Aujourd'hui à 12:55 par David1195

» » Vider le cache navigateur
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 21 Mai 2019 - 13:39 par David1195

» » Différencier le mode texte et le mode WYSIWYG à l'éditeur
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 20 Mai 2019 - 17:08 par Splash

» » Masquer la Google Map aux invités et la réserver aux membres en la publiant en iframe dans un forum dédié
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 20 Mai 2019 - 15:30 par Splash

» » Les dernières informations de Forumactif
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 20 Mai 2019 - 10:57 par Splash

» » [phpBB2] Que je clic sur n'importe quoi, cela m'amène toujours à la même page???
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Ven 17 Mai 2019 - 16:06 par Splash

» » Interdire aux modérateurs la suppression de messages
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 14 Mai 2019 - 17:38 par Mathis

» » [JavaScript] Comment activer JavaScript dans votre navigateur
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 13 Mai 2019 - 15:37 par Splash

» » Mon ordinateur est long à télécharger...
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Dim 12 Mai 2019 - 14:34 par Splash

» » Difficulté à s'inscrire sur mon forum
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Dim 12 Mai 2019 - 14:31 par Splash

» » Problème accès CSS
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Dim 12 Mai 2019 - 14:28 par Splash

» » Personnaliser la navbar en CSS
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 9 Mai 2019 - 9:26 par David1195

» » Personnaliser la navbar en CSS
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 9 Mai 2019 - 9:21 par David1195

» » Installer le traducteur Google
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 9 Mai 2019 - 0:35 par HeroxAquariophile

» » [phpBB2] Le mot inscription n'apparaît pas sur la bande à l'accueil...
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 7 Mai 2019 - 20:29 par Splash

» » Les différents groupes d'un forum
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 7 Mai 2019 - 9:00 par Splash

» » Réduire la hauteur des catégories
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 29 Avr 2019 - 19:37 par caerran

[ModernBB] Ajout d'un mode sombre sur la version ModernBB

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

Mathis

Mathis

Membre
Membre

MessageMathis le Lun 8 Avr 2019 - 16:39

  • MP
  • Zoom
Bonjour, je souhaiterais ajouter comme sur ce forum un mode sombre mais sur un forum en version ModernBB  [ModernBB] Ajout d'un mode sombre sur la version ModernBB 1f600

Merci d'avance ^^
Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Lun 8 Avr 2019 - 18:00

  • MP
  • Zoom
Hi Mathis,

La fonctionnalité recherchée est un plugin par défaut unique à FAE.
Tu peux voir le code source de ce plugin dans le référentiel officiel, ici :
https://github.com/SethClydesdale/forumactif-edge/blob/master/javascripts/in-all-the-pages/all.js#L856
Bien sûr, le script devra être adapté pour être utilisé sur d'autres versions du forum.

En alternative voici 2 scripts qui peuvent t'intéresser, ces scripts seront à mettre Sur toutes les pages

Direction le javascript

Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript


Première solution venant du forum espagnol

Code:
// Partie éditable
var versionForo = 'ModernBB';
var posicionBotonModoNoche = 'toolbar'; // admite toolbar y flotando
var css = '.conteneur_minwidth_IE,
#wrap {
    background-color: #121212;
  color: grey;
}
.inner,
.icon,
.module,
.content,
.post,
.row {
    background-color: #1c1c1c;
  color: grey; }
 
  .block-footer {
    background-color: #1d262c;
}
a {
    color: grey !important;
}
p {
    color: grey;
}
.block {
    background-color: #1d262c;
    color: grey;
}
 
#picture_legend, #privmsgs-menu {
    background-color: #1d262c;
}
 .inner, .icon, .module, .content, .post, .row:hover {background-color:#1c1c1c !important;}
 
li.row {
    border-color: grey !important;
}
 
.panel {
    background-color: #1c1c1c;
}
.row3 {
    background-color: #1c1c1c;
}
 
#cp-main .panel.sig {
    background-color: #1c1c1c;
}
 
.h3, h3 {
    border-color: #1c1c1c;
}
 
.button, .button1, .button2, input[type="submit"] {
    background-color: #1d262c;
}';
// Fin de la partie éditable
 
// eventos
if (modoNocturnoActivado() == true) {
    $('head').append('<style>' + css + '</style>');
}
document.addEventListener("DOMContentLoaded", function(event) {
 
    if (posicionBotonModoNoche == 'toolbar' && _userdata["session_logged_in"] == 1) {
        document.getElementById('fa_menulist').innerHTML += '<li class="fa_separator"></li><li><a href="#" id="activar-modo-nocturno">' + textos() + '</a></li>';
    } else if (posicionBotonModoNoche == 'flotando' || _userdata["session_logged_in"] == 0) {
        versionForo = versionForo.toUpperCase();
        var contenedor_boton;
        if (versionForo == 'PHPBB3' || versionForo == 'MODERNBB') {
            contenedor_boton = document.getElementById('wrap');
        } else if (versionForo == 'PUNBB' || versionForo == 'INVISION') {
            contenedor_boton = document.getElementsByClassName('container_IE')[0];
        } else if (versionForo == 'PHPBB2') {
            contenedor_boton = document.getElementsByClassName('bodylinewidth')[0];
        } else {
            console.log('Versión de foro incorrecta. Solo se admiten: phpBB3, phpBB2, punBB, Invision y ModernBB');
        }
        contenedor_boton.innerHTML += '<div id="boton-flotante"><a href="#" id="activar-modo-nocturno">' + textos() + '</a></div>';
        var boton_flotante_element = document.getElementById('boton-flotante');
        boton_flotante_element.style.bottom = '0';
        boton_flotante_element.style.position = 'fixed';
        boton_flotante_element.style.backgroundColor = 'white';
        boton_flotante_element.style.padding = '4px';
        boton_flotante_element.style.fontSize = '14px';
        boton_flotante_element.style.border = '1px dotted #3a9bca';
    } else {
        console.error('Valor erroneo para la variable posicionBotonModoNoche');
    }
    document.getElementById('activar-modo-nocturno').addEventListener("click", function(event) {
        if (modoNocturnoActivado() == true) {
            document.cookie = "modoNoche=0; expires=Thu, 01 Jan 1970 00:00:00 UTC";
        } else {
            document.cookie = "modoNoche=1";
        }
        location.reload();
    });
});
 
// funciones
 
function modoNocturnoActivado() {
    var name = 'modoNoche' + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) == 0) {
            return true;
        }
    }
    return false;
}
 
function textos() {
    if (modoNocturnoActivado() == false) {
        return 'Activer le mode sombre';
    } else {
        return 'Désactiver le mode sombre';
    }
}

Tu retrouves le lien d'activation/désactivation du mode sombre ici

[ModernBB] Ajout d'un mode sombre sur la version ModernBB A14


Deuxième solution, un script d'Ange Tuteur

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>Night Mode :</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
      }
    });
  }
}());

Tu retrouves le curseur de luminosité en bas de forum

[ModernBB] Ajout d'un mode sombre sur la version ModernBB B13


Bien à toi



† Aucune aide ne sera donnée en privé
Mathis

Mathis

Membre
Membre

MessageMathis le Mar 9 Avr 2019 - 10:57

  • MP
  • Zoom
Parfait, merci Splash [ModernBB] Ajout d'un mode sombre sur la version ModernBB 1f600
Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Mar 9 Avr 2019 - 10:59

  • MP
  • Zoom
Problème résolu
Ce topic est fermé
Il peut être réouvert sur demande

 Droite ici Gauche

À bientôt.



† Aucune aide ne sera donnée en privé

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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