XF 2.0 Different header image in specific boards?

[Mave]

What's the best method of changing the header image automatically depending on what board you're in?
For example: I have a red dead redemption 2 board and would like to have a matching header image inside that board only.

I could create child themes where the only modified value is the header image url, but that doesn't seem like a good solution.

 

[Mave]

Anyone? I really want this feature.

 

[Nicolas FR]

Why do not use conditional statement ?

 

[Mave]

Why do not use conditional statement ?

Please point me more in the right direction, can you give me an example? Which templates should I modify?

 

[Nicolas FR]

It depends what do you want to do exactly ?
Is the entire header you want to change or an image in the header ? like a banner ?

 

[Mave]

It depends what do you want to do exactly ?
Is the entire header you want to change or an image in the header ? like a banner ?

I only want to change the background css property for .p-header

.p-header {

    background: transparent url("https://forums.themavesite.com/images/header-bg31.jpg");

}

 

[Nicolas FR]

You can try this

[data-container-key="node-X"]
{
    .p-header {
    background: transparent url("https://forums.themavesite.com/images/header-bg31.jpg");
    }
}

Change node-X for your node ID and repeat for each node.

 

[Mave]

You can try this

[data-container-key="node-X"]
{
    .p-header {
    background: transparent url("https://forums.themavesite.com/images/header-bg31.jpg");
    }
}

Change node-X for your node ID and repeat for each node.

Can I simply use this code in extra.less? Or do I need to put it somewhere else?

 

[Nicolas FR]

in extra.less template

 

[Cosmacelf]

I tried this in my new board (v2.0.11, btw, is there somewhere I can tell what version I'm running?), but it didn't change the header image. Just to be clear, what is the "node ID" for a category? Is it listed in the URL? For instance, my forum has a category named "R1T Truck" and has URL: https://rivianauto.club/xf/forums/r1t-truck.4/

Would the node ID be "r1t-truck.4"?

My header image html code seems more complex than the code given above. It looks like this in the HTML debugger:

 

[Cosmacelf]

I figured it out. First node IDs are numbers which are shown in the URL of the main category page. So my R1T subforum above URL is https://rivianauto.club/xf/forums/r1t-truck.4/ and thus the node id is 4.

And then I modified the template PAGE_CONTAINER to look like this. The XF:if statement is new.

<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="$forum.node_id == 4">
                       <img src="https://rivianauto.club/xf/images/truck-header-330.jpg" alt="Rivian Auto Club" srcset="https://rivianauto.club/xf/images/truck-header-660.jpg 2x">
                    <xf:else />
                    <img src="{{ base_url(property('publicLogoUrl')) }}"
                        alt="{$xf.options.boardTitle}"
                        {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
                    </xf:if>

                </a>
            </div>

            <xf:ad position="container_header" />
        </div>
    </div>
</header>