• 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

#1
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 :)
 

Mr. Goodie2Shoes

Well-known member
#3
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
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.
 

Mr. Goodie2Shoes

Well-known member
#5
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;
}