Change header based on time of day

Shelley · Apr 5, 2013

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

Won't it work then then without a user refreshing if i understood that correctly?

EQnoble · Apr 5, 2013

Shelley said:
Won't it work then then without a user refreshing if I understood that correctly?

If it works the same way as this does now...it should...I hope...literally speaking though, time will tell.

I think something is required here.

EQnoble · Apr 5, 2013

In case it is related ...

I use options and an on/off switch in the addons options to enable this...

and the settings are different colors set in custom color palette setting and by default uses xf standard colors for sidebar elements...

Shelley · Apr 5, 2013

EQnoble said:
If it works the same way as this does now...it should...I hope...literally speaking though, time will tell.

I think something is required here.

I think more waiting is required.

I don't think this will work though but thanks again for taking the time and post.

EQnoble · Apr 5, 2013

ahh maybe it works because I have my css in between <style type="text/css"></style> in a template

Jake Bunce · Apr 5, 2013

I would do like this to define an custom class for the body:

http://xenforo.com/community/threads/please-extend-extra-css-for-user-groups.42588/#post-461384

The conditional block above the body simply allows you to define a class name based on condition (for which you can use the same conditions as this template edit). That will allow you to select on body.className to define custom background colors.

EQnoble · Apr 5, 2013

so applying that logic is this correct..

HTML:

    <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">
        <xen:set var="$todHeaderClass">morningHeader</xen:set>
        <xen:set var="$todBodyClass">morningBody</xen:set>
    <xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />
        <xen:set var="$todHeaderClass">afternoonHeader</xen:set>
        <xen:set var="$todBodyClass">afternoonBody</xen:set>
    <xen:else />
        <xen:set var="$todHeaderClass">eveningHeader</xen:set>
        <xen:set var="$todBodyClass">eveningBody</xen:set>
    </xen:if>
 
<body{xen:if {$bodyClasses}, ' class="{$bodyClasses} {$todBodyClass}"', ' class="{$todBodyClass}"'}>

.

...assuming (for the body tag in this instance) that all the css was right in extra.css?

Shelley · Apr 5, 2013

Jake Bunce said:
I would do like this to define an custom class for the body:

http://xenforo.com/community/threads/please-extend-extra-css-for-user-groups.42588/#post-461384

The conditional block above the body simply allows you to define a class name based on condition (for which you can use the same conditions as this template edit). That will allow you to select on body.className to define custom background colors.

EQnoble said:

so applying that logic is this correct..

HTML:

    <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">
        <xen:set var="$todHeaderClass">morningHeader</xen:set>
        <xen:set var="$todBodyClass">morningBody</xen:set>
    <xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />
        <xen:set var="$todHeaderClass">afternoonHeader</xen:set>
        <xen:set var="$todBodyClass">afternoonBody</xen:set>
    <xen:else />
        <xen:set var="$todHeaderClass">eveningHeader</xen:set>
        <xen:set var="$todBodyClass">eveningBody</xen:set>
    </xen:if>
 
<body{xen:if {$bodyClasses}, ' class="{$bodyClasses} {$todBodyClass}"', ' class="{$todBodyClass}"'}>

.

...assuming (for the body tag in this instance) that all the css was right in extra.css?

Almost there.

I don't normally ask but could one of you take out 5 minutes out of your time and do the body for me? I've settled for two time zones but the body background colours need to be the following
bodynight color needs to #3e597e
bodyday needs to be #87DBFF

I'll pc one of you with admin access if you can do this if not no worries. Thanks for the help so far.

Code:

.backDay
{
        background: url('http://www.bbsmiley.com/styles/bbsmileyrevamped/xenforo/gradients/bg.png') no-repeat top center #87DBFF;
}

.backNight
{
    background: url('http://www.bbsmiley.com/styles/bbsmileyrevamped/xenforo/gradients/bg_night.png') no-repeat top center #3e597e;

}

[/code]

EQnoble · Apr 5, 2013

If I understand this correctly....

by finding:

Code:

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>

replace with:

Code:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
        <xen:set var="$shelleysBodyClass">backDay</xen:set>
<xen:else />
        <xen:set var="$shelleysBodyClass">backNight</xen:set>
</xen:if>
 
 
<body{xen:if {$bodyClasses}, ' class="{$bodyClasses} {$shelleysBodyClass}"', ' class="{$shelleysBodyClass}"'}>

(in case you already viewed this...I edited it)
(since I failed...I edited it again)

Shelley · Apr 5, 2013

EQnoble said:

If I understand this correctly....

by finding:

Code:

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>

replace with:

Code:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
        <xen:set var="$shellysBodyClass">backDay</xen:set>
<xen:else />
        <xen:set var="$shellysBodyClass">backNight</xen:set>
</xen:if>
 
 
<body{xen:if {$bodyClasses}, ' class="{$bodyClasses} {$shelleysBodyClass}"', ' class="{$shelleysBodyClass}"'}>

(in case you already viewed this...I edited it)

I added that and the background color didn't change for the night setting it's still showing the day background color. I'm sure i misunderstood and doing this all wrong i pasted your code in page_container?

EQnoble · Apr 5, 2013

well even if it was going to work , I just realized that it won't while reading your quote...

