Change header based on time of day

Jake Bunce · Feb 27, 2012

Jake Bunce submitted a new resource:

Change header based on time of day (version 1.x) - Conditionally change header based on the time of day (e.g. day / night).

Rich (BB code):
An example of a daytime / nighttime header. I just pulled two sky images from Google. These pictures show a conditional header background based on the time of day which is the last part of this guide:

View attachment 26412
View attachment 26413

To change the title image edit this template:

Admin CP -> Appearance -> Templates -> logo_block

Replace the red code:

Rich (BB code):

<div id="logoBlock"> <div class="pageWidth"> <div class="pageContent">...

Read more about this resource...

Davyc · Feb 27, 2012

Nicely done Jake: Couple of questions -

Can this be applied to the actual logo rather than the backgrounds and can the time be altered to say from 6am to 5pm?

Always in awe

Jake Bunce · Feb 27, 2012

Davyc said:
Can this be applied to the actual logo rather than the backgrounds and can the time be altered to say from 6am to 5pm?

Yes and yes. The first part of the guide is to change the logo. The second part is for the background. And the times are specified in the condition itself. Just change the numbers.

Davyc · Feb 28, 2012

Thanks Jake I thought that was the case but wanted to be 100% sure lol.

Davyc · Mar 1, 2012

Hi Jake

Got this working perfectly - backgrounds AND logos change at the times I specified in the code.

Two quick questions:

Are the times based off the server time (I suspect they are from the code) and if so would it be possible to base it off user times? The reason I ask is that some of my members are from Canada, USA and Philippines so their time zones will differ. I have a sneaky feeling that this won't be possible lol.

Second question: Is it possible to have three time frames? For example a logo change that could say 'Good Morning' another for 'Good Afternoon' and finally one for 'Good Evening'?

My members love this BTW and are tickled by the changes.

Jake Bunce · Mar 2, 2012

Davyc said:
Two quick questions

It already uses the user's timezone, so daytime for one user may be nighttime for another.

I just updated the resource to include instructions for 3 time frames:

http://xenforo.com/community/resources/change-header-based-on-time-of-day.409/

Davyc · Mar 2, 2012

Hey Jake you are a star man - if I knew half quarter what you know I'd be more than happy. More power to you!!

lasertits · Mar 30, 2012

Does xen:time (or date / datetime) support conditionals for what month(s) it is? As in, could I "if is march,april,may,june -> display logo1, else if july,aug,sept -> display logo2, else -> display logodefault"

Something similar to that? Curious what else I can do with a mod like this. Thanks

Jake Bunce · Mar 30, 2012

lasertits said:
Does xen:time (or date / datetime) support conditionals for what month(s) it is? As in, could I "if is march,april,may,june -> display logo1, else if july,aug,sept -> display logo2, else -> display logodefault"

Something similar to that? Curious what else I can do with a mod like this. Thanks

Here are the date parameters you can use:

http://us3.php.net/manual/en/function.date.php

You need the "n" parameter for the number of the month (1-12).

Code:

{xen:time $serverTime, 'n'}

lasertits · Mar 30, 2012

Jake Bunce said:
Here are the date parameters you can use:

http://us3.php.net/manual/en/function.date.php

You need the "n" parameter for the number of the month (1-12).

Code:

{xen:time $serverTime, 'n'}

Awesome, exactly what I was looking for, thanks a ton.

ArnyVee · Mar 30, 2012

lasertits said:
Awesome, exactly what I was looking for, thanks a ton.

LT, can you share how you do that? That would be awesome in automating a 'seasonal' change in theme by adding a few artistic touches

Adam Howard · Apr 20, 2012

For an extra personal touch, I changed this from

Code:

$serverTime

To the following

Code:

$visitorTime

The world-wide web is after all global and not even I use my server's time. This keep with whatever time your visitors (members & guess) see according to their own time.

Adam Howard · Apr 20, 2012

My only issue is if you're like me and you have told everyone's browser to cache things through .htaccess The day and night may stick for some users. I wold think more so, if you're using a CDN or Proxy server such as CloudFlare.

But it's not really an issue.

Adam Howard · Apr 20, 2012

Now if only I could figure out why this easy template doesn't seem to work here
http://xenforo.com/community/resources/social.95/

It's most likely something small that I'm overlooking and someone here will point it out, laughing why I didn't notice it.

Jake Bunce · Apr 20, 2012

TheVisitors said:
For an extra personal touch, I changed this from

Code:

$serverTime

To the following

Code:

$visitorTime

