Time-based board header

[Jake Hakoda Shirley]

Hey guys, I wanted to make my forum change header image when the time is day/night. Here is an example of what I am talking about (see attached image).

Any ideas?

 

[Jake Bunce]

Edit this template:

Admin CP -> Appearance -> Templates -> logo_block

Replace this code:

<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />

with this:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
	<img src="PATH/TO/DAY.GIF" alt="{$xenOptions.boardTitle}" />
<xen:else />
	<img src="PATH/TO/NIGHT.GIF" alt="{$xenOptions.boardTitle}" />
</xen:if>

You need to specify the image paths. You can also change the daylight hours. The above code will use the "day" image if the time is between 8am and 8pm (08:00 to 20:00 on a 24 hour clock).

 

[Jake Hakoda Shirley]

The time part is correct, but I don't want to change the logo, I want to change the image behind it. Any ideas?

 

[Jake Bunce]

That background is probably specified in the CSS. More than likely you will need to create two CSS classes, one for each background, and then use the condition to call on the two different CSS classes.

For example, edit this template:

Admin CP -> Appearance -> Templates -> EXTRA.css

Specify your classes with the two background images:

.headerBackDay
{
	background-image: url('PATH/TO/DAY.GIF');
}

.headerBackNight
{
	background-image: url('PATH/TO/NIGHT.GIF');
}

Then you would edit this template:

Admin CP -> Appearance -> Templates -> logo_block

Use the condition to specify the class. For example:

<div class="{xen:if '{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20', 'headerBackDay', 'headerBackNight'}">

</div>

The code will be different for your custom style. If you need help with exact code then I will need admin access to your forum.

 

[Jake Bunce]

Your background is in #header. This proved more complicated than I thought what with the header mover and proxy and whatnot. I wasn't able to get it working.

I wish I could put the condition directly into the CSS.

 

[ragtek]

You can also use template hook "header_logo" to manipulate the img(=> better for updates )!

 

[Nokturn]

Any Solution of this problem? We use the same Template and we want a timebased header too..

Greetings Nokturn

 

[Jake Bunce]

Any Solution of this problem? We use the same Template and we want a timebased header too..

Greetings Nokturn

The time part is correct, but I don't want to change the logo, I want to change the image behind it. Any ideas?

I got it working and posted it as a resource:

http://xenforo.com/community/resources/change-header-based-on-time-of-day.409/

I'm not sure why I had trouble with this before. I must have been thinking too hard.