they don't match up....

Code:

<xen:set var="$shellysBodyClass">backDay</xen:set>
note: shellys
 
class="{$bodyClasses} {$shelleysBodyClass}"',
note: shelleys

I updated that post

Shelley · Apr 5, 2013

EQnoble said:
well even if it was going to work , I just realized that it won't while reading your quote...

they don't match up....

Code:

<xen:set var="$shellysBodyClass">backDay</xen:set> note: shellys class="{$bodyClasses} {$shelleysBodyClass}"', note: shelleys

I updated that post

You're a star EQnoble. That worked and thanks for persevering with me forever greatful for your help.

EQnoble · Apr 5, 2013

Shelley said:
You're a star EQnoble. That worked and thanks for persevering with me forever greatful for your help.

Your welcome but if anything I made the error while speaking up and answering a question with a question so really thanks for persevering with me if anything.

Autonamus · Jun 17, 2013

Is it possible to do 4 images, This is what I tried but it won't display the last else correctly.

HTML:

<div id="logoBlock">
    <div class="pageWidth">
        <div class="pageContent">
            <xen:include template="ad_header" />
            <xen:hook name="header_logo">
            <div id="logo"><a href="{$logoLink}">
                <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                <xen:if is="{xen:time $serverTime, 'G'} >= 9 AND {xen:time $serverTime, 'G'} < 18">
                    <img src="styles/forge/xenforo/liveheader/header-summer-day.png" alt="{$xenOptions.boardTitle}" />
                <xen:elseif is="{xen:time $serverTime, 'G'} >= 18 AND {xen:time $serverTime, 'G'} < 20" />
                    <img src="styles/forge/xenforo/liveheader/header-summer-sunset.png" alt="{$xenOptions.boardTitle}" />
                <xen:elseif is="{xen:time $serverTime, 'G'} >= 20 AND {xen:time $serverTime, 'G'} < 6" />
                    <img src="styles/forge/xenforo/liveheader/header-summer-night.png" alt="{$xenOptions.boardTitle}" />
                <xen:else />
                    <img src="styles/forge/xenforo/liveheader/header-summer-sunrise.png" alt="{$xenOptions.boardTitle}" />
                </xen:if>
            </a></div>
            </xen:hook>
            <span class="helper"></span>
        </div>
    </div>
</div>

My guess is due to the fact that it goes from the end 8pm to 6am.. but I could be wrong.

And just to make sure I am reading it right. it's in a 24 hour format, correct?

so 9 = 9am 18 = 6pm 20 =8pm and 6 = 6am and the else being 6:01 to 8:59.

I am fairly tired right now so I maybe made a silly mistake, let me know. Thanks.

Jake Bunce · Jun 17, 2013

@Autonamus

This is always false:

Code:

<xen:elseif is="{xen:time $serverTime, 'G'} >= 20 AND {xen:time $serverTime, 'G'} < 6" />

For your purposes you would use OR:

Code:

<xen:elseif is="{xen:time $serverTime, 'G'} >= 20 OR {xen:time $serverTime, 'G'} < 6" />

Autonamus · Jun 17, 2013

Jake Bunce said:
@Autonamus

This is always false:

Code:

<xen:elseif is="{xen:time $serverTime, 'G'} >= 20 AND {xen:time $serverTime, 'G'} < 6" />

For your purposes you would use OR:

Code:

<xen:elseif is="{xen:time $serverTime, 'G'} >= 20 OR {xen:time $serverTime, 'G'} < 6" />

Whoops that would do it! Thanks Jake

ManuTdi · Sep 29, 2013

Hello! This is possible with @ body? As I have to do?

Sorry for my English, I'm Spanish

Jake Bunce · Sep 29, 2013

ManuTdi said:
Hello! This is possible with @ body? As I have to do?

Sorry for my English, I'm Spanish

Yes. It is basically the same as the last section (Time-based header background), except you are editing PAGE_CONTAINER to conditionally apply a CSS class to the body tag. Then you can select on it using CSS.

ManuTdi · Sep 29, 2013

Jake Bunce said:
Yes. It is basically the same as the last section (Time-based header background), except you are editing PAGE_CONTAINER to conditionally apply a CSS class to the body tag. Then you can select on it using CSS.

you could put the code? is that I know nothing about that. thanks

EQnoble · Sep 29, 2013

ManuTdi said:
you could put the code? is that I know nothing about that. thanks

Try this.

find:

Code:

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>

replace with:

Code:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
        <xen:set var="$tdiBodyClass">tdiBodyDay</xen:set>
<xen:else />
        <xen:set var="$tdiBodyClass">tdiBodyNight</xen:set>
</xen:if>


<body{xen:if {$bodyClasses}, ' class="{$bodyClasses} {$tdiBodyClass}"', ' class="{$tdiBodyClass}"'}>

And then add this to your EXTRA.css or where ever you add your css.

Code:

.tdiBodyDay
{
background: url('path/to/background.png') no-repeat top center #c0c0c0;
}

.tdiBodyNight
{
background: url('path/to/background_night.png') no-repeat top center #000000;

}

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

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

Active member

Well-known member

Active member

Well-known member

Similar threads

We value your privacy