Header/logo row background image for different Node IDs?

[Ludachris]

Hey Russ, is there a way to make it so the header/logo row background image changes based on node ID? Ideally, I would be able to specify an image for several different nodes, so that the nodes have custom header bg images. But for all other nodes and pages that don't have images specified, the header bg image just displays a random image, or if that's not possible, just one specified "fallback" image.

Any ideas how to accomplish something like that without creating a new addon?

 

[Ludachris]

Similar to this theme:

Dimension

Dimension for xenforo 2 Dimension is a minimalistic theme for xenforo with a unique header effect. Once scrolled, the parallax header collapses into a fixed bar at the top of the page, while also blurring the background image, placing focus on...

xenforo.com

Love the way they handle header images for nodes.

 

[Russ]

Some simple CSS in extra can do it:

.p-header
{
    background: pink;
    [data-container-key="node-7"] &
    {
        background: orange;
    }
    [data-container-key="node-9"] &
    {
        background: orange;
    }
}

You'd need to upload the images to your server first, but then you can easily use the above CSS to configure them. I set just colors... you'll need to do images.

 

[Ludachris]

Some simple CSS in extra can do it:

.p-header
{
    background: pink;
    [data-container-key="node-7"] &
    {
        background: orange;
    }
    [data-container-key="node-9"] &
    {
        background: orange;
    }
}

You'd need to upload the images to your server first, but then you can easily use the above CSS to configure them. I set just colors... you'll need to do images.

I knew you'd have an easy way to do it... what would the data-container-key code be for the default?

 

[Russ]

The "pink" background would be the default. So whatever you set there, if you don't have a node that has custom CSS it would fall back to the "pink".

 

[Ludachris]

What am I doing wrong? I added some code to target logged in users but the header bg is now white for members and guests and it's not changing in the specified nodes:

[data-logged-in="true"]
{
    .p-header
    {
            background: #0a0a0a;
        
        [data-container-key="node-90"] &
        {
            background-image: url("https://mysite.com/images/headers/header.jpg") ;
            box-shadow: inset 0 0 0 300px rgba(0,0,0,. 5); 
        
        }
        [data-container-key="node-10"] &
        {
            background: orange;
        }
    }
}

 

[Russ]

Your box-shadow is messed up. Space between the period and the 5, need to remove that. You probably have some server errors using the above code.

 

[Ludachris]

Your box-shadow is messed up. Space between the period and the 5, need to remove that. You probably have some server errors using the above code.

I see that now - I copied code from somewhere else for an overlay. Question though, if I'm using a custom node URL, will that prevent this from working?

 

[Russ]

I see that now - I copied code from somewhere else for an overlay. Question though, if I'm using a custom node URL, will that prevent this from working?

I'm not sure what you're asking, asking about like a route filter? The [data-container-key="node-10"] is in the source code on each node, as long as that's on the page the CSS will work.

 

[Ludachris]

I'm not sure what you're asking, asking about like a route filter? The [data-container-key="node-10"] is in the source code on each node, as long as that's on the page the CSS will work.

I was thinking this might affect it:

But I see in the source code the node ID is referenced so it shouldn't. Something else must be conflicting with it. I'll keep troubleshooting.

 

[Russ]

My mistake, overlooked something.

[data-logged-in="true"]
{
    .p-header
    {
            background: #0a0a0a;
    }
    &[data-container-key="node-7"] .p-header
    {
        background-image: url("https://mysite.com/images/headers/header.jpg") ;
        box-shadow: inset 0 0 0 300px rgba(0,0,0,.5); 
    }
    &[data-container-key="node-10"] .p-header
    {
        background: orange;
    }
}

[data-container-key="node-7"] & data-logged-in are on the same HTML element so the CSS is slightly different.

 

[Ludachris]

My mistake, overlooked something.

[data-logged-in="true"]
{
    .p-header
    {
            background: #0a0a0a;
    }
    &[data-container-key="node-7"] .p-header
    {
        background-image: url("https://mysite.com/images/headers/header.jpg") ;
        box-shadow: inset 0 0 0 300px rgba(0,0,0,.5);
    }
    &[data-container-key="node-10"] .p-header
    {
        background: orange;
    }
}

[data-container-key="node-7"] & data-logged-in are on the same HTML element so the CSS is slightly different.

That worked, thanks Russ!

 

[Ludachris]

Is there a way to check multiple nodes in one line, like in an array? This way it covers child nodes...

 

[Russ]

Is there a way to check multiple nodes in one line, like in an array? This way it covers child nodes...

No class for parent nodes, you'll need to add each node id (without doing some sort of other edits)

[data-logged-in="true"]
{
    .p-header
    {
            background: #0a0a0a;
    }
    &[data-container-key="node-7"] .p-header, &[data-container-key="node-8"] .p-header, &[data-container-key="node-8"] .p-header
    {
        background-image: url("https://mysite.com/images/headers/header.jpg") ;
        box-shadow: inset 0 0 0 300px rgba(0,0,0,.5); 
    }
    &[data-container-key="node-10"] .p-header
    {
        background: orange;
    }
}