Resource icon

Change header based on time of day

Overview Reviews (10) Discussion
In case it is related ...

I use options and an on/off switch in the addons options to enable this...
flip settings orig.webpflip settings.webp
and the settings are different colors set in custom color palette setting and by default uses xf standard colors for sidebar elements...
 
ahh maybe it works because I have my css in between <style type="text/css"></style> in a template
 
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?
 
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.
Click to expand...
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?
Click to expand...

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]
 
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)
 
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)
Click to expand...

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?
 
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
 
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
Click to expand...

You're a star EQnoble. That worked and thanks for persevering with me forever greatful for your help. :)
 
Shelley said:
You're a star EQnoble. That worked and thanks for persevering with me forever greatful for your help. :)
Click to expand...
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.
 
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.
 
@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" />
 
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" />
Click to expand...

Whoops that would do it! Thanks Jake
 
ManuTdi said:
Hello! This is possible with @ body? As I have to do?

Sorry for my English, I'm Spanish
Click to expand...

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.
 
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.
Click to expand...
you could put the code? is that I know nothing about that. thanks
 
ManuTdi said:
you could put the code? is that I know nothing about that. thanks
Click to expand...

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;

}
 
You must log in or register to reply here.

Similar threads

Bulbagarden
  • Question Question
XF 2.2 Change header/logo row background image based on custom user field
Replies
8
Views
791
Bulbagarden
Bulbagarden
webbouk
Add-on Toggle Enable manual approval on/off depending on time of day
Replies
0
Views
239
webbouk
webbouk
WaddleJrJr
Add-on Setting a node to private or not based on time of day.
Replies
1
Views
812
Chris D
Chris D
Back
Top Bottom