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

XF 1.4 Background image and conditional statement

Discussion in 'Styling and Customization Questions' started by Skeletor, Nov 14, 2014.

  1. Skeletor

    Skeletor Member

    I created a custom user field so users can enable/disable the background between 8am and 5pm. The field contains one check box. "on"

    The custom userfield ID is called: office

    I put this bit of code in extra.css but it does not seem to work. The user field is ignored and the background image is displayed.

    Code:
    <xen:if is="{$visitor.customFields.office.on} == 'on' AND {xen:time $serverTime, 'Gi'} >= 8 AND {xen:time $serverTime, 'Gi'} < 17">
    @media (min-width: 1025px) {
    html {
      background: rgba(0,0,0,1) url('http://psymusic.co.uk/images/blank.gif') repeat;
    }
    }
    <xen:else />
    @media (min-width: 1025px) {
    html {
      background: url("http://psymusic.co.uk/images/background/bg15.jpg") !important;
      background-attachment: fixed !important;
      background-size: cover !important;
    }
    }
    </xen:if>
    Some help needed please :)
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    That conditional statement won't work in the EXTRA.css template.
     
  3. Mr. Goodie2Shoes

    Mr. Goodie2Shoes Well-Known Member

    The $visitor variable does not exist while evaluating a CSS template as far as I've seen.
    what you can do is add a new class to the <html> tag in the PAGE_CONTAINER template if that condition matches. And use that class for the CSS property changes :)
     
  4. Skeletor

    Skeletor Member

    Thanks for the advice! I'm almost to embarrassed to ask but I wont be able to figure this out on my own. Please give me an example of how I can attach this code to a CSS class or point me to a thread.
     
  5. Mr. Goodie2Shoes

    Mr. Goodie2Shoes Well-Known Member

    in PAGE_CONTAINER add this at the very last of the class attribute of the html tag:
    Code:
    {xen:if "{$visitor.customFields.office.on} == 'on' AND {xen:time $serverTime, 'Gi'} >= 8 AND {xen:time $serverTime, 'Gi'} < 17", 'RemoveBG'}
    
    to EXTRA.css:
    Code:
    html {
         background: url("http://psymusic.co.uk/images/background/bg15.jpg") !important;
         background-attachment: fixed !important;
         background-size: cover !important;
    }
    
    html.RemoveBG {
         background: rgba(0,0,0,1) url('http://psymusic.co.uk/images/blank.gif') repeat !important;
    }
    
     
    Skeletor likes this.

Share This Page