XF 2.2 Change header/logo row background image based on custom user field

[Bulbagarden]

We're trying to do something special for Halloween this year, where certain elements of our Halloween forum style would change depending on how users have set certain custom user fields in their settings. Has anyone got any advice on how I'd go about achieving this effect?

The element that's giving me the most trouble is the header/logo row background image. I've got code which can set the image in the extra.less instead of in the style properties...

header#header {
background-image: url('URLGOESHERE.png');
background-position: center;
}

...but you can't use the xen:if statements in extra.less, so I'm not sure how I'd go about setting a conditional here.

I thought maybe I could try editing the PAGE_CONTAINER template instead, where I would be able to use xf:if. I can tell it'd have to relate to this section somehow, but I can't see clearly how I'd be able to go about swapping out the background image here (as opposed to the logo image, which needs to remain the same).

<header class="p-header" id="header">
<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') }}">
<xf:if is="property('xbLogoType') == 'text'">
<xf:if is="property('xbLogoText')">
{{ property('xbLogoText') }}
<xf:else />
{$xf.options.boardTitle}
</xf:if>
<xf:else />
<img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}"
width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" />
</xf:if>
</a>
</div>

<xf:ad position="container_header" />
<xf:if is="property('xbVisitorTabsLocation') == 'logo' OR property('xbForumStyle') == 'canvas'">
<xf:macro name="visitortabs" arg-searchConstraints="{$searchConstraints}" arg-navTree="{$navTree}" />
</xf:if>
<xf:if is="property('xbSocialHeader')">
<xf:include template="xb_social_icons" />
</xf:if>
<xf:if is="property('xbSearchLocation') == 'header'">
<xf:macro name="xb_search_macro" arg-searchConstraints="{$searchConstraints}" />
</xf:if>
</div>
</div>
</header>

I got the impression that maybe what I needed to do here was to edit the p-header-inner class, but searching the templates I wasn't able to see where that's defined.

 

[Paul B]

XF doesn't have a header background image by default so how was it added originally?

It just sets a background colour for .p-header .

 

[Bulbagarden]

XF doesn't have a header background image by default so how was it added originally?

It just sets a background colour for .p-header .

Style properties => Header and Navigation => Header/logo row has a space to add an image. I don't think that comes from an addon, does it?


I know prior to that option being in the style properties, we simply added header images to our styles via the extra.less with this block of code.

header#header {
background-image: url('URLGOESHERE.png');
background-position: center;
}

I just tried adding that code to our unedited Xenforo Default Style as a test, and it worked just fine, so it shouldn't be something from a custom style adding that.

 

[Paul B]

Oh yeah, I completely forgot about that ... it's been so long since I looked at the style properties.

In which case the class is p-header-logo p-header-logo--image , which is line 128 of the PAGE_CONTAINER template:



You can craft a conditional statement for that div to apply custom images based on your criteria.

 

[Bulbagarden]

Wouldn't crafting a conditional statement inside that div only apply a custom logo (as in, putting a different value in for the publicLogoUrl, which is the style property defined in Basic options => Logo URL) as opposed to a custom background? Since I'd need to edit the class itself to change the background-image value for that class?

 

[Paul B]

You would need to use the background attribute to apply the background image.

 

[Bulbagarden]

I have the feeling I'm doing this wrong. I tried adding a style="background:url('FULLIMAGEURLHERE.png')" to the <div class"p-header-logo p-header-logo--image">, and it didn't seem to do anything. Tried the same for the divs above that for p-header-inner and p-header-content, just in case, but neither of those seemed to do anything either.

 

[Paul B]

I'm no longer in my office.

If I remember, I'll try and take a look over the weekend.

 

[Bulbagarden]

Nevermind, took another look at it and realised I had a stupid spelling error in my URL, putting it inside the div tag worked. Thanks for your help Paul!