• 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

ManuTdi

Active member
#41
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;

}
Thanks! :)
 

Jake Bunce

XenForo moderator
Staff member
#45
I want to change body background on time of day. Jake.Can you help me?
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.
 

Shelley

Well-known member
#48
The following code and more specifically this was mainly done with the help of jake and @EQnoble

This is based on 2 headers timezones with background body changing for each.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Timezone logo, header & body changes

PAGE_CONTAINER

Find:
Code:
<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>
Replace:
Code:
<xen:if is="{xen:time $serverTime, 'G'} >= 6 AND {xen:time $serverTime, 'G'} < 19">
  <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}"'}>

HEADER

Find:
Code:
<xen:hook name="header">
<div id="header">
  <xen:include template="logo_block" />
  <xen:include template="navigation" />
  <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>
Replace:
Code:
<xen:hook name="header">
<div id="header">
<xen:if is="{xen:time $serverTime, 'G'} >= 6 AND {xen:time $serverTime, 'G'} < 19">
  <div id="header" class="backDay">
<xen:else />
  <div id="header" class="backNight">
</xen:if>
  <xen:include template="logo_block" />
  <xen:include template="navigation" />
  <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>

logo_block

Find:
Code:
<div id="logo"><a href="{$logoLink}">
  <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
  <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
  </a></div>
Replace:
Code:
<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'} >= 6 AND {xen:time $serverTime, 'G'} < 19">

  <img src="http://www.bbsmiley.com/styles/bbsmileyrevamped/xenforo/gradients/logo.png" alt="{$xenOptions.boardTitle}" />
  <xen:else />

  <img src="http://www.bbsmiley.com/styles/bbsmileyrevamped/xenforo/gradients/logo_night.png" alt="{$xenOptions.boardTitle}" />
  </xen:if>
  </a></div>

Paste the following in EXTRA.CSS template.
Code:
.backDay
{
  background: url('http://www.bbsmiley.com/styles/bbsmileyrevamped/xenforo/gradients/bg.png') no-repeat top center #57A1DF;
}

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

}
 
#49
It must be my bad english again, since no-one understands me.

What I need is a backgroundpicture that is based on the time of the day, not logobackground. I want to change all this background onto a time based one, which means it will be a new background on midnight, and another when it is day. Is it possible? ;p

Also, sorry for my bad english. I do not live in a country where we speak english..