Change header based on time of day

[ManuTdi]

Try this.


find:

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

replace with:

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

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

 

[The Sandman]

How would you go about adding user preference options for day logo / night logo / automatic day/night logo?

 

[Jake Bunce]

How would you go about adding user preference options for day logo / night logo / automatic day/night logo?

Custom user fields are accessible in the templates via:

{$visitor.customFields.field_id}

You can use that in template conditionals.

 

[nguyenhuuhung]

I want to change body background on time of day. Jake.Can you help me?

 

[Jake Bunce]

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.

 

[RockThatClock]

I want to do this with the whole background picture. Is it any way to perform this?

 

[RockThatClock]

I would like to bump this! Is it any solution for this?

 

[Shelley]

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:

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

Replace:

<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:

<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:

<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:

<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:

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

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

}

 

[RockThatClock]

-snip-
[/code]

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

 

[The Matrix]

Hi Jake Bunce,

Is it available changer logo automatically from 1 to up 100x the image URL? I want logo only, but not a background.

 

[silverSl!DE]

I'm looking for exact the same for XF2. any chance to get it working there?

 

[Wing]

Looking to do this with XF2. Anyone have a good idea?

The page container now shows this:

<div class="p-header-inner">
        <div class="p-header-content">

            <div class="p-header-logo p-header-logo--image">
                <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
                    <img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
                        width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
                </a>
            </div>