Compteur de visites gratuit
Annonces
CAForum est, depuis peu, un forum d'aide pour phpBB. Voici le lien du forum : https://caforum.fr/forum
CAForum infos
Derniers sujets
» » Mise à jour, Problèmes - Les dernières informations de Forumactif
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Hier à 15:49 par Splash

» » Réduire la hauteur des catégories
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Hier à 15:43 par Naf185

» » [Edge] nouveau système de J'aime et Je n'aime pas
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 25 Juin 2020 - 13:22 par Splash

» » [Edge] Icônes Font Awesome avant les titres de forums
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 15 Juin 2020 - 17:05 par Volubal

» » Liens haut & bas de page façon AwesomeBB
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Lun 25 Mai 2020 - 18:03 par herogfx2

» » Modifier l'apparence du qeel
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Ven 8 Mai 2020 - 14:22 par chipster

» » Masquer le bloc "Modérateurs"
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 6 Mai 2020 - 21:15 par Pisso

» » Ajouter son copyright
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 6 Mai 2020 - 20:58 par Pisso

» » Mettre une image au qeel
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 6 Mai 2020 - 19:49 par Pisso

» » Coloriser les cases des Annonces, Annonces globales & des Notes
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mer 6 Mai 2020 - 19:48 par Pisso

» » Bouton MP "Répondre" adapté à la version ModernBB
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Jeu 30 Avr 2020 - 9:17 par Splash

» » [phpBB3] Catégories de différentes couleurs
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Sam 25 Avr 2020 - 20:41 par chrisnvidia

» » COVID19 sur le forum
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Ven 24 Avr 2020 - 17:32 par Splash

» » Insérer des boutons "Haut" & "Bas" de forum
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 17 Mar 2020 - 18:47 par stmphotoGG

» » Modifier les icônes et textes des boutons "Afficher" et "Cacher" des catégories
[ModernBB] Ajout d'un mode sombre sur la version ModernBB Clock-10Mar 17 Mar 2020 - 18:41 par stmphotoGG

Juillet 2020
LunMarMerJeuVenSamDim
  12345
6789101112
13141516171819
20212223242526
2728293031  

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

Inscrivez-vous ou connectez-vous pour répondre

Vous devez être membre pour répondre.

Nous rejoindre

Inscrivez-vous pour participer au forum !


Nous rejoindre

Connexion

Vous êtes membre du forum, cliquez ici pour vous connecter.


Connexion

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