• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Change header based on time of day

Conditionally change header based on the time of day (e.g. day / night).

Jake Bunce

XenForo moderator
Staff member
#1
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).

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:

Code:
<div id="logoBlock">
	<div class="pageWidth">
		<div class="pageContent">...
Read more about this resource...
 

Davyc

Well-known member
#2
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

XenForo moderator
Staff member
#3
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

Well-known member
#5
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.

;)
 

Davyc

Well-known member
#7
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!!

(y)
 

lasertits

Active member
#8
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

XenForo moderator
Staff member
#9
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'}
 

Adam Howard

Well-known member
#12
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

Well-known member
#13
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.
 

Jake Bunce

XenForo moderator
Staff member
#15
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

Well-known member
#16
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. :p
 

EQnoble

Well-known member
#17
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
 

Shelley

Well-known member
#19
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

Well-known member
#20
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.