Compteur de visites gratuit
CAForum infos
Derniers sujets
» » Modifier l'apparence du qeel
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 23:44 par Cofeeandnothingelsethanks

» » Un texte qui clignote
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 23:43 par Cofeeandnothingelsethanks

» » HTTPS Everywhere
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 12:49 par David1195

» » [Edge] Fermeture automatique des volets widgets sur le forum
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 12:41 par David1195

» » Menu de recherche instantanée
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 11:28 par LilaCH

» » Widget : Sujets récents d'un sous-forum spécifique
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 11:26 par LilaCH

» » Une barre de statistiques comme sur le FDF
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 11:25 par LilaCH

» » Ajouter un bouton de prévisualisation aux titres des topics
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 11:25 par LilaCH

» » Les palindromes
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 11:23 par LilaCH

» » Mise à jour, Problèmes - Les dernières informations de Forumactif
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 18 Sep 2019 - 11:12 par Splash

» » [Tuto] Créer une page HTML
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 17 Sep 2019 - 20:50 par David1195

» » Le coucou du jour
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 17 Sep 2019 - 20:49 par David1195

» » [Tuto] Le record du nombre d'utilisateurs en ligne
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 17 Sep 2019 - 20:48 par David1195

» » [Tuto] Créer un widget personnalisé
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 17 Sep 2019 - 20:47 par David1195

» » Modifier la partie des stats en début de qeel
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 17 Sep 2019 - 20:46 par David1195

Septembre 2019
LunMarMerJeuVenSamDim
      1
2345678
9101112131415
16171819202122
23242526272829
30      

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

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