1. 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).

  1. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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...
     
    Mian Shahid, DRE and Shelley like this.
  2. Davyc

    Davyc Well-Known Member

    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 ;)
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  4. Davyc

    Davyc Well-Known Member

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

    :)
     
  5. Davyc

    Davyc Well-Known Member

    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.

    ;)
     
    ArnyVee likes this.
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    8thos, Shelley and ArnyVee like this.
  7. Davyc

    Davyc Well-Known Member

    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)
     
  8. lasertits

    lasertits Active Member

    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
     
    ArnyVee likes this.
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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'}
    
     
    8thos, ArnyVee and lasertits like this.
  10. lasertits

    lasertits Active Member

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

    ArnyVee Well-Known Member

    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 :)
     
  12. Adam Howard

    Adam Howard Well-Known Member

    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. ;)
     
  13. Adam Howard

    Adam Howard Well-Known Member

    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.
     
  14. Adam Howard

    Adam Howard Well-Known Member

    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. :p
     
  15. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    8thos likes this.
  16. Shelley

    Shelley Well-Known Member

    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
     
  17. EQnoble

    EQnoble Well-Known Member

    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
     
  18. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    Shelley Well-Known Member

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

    EQnoble Well-Known Member


    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.
     

Share This Page