Compteur de visites gratuit
CAForum infos
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Imgser10
Derniers sujets
» » Supprimez les/des boutons de la Chatbox
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Ven 19 Juil 2019 - 13:33 par Passiflore

» » [phpBB3] Nouvelle police d'écriture
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 18 Juil 2019 - 9:43 par Splash

» » Un ptit délire
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 17 Juil 2019 - 23:06 par Splash

» » Installer une police d'écriture sur votre forum
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Sam 13 Juil 2019 - 20:47 par Splash

» » Icône pour la Chatbox sur la toolbar
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Sam 13 Juil 2019 - 13:41 par chrisnvidia

» » Rendre l'image du header cliquable
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 3 Juil 2019 - 18:38 par David1195

» » Rendre l'image du header cliquable
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 3 Juil 2019 - 18:38 par David1195

» » Rendre l'image du header cliquable
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 3 Juil 2019 - 18:37 par David1195

» » Personnaliser la fenêtre de Connexion
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 3 Juil 2019 - 18:35 par David1195

» » Mettre le profil à droite dans les messages
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 3 Juil 2019 - 18:31 par David1195

» » Les dernières informations de Forumactif
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 3 Juil 2019 - 17:34 par Splash

» » [Edge] Modifier la fenêtre connexion rapide
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 20 Juin 2019 - 20:00 par Splash

» » Le coucou du jour
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 20 Juin 2019 - 17:11 par chrisnvidia

» » Autres hébergeurs d'images
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 20 Juin 2019 - 16:44 par David1195

» » Modifier l'affichage "Sujets" et "Messages" sur l'index
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 20 Juin 2019 - 16:39 par David1195

» » Bloc de connexion
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 20 Juin 2019 - 16:32 par chrisnvidia

» » Problèmes sur Forumactif depuis le 16 juin 2019
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 19 Juin 2019 - 11:29 par Splash

» » [Edge] Mise à jour FAE v1.2.12
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 17 Juin 2019 - 21:42 par Splash

» » Pas moyen d'aller dans le panneau d'administration....
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 17 Juin 2019 - 13:45 par Diane M

» » Comment écrire Premier et Deuxième ainsi que Degré en exposant
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 6 Juin 2019 - 13:55 par David1195

[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