The world-wide web is after all global and not even I use my server's time. This keep with whatever time your visitors (members & guess) see according to their own time.

This change doesn't work / isn't necessary. $visitorTime doesn't exist in my testing. And {xen:time} already converts $serverTime into the user's own timezone. The instructions as given already adjust for the user's timezone.

Shelley · Apr 5, 2013

Jake Bunce said:
Jake Bunce submitted a new resource:

Change header based on time of day (version 1.x) - Conditionally change header based on the time of day (e.g. day / night).

Read more about this resource...

I think it's finally time to attempt this thankyou jake but I have a few questions (possibly I can get some help here on what exactly Ineed to do) may need my hand held here.

What I'm aiming to do is have the 3 timezone thing but as you can see on my style I want to change the header and body background/colour also as the logo would not suit the light blue on the noon and night timezone.

so what i am aiming to do is have
logo morning with the

Code:

body {
    background: url("@imagePath/xenforo/gradients/bg.png") no-repeat scroll center top #87DBFF;}

be as it is but the noon and night body colour and background will be a different colour also. Is this possible at all jake and thanks for any help. My site is >> http://www.bbsmiley.com/ so you can see better what i'm going to try to accomplish but short story I need the body background color and image to change also per timezone. Thanks again for any help you can give preferably all the code if you have the time.

EQnoble · Apr 5, 2013

Paste this in extra.css

Code:

#header {
    background: url("@imagePath/xenforo/gradients/header<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">MORNING<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />AFTERNOON<xen:else />NIGHT</xen:if>bg.png") no-repeat scroll center top <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">#B1D7F2<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />#87DBFF<xen:else />#1C5E8C</xen:if> !important;
}
 
body {
    background: url("@imagePath/xenforo/gradients/body<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">MORNING<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />AFTERNOON<xen:else />NIGHT</xen:if>bg.png") no-repeat scroll center top <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">#B1D7F2<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />#87DBFF<xen:else />#1C5E8C</xen:if> !important;
}

as it is setup here, the header will have three time relevant background images

@imagePath/xenforo/gradients/headerMORNINGbg.png

@imagePath/xenforo/gradients/headerAFTERNOONbg.png

@imagePath/xenforo/gradients/headerNIGHTbg.png

as well as the body

@imagePath/xenforo/gradients/bodyMORNINGbg.png

@imagePath/xenforo/gradients/bodyAFTERNOONbg.png

@imagePath/xenforo/gradients/bodyNIGHTbg.png

You can change that by changing MORNING, AFTERNOON and NIGHT in the respective rules
You can change the colors to correspond as well , the order of colors is also morning noon then night

Jake Bunce · Apr 5, 2013

CSS can be cached. I don't think that will work without a hard refresh.

Shelley · Apr 5, 2013

EQnoble said:
Paste this in extra.css

Code:

#header { background: url("@imagePath/xenforo/gradients/header<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">MORNING<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />AFTERNOON<xen:else />NIGHT</xen:if>bg.png") no-repeat scroll center top <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">#B1D7F2<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />#87DBFF<xen:else />#1C5E8C</xen:if> !important; } body { background: url("@imagePath/xenforo/gradients/body<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">MORNING<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />AFTERNOON<xen:else />NIGHT</xen:if>bg.png") no-repeat scroll center top <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">#B1D7F2<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />#87DBFF<xen:else />#1C5E8C</xen:if> !important; }

as it is setup here, the header will have three time relevant background images

@imagePath/xenforo/gradients/headerMORNINGbg.png
@imagePath/xenforo/gradients/headerAFTERNOONbg.png
@imagePath/xenforo/gradients/headerNIGHTbg.png
as well as the body

@imagePath/xenforo/gradients/bodyMORNINGbg.png
@imagePath/xenforo/gradients/bodyAFTERNOONbg.png
@imagePath/xenforo/gradients/bodyNIGHTbg.png

You can change that by changing MORNING, AFTERNOON and NIGHT in the respective rules
You can change the colors to correspond as well , the order of colors is also morning noon then night

Thanks for taking the time to do this very much appreciated. I owe you one EQnoble thanks so much.

EQnoble · Apr 5, 2013

Jake Bunce said:
CSS can be cached. I don't think that will work without a hard refresh.

I use it that way successfully in the timer addon and it switches on a regular page refresh on the fly but don't know if the rules apply differently to this though since the elements I am applying styling to in that addon are created by the addon where this is stock xf stuff.

Change header based on time of day

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Active member

Well-known member

Active member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads

We value your privacy