[ModernBB] Ajout d'un mode sombre sur la version ModernBB
Page 1 sur 1•Partagez
- Mathis
Membre
Bonjour, je souhaiterais ajouter comme sur ce forum un mode sombre mais sur un forum en version ModernBB
Merci d'avance ^^
Merci d'avance ^^
- Splash
StaffAdmin - 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';
}
}- 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
}
});
}
}());
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
Tu retrouves le lien d'activation/désactivation du mode sombre ici
Deuxième solution, un script d'Ange Tuteur
Tu retrouves le curseur de luminosité en bas de forum
Bien à toi
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
Tu retrouves le lien d'activation/désactivation du mode sombre ici
Deuxième solution, un script d'Ange Tuteur
Tu retrouves le curseur de luminosité en bas de forum
Bien à toi
- Mathis
Membre
Parfait, merci Splash
- Splash
StaffAdmin
- Contenu sponsorisé
Sujets similaires
» Mise à jour, Problèmes - Les dernières informations de Forumactif
» Bouton MP "Répondre" adapté à la version ModernBB
» [ModernBB] Ajout d'un bloc de connexion/enregistrement en bas de page
» [ModernBB] Changer la couleur des descriptions et des noms d'utilisateurs sur la version mobile
» Différencier le mode texte et le mode WYSIWYG à l'éditeur
» Bouton MP "Répondre" adapté à la version ModernBB
» [ModernBB] Ajout d'un bloc de connexion/enregistrement en bas de page
» [ModernBB] Changer la couleur des descriptions et des noms d'utilisateurs sur la version mobile
» Différencier le mode texte et le mode WYSIWYG à l'éditeur
Inscrivez-vous ou connectez-vous pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forumSujets les plus actifs
Sujets les plus vus
Meilleurs posteurs
Mer 31 Jan 2024 - 13:03 par NIK SIURI
» » Réduire la hauteur des catégories
Mer 31 Jan 2024 - 12:59 par NIK SIURI
» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
Mer 31 Jan 2024 - 12:35 par NIK SIURI
» » Afficher les avatars en forme rectangulaire
Mer 31 Jan 2024 - 11:47 par NIK SIURI
» » Modifier la partie des stats en début de qeel
Mer 31 Jan 2024 - 11:45 par NIK SIURI
» » Mettre une image au qeel
Mer 31 Jan 2024 - 11:37 par NIK SIURI
» » Rendre l'image du header cliquable
Mer 31 Jan 2024 - 11:34 par NIK SIURI
» » Elargir le cadre de la boite de smileys
Mer 31 Jan 2024 - 11:33 par NIK SIURI
» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
Mer 31 Jan 2024 - 10:29 par NIK SIURI
» » Catégories rétractables sur l'index
Mer 31 Jan 2024 - 10:17 par NIK SIURI
» » [phpBB3] Catégories de différentes couleurs
Mer 31 Jan 2024 - 10:17 par NIK SIURI
» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
Mer 31 Jan 2024 - 10:07 par NIK SIURI
» » Centrer l'avatar, le pseudo & le rang dans les messages
Mer 31 Jan 2024 - 10:06 par NIK SIURI
» » Modifier l'icône "On-line"
Mar 23 Mai 2023 - 19:15 par Kionk
» » Insérer des boutons "Haut" & "Bas" de forum
Mar 23 Mai 2023 - 11:40 par Kionk