Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
Recent Tutorials
Top posting users this month
Top Achievers
Who is online?
In total there are 6 users online :: 0 Registered, 0 Hidden and 6 Guests :: 2 Bots
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
Night Mode
Page 1 of 2 • Share
Page 1 of 2 • 1, 2
What is "Night Mode" ? Night Mode is a plugin that allows you to reduce the brightness of the forum, making it appear easier on the eyes. It's perfect for night time browsing, people with light sensitivity, or vampires !

This plugin is optimized for use on all forum versions and expected to work on the following browsers.
Title : Night Mode
Placement : In all the pages
Paste the following code :
When you're finished, save the script and Night Mode will be installed ! To test it out, go to your forum and you'll be able to find the Night Mode controls at the footer. Just drag the slider to change the dimness of the forum and you'll be set !
If you have any questions, comments, or encounter a bug feel free to leave a reply below. Now say goodbye to those sunglasses, because you'll be able to dim the lights from now on !

Click to view demo |
This plugin is optimized for use on all forum versions and expected to work on the following browsers.
Chrome | Firefox | Internet Explorer | Opera | Safari |
5.0+ | 23.0+ | 11+ | 15+ | 4+ |
Installation
To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.Title : Night Mode
Placement : In all the pages
Paste the following code :
- 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
}
});
}
}());
When you're finished, save the script and Night Mode will be installed ! To test it out, go to your forum and you'll be able to find the Night Mode controls at the footer. Just drag the slider to change the dimness of the forum and you'll be set !

If you have any questions, comments, or encounter a bug feel free to leave a reply below. Now say goodbye to those sunglasses, because you'll be able to dim the lights from now on !

Notice |
Tutorial written by Ange Tuteur. Special thanks to the Beta Testers for testing this plugin. Reproduction not permitted without consent from the author. |
Last edited by Ange Tuteur on Tue 19 Apr 2016, 18:00; edited 4 times in total
- GuestGuest
Fantastic feature! I had such program running on my laptop before upgrading to Windows 10 Pro 64, but I don't remember the name. Please tell me, how do I move the #fa_night_container to these kind of places http://prntscr.com/ao34nr ?
I tried this using CSS:
If it's not possible thru CSS then better leave it. I don't want you to change the whole script just for me
I tried this using CSS:
- Code:
/*---- NIGHT MODE -----------------------------------------------*/
#fa_night_container {margin-top:-30px}
If it's not possible thru CSS then better leave it. I don't want you to change the whole script just for me

Find the targets variable and add the ID of the element you want it attached to. This is how it looks by default :
Considering where you want it you can modify this part :
into this :
That should add it to the beginning of the .navbar element.
- Code:
targets : ['page-footer', 'pun-foot', 'ipbwrapper'], // target node that the dimmer will be attached to
Considering where you want it you can modify this part :
- Code:
footer.appendChild(container);
into this :
- Code:
$('.navbar', footer).prepend(container);
That should add it to the beginning of the .navbar element.
- GuestGuest


JS:
- 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 : ['picture_legend', '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:10px; font-family:arial, sans-serif; background:#EEE; border:0px solid #CCC; border-radius:3px; display:inline-block; padding:3px; margin:1px; }</style><div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>');
fa_night_mode.shade = document.getElementById('fa_night_shade');
// 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>Nacht Modus :</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
}
});
}
}());
CSS:
- Code:
/*---- NIGHT MODE -----------------------------------------------*/
#fa_night_container {background:none!important}
#fa_night_dimmer:hover {cursor: url(http://i14.servimg.com/u/f14/17/68/63/00/sonic10.gif), pointer!important;}
- GuestGuest
Ange Tuteur wrote:Oooh is that where you wanted it ?

Totally, it looks snug !Samantha wrote:Looks cute there doesn't it? Translated it to Dutch as well.

No problem, glad you like it.Wilson wrote:Another marvelous script! Thank you Ange, just the thing I want!
Question: How can you make the option 'Night Mode' immune to the dimness?

I'm not sure, what is this "dimness" options ?

Thanks !brandon_g wrote:Cool little feature there Ange.

