• 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

EQnoble

Well-known member
#23
In case it is related ...

I use options and an on/off switch in the addons options to enable this...
flip settings orig.png flip settings.png
and the settings are different colors set in custom color palette setting and by default uses xf standard colors for sidebar elements...
 

EQnoble

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

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

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

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

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

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

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

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

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

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

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

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

}