Compteur de visites gratuit
CAForum infos
Derniers sujets
Novembre 2019
LunMarMerJeuVenSamDim
    123
45678910
11121314151617
18192021222324
252627282930 

Calendrier Calendrier

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

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

Mathis

Membre
Membre
Mathis

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

StaffAdmin
StaffAdmin
Splash

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

Membre
Membre
Mathis

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

StaffAdmin
StaffAdmin
Splash

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