• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Resource icon

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..
 
Top