1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Time-based board header

Discussion in 'XenForo Questions and Support' started by Jake Hakoda Shirley, Apr 27, 2011.

  1. Jake Hakoda Shirley

    Jake Hakoda Shirley Active Member

    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?
     

    Attached Files:

  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Edit this template:

    Admin CP -> Appearance -> Templates -> logo_block

    Replace this code:

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

    Code:
    <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).
     
    Brandon Sheley and kkm323 like this.
  3. Jake Hakoda Shirley

    Jake Hakoda Shirley Active Member

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

    Jake Bunce XenForo Moderator Staff Member

    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:

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

    Code:
    <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.
     
    Brandon Sheley likes this.
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    ragtek Guest

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

    Nokturn Member

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

    Greetings Nokturn
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     

Share This Page