XF 2.3 Using a different logo for a single page node (or an array of page nodes)

Wildcat Media · Mar 19, 2026

I am setting up a XenForo forum to also function as a site's home page. Constructing a portal page using a page node has proven to be easy, and I can also modify the public navigation menu by including/excluding the page node where needed.

Where I'm stumped is for the logo. The portal needs to have a different logo on top, as will a couple of additional pages associated with the site home page. I know how to use an array with those.

Is this something easily done through some options I am not seeing, and has anyone done this yet?

Or am I going to need to go off into the weeds with a template modification (and create a custom add-on) to include the page node(s) with conditionals to control which logo is used?

Just asking, in case I'm duplicating something that has been done already. I did not see an add-on that could offer this ability.

Mr Lucky · Mar 19, 2026

Wildcat Media said:
Is this something easily done through some options I am not seeing, and has anyone done this yet?

Yes you can do this. Create a child style which inherits everything from the main style but with the different logo in style properties.

ACP > Forums > nodes setting for that page node. There is a setting to override the main style choice, so you just choose the child style which has the different logo.

Wildcat Media · Mar 19, 2026

I was hoping not to have to force a page node (or any part of the forum for that matter) to have its own style, but that is probably the easiest way to do it.

I may just do it this way for now and call it a "tomorrow problem."

zenvibe · Mar 23, 2026

The quickest way is with CSS using the data-container-key attribute that XenForo puts on the <html> element. No template modification needed — just add this to extra.less:

Code:

[data-container-key="node-85"] .p-header-logo img {
    display: none;
}
[data-container-key="node-85"] .p-header-logo {
    background: url('path/to/your-alternate-logo.png') no-repeat center;
    width: 200px;  /* adjust to your logo size */
    height: 50px;
}

Replace node-85 with your page node ID (you can add more selectors for multiple pages).
If you prefer a cleaner HTML approach, create a template modification on PAGE_CONTAINER. Find the logo <img> tag and wrap it:

Code:

<xf:if is="in_array($xf.reply.containerKey, ['node-85', 'node-86'])">
    <img src="path/to/alternate-logo.png" alt="Site Logo" />
<xf:else />
    <!-- original logo markup here -->
</xf:if>

There's also the no-code approach Mr Lucky mentioned — create a child style with the alternate logo in Style Properties, then assign that child style to your page nodes in ACP > Forums. But that means maintaining a separate style just for the logo, which can get tedious.

XF 2.3 Using a different logo for a single page node (or an array of page nodes)

Wildcat Media

Well-known member

Mr Lucky

Well-known member

Wildcat Media

Well-known member

zenvibe

Member

Similar threads

We value your privacy