- GuestGuest
Ange Tuteur wrote:Totally, it looks snug !Samantha wrote:Looks cute there doesn't it? Translated it to Dutch as well.
No problem, glad you like it.Wilson wrote:Another marvelous script! Thank you Ange, just the thing I want!
Question: How can you make the option 'Night Mode' immune to the dimness?
I'm not sure, what is this "dimness" options ?Thanks !brandon_g wrote:Cool little feature there Ange.![]()
Wow thanks dude! Finally got a compliment out of your coffee trap.

I think what Wilson tried to mention is, when dimming the controls get dimmed as well. I guess he asked for a way to keep the controls into view (excluded from dimming).

Ooooh, I get it now. Edit the script and find this part :
- Code:
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><div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>');
and replace it with this :
- Code:
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 { position:relative; z-index:999999999; 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><div id="fa_night_shade" style="background-color:rgba(0, 0, 0, ' + ( cookie ? cookie / 100 : 0 ) + ');"></div>');
However, if there's any content that's fixed to the screen it may overlap it.
Haha! Thanks for explaining it further @Samantha.
Script works great @Ange Tuteur! Thanks once again.
Script works great @Ange Tuteur! Thanks once again.

- GuestGuest
I'm looking forward to see your next genius creation, Seth!
XXX
Oh, pls don't choke upon ur 1st cup reading this today. We're all gonna miss ya yk....
Whispering: I bet I got 50k of FM credits laying around somewhere to pay for that flight to Virginia.... Hmmm....


Oh, pls don't choke upon ur 1st cup reading this today. We're all gonna miss ya yk....

Whispering: I bet I got 50k of FM credits laying around somewhere to pay for that flight to Virginia.... Hmmm....

Anytime.Wilson wrote:Script works great Ange Tuteur! Thanks once again.

At the moment I have one more thing in testing. After that I need to pull something else out of my... magic hat.Samantha wrote:I'm looking forward to see your next genius creation, Seth!XXX
![]()
Oh, pls don't choke upon ur 1st cup reading this today. We're all gonna miss ya yk....
Whispering: I bet I got 50k of FM credits laying around somewhere to pay for that flight to Virginia.... Hmmm....![]()

Good luck, I'm out in the boondocks.

jessy wrote:fantastic

I found a bug!
I looked into the elements of my forum and I was wondering why the supposedly head elements is inside the body tag. I tried turning off the javascripts, then things are now ok. Now I turned on the javascripts again and tried looking for specific script that is doing the thing.
Figured it was this script. This is how it looks like when the script is activated:

I looked into the elements of my forum and I was wondering why the supposedly head elements is inside the body tag. I tried turning off the javascripts, then things are now ok. Now I turned on the javascripts again and tried looking for specific script that is doing the thing.
Figured it was this script. This is how it looks like when the script is activated:

@SLGray As I said on my last reply. Not really causing much a problem but I don't think it's a good thing having head elements inside body tag.
hello i put this code in my second forum http://keeponblogging.forumotion.com (invision) and i found some weird bug ..
when i activate the night mode somehow the thanks button appears in front of the topic like a navbar ..i think its a conflict between the two

here is the code from the thanks button in case you need it
the code on my punbb forum works perfect by the way love it
when i activate the night mode somehow the thanks button appears in front of the topic like a navbar ..i think its a conflict between the two

here is the code from the thanks button in case you need it
- Code:
$(function() {
var message = function(child, parent) {
var pseudo = $(child, parent).text(),
icon = '<img src="http://i18.servimg.com/u/f18/18/21/60/73/fa_sta10.png" alt=""/>';
return '<div id="fa_thanks_message">' + icon + ' Ο συγγραφέας σου είπε ευχαριστώ, ' + pseudo + ' ! ' + icon + '</div>';
},
version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check
node = document.createElement(version ? 'DIV' : 'TR'),
post = $(version ? 'div' : 'tr' + '.post'),
j = post.length,
i = 0;
if (version == 'badapple') {
if (window.console) console.error('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
return;
}
node.id = 'fa_thanks'; // id for style modifications
if (!version) node.innerHTML = '<td colspan="2"></td>'; // phpbb2 must have a cell as the child node
for (; i < j; i++) {
if ((version ? post[i] : post[i].firstChild).style.backgroundColor) { // thanked posts have the backgroundColor style property
post[i].className += ' thanked'; // mark the thanked post with a class
(version ? node : node.firstChild).innerHTML = message(['.name', 'dl > dt > strong', '.username', '.popmenubutton'][version], post[i]); // thanks message
switch (version) {
case 0 : // phpbb2
node.firstChild.style.backgroundColor = post[i].firstChild.style.backgroundColor;
node.firstChild.className = post[i].firstChild.className;
post[i].parentNode.insertBefore(node, post[i].nextSibling);
break;
case 1 : // phpbb3
post[i].firstChild.insertBefore(node, post[i].firstChild.lastChild.previousSibling);
break;
case 2 : // punbb
node.className = 'postfoot';
node.style.margin = '0';
post[i].appendChild(node);
break;
case 3 : // invision
node.className = 'post-footer';
node.style.backgroundColor = post[i].style.backgroundColor;
post[i].appendChild(node);
break;
}
break; // break out of the for loop when the thanked post is found
}
}
});
the code on my punbb forum works perfect by the way love it
Thanks a lot, I didn't notice this when I was working on it ! It was most likely caused due to document.write()'ing a div into the head section. I replaced that method with an interval that polls to see if the body is ready. Let me know if the update script in the first post works for you.Wilson wrote:I found a bug!
I looked into the elements of my forum and I was wondering why the supposedly head elements is inside the body tag. I tried turning off the javascripts, then things are now ok. Now I turned on the javascripts again and tried looking for specific script that is doing the thing.
Figured it was this script. This is how it looks like when the script is activated:

It looks like this might be caused by a naive mistake on my part. In the script you posted, replace this :skouliki wrote:hello i put this code in my second forum http://keeponblogging.forumotion.com (invision) and i found some weird bug ..
when i activate the night mode somehow the thanks button appears in front of the topic like a navbar ..i think its a conflict between the two
here is the code from the thanks button in case you need it
- Code:
$(function() {
var message = function(child, parent) {
var pseudo = $(child, parent).text(),
icon = '<img src="http://i18.servimg.com/u/f18/18/21/60/73/fa_sta10.png" alt=""/>';
return '<div id="fa_thanks_message">' + icon + ' Ο συγγραφέας σου είπε ευχαριστώ, ' + pseudo + ' ! ' + icon + '</div>';
},
version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check
node = document.createElement(version ? 'DIV' : 'TR'),
post = $(version ? 'div' : 'tr' + '.post'),
j = post.length,
i = 0;
if (version == 'badapple') {
if (window.console) console.error('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
return;
}
node.id = 'fa_thanks'; // id for style modifications
if (!version) node.innerHTML = '<td colspan="2"></td>'; // phpbb2 must have a cell as the child node
for (; i < j; i++) {
if ((version ? post[i] : post[i].firstChild).style.backgroundColor) { // thanked posts have the backgroundColor style property
post[i].className += ' thanked'; // mark the thanked post with a class
(version ? node : node.firstChild).innerHTML = message(['.name', 'dl > dt > strong', '.username', '.popmenubutton'][version], post[i]); // thanks message
switch (version) {
case 0 : // phpbb2
node.firstChild.style.backgroundColor = post[i].firstChild.style.backgroundColor;
node.firstChild.className = post[i].firstChild.className;
post[i].parentNode.insertBefore(node, post[i].nextSibling);
break;
case 1 : // phpbb3
post[i].firstChild.insertBefore(node, post[i].firstChild.lastChild.previousSibling);
break;
case 2 : // punbb
node.className = 'postfoot';
node.style.margin = '0';
post[i].appendChild(node);
break;
case 3 : // invision
node.className = 'post-footer';
node.style.backgroundColor = post[i].style.backgroundColor;
post[i].appendChild(node);
break;
}
break; // break out of the for loop when the thanked post is found
}
}
});
the code on my punbb forum works perfect by the way love it
- Code:
$(version ? 'div' : 'tr' + '.post')
by :
- Code:
$(version ? 'div.post' : 'tr.post')
I'll make sure someone updates the tutorial.

- Sponsored content
Page 1 of 2 • 1, 2
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum
|
|