The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Theme that change with time of day

View previous topic View next topic Go down

Theme that change with time of day

Post by yayayes on January 31st 2016, 9:54 am

Hello guys,

I have just made 2 temporary themes called 'day' and 'night'. I'm wondering if there is a code that can help me automatically change the forum themes according to time of day? Thank you very much in advance.

Ps. I also would like to know if there is also a way to add a audio file/youtube link along side each theme. So the sound of day theme is differ from the night theme. Something like that?

My Forum:http://thelostedencode.forumth.com/
Forum Version:Invision

yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Re: Theme that change with time of day

Post by Ikerepc on February 1st 2016, 12:26 am

You just wanna change css files at some time?

Or you need to change html/js content too?

Ikerepc
Active Poster

Male Posts : 1114
Reputation : 152
Language : Croatian, HTML, CSS, jQuery, JavaScript, PHP, SQL, Bascom, Python, C, FBD & LAD for PLC and more... Little English :D
Location : Around electronics and progmamming ;)

http://help.forumotion.com

Back to top Go down

Re: Theme that change with time of day

Post by yayayes on February 1st 2016, 6:28 am

Hello Ikerepc,

Yes exactly. I want to change the cssfiles but keep the html/js content the same.Thank you for your reply

yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Re: Theme that change with time of day

Post by Genesis on February 1st 2016, 7:05 am

Can't you manually do it? Just have both on a document or Notepad.

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Theme that change with time of day

Post by yayayes on February 1st 2016, 7:35 am

I considered that but it's not really an ideal solution. Thanks though Smile

yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Re: Theme that change with time of day

Post by Ikerepc on February 1st 2016, 9:23 am

How much lines of CSS you have?

There is way to do it via JS:

Code:
      var currentTime = new Date().getHours();
      if (22 <= currentTime&&currentTime < 5) {
      document.write("night css here");
      }
      if (5 <= currentTime&&currentTime < 22) {
      document.write("day css here");
      }

But if you have a lot of lines, it would take long to load, and if omeone turn off JS it would be problem :/

Maybe best for it (if you are changing just colors / images or so) will be if you using same css for every theme.
And just adding changes for another one in js code.

Like this:
CSS:
Code:

.module .box-content {
    background-color: brown;
    border-bottom: none;
}
Here whole code for day

JS:
Code:
      var currentTime = new Date().getHours();
      if (7 <= currentTime&&currentTime < 22) {
      document.write(".module .box-content { background-color: cyan; }");
      }
Night changes. Changed background of module from brown to cyan Wink

That's just example code...
I hope i helped. I'm not at computer now, so if you don't understand / need more help, just write, I will try to figure something out Wink

Ikerepc
Active Poster

Male Posts : 1114
Reputation : 152
Language : Croatian, HTML, CSS, jQuery, JavaScript, PHP, SQL, Bascom, Python, C, FBD & LAD for PLC and more... Little English :D
Location : Around electronics and progmamming ;)

http://help.forumotion.com

Back to top Go down

Re: Theme that change with time of day

Post by yayayes on February 1st 2016, 11:20 am

Thank you Ikerepc! I think the second option is probably better since my CSS is quite long. However, I'm not really sure how to modify the code. With some reasons, the code itself displays on top of the forum There are two things I really want to change is the background and forum main logo. I tried to modify it myself but didn't quite work out.

Code:
var currentTime = new Date().getHours();
if (7 <= currentTime&&currentTime < 22) {
document.write(".body {background-image: url(http://i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/Backgroun_DN2_1.png); background-size: 100%;}");
}

Day Images
background:http://i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/Backgroun_DN_1.png
forum main logo: http://i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/LogoImage_Day.png

Night Images
background:http://i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/Backgroun_DN2_1.png
forum main logo:http://i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/LogoImage_Night.png

yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Re: Theme that change with time of day

Post by Ikerepc on February 1st 2016, 1:36 pm

This should work, to change logo immidietly... But it doesn't...

Code:
document.getElementById("logo").innerHTML = '<a href="/" id="logo"><img src="url here" alt="Forum"></a>';

Only, you need to put it inside { and } in if statement...

Try it out. It is working at blank page but not at my forum... I'm not sure why. I will see it later if you have time...

Sry Very Happy :/

Ikerepc
Active Poster

Male Posts : 1114
Reputation : 152
Language : Croatian, HTML, CSS, jQuery, JavaScript, PHP, SQL, Bascom, Python, C, FBD & LAD for PLC and more... Little English :D
Location : Around electronics and progmamming ;)

http://help.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum