Branding stylesheet logo image - target requires "Resolve css variables"

[Psider]

To help anyone in future, if you are using branding stylesheets with brand logos then you should tick the "Resolve CSS variables (recommended)" checkbox in the target's Advanced tab.

I'll describe what happens in the output for ticked and unticked scenarios.

HTML5 output using branding css and side navigation skin.

1. Unticked. A file is generated into the Skins\Fluid\Stylesheets\Images folder called "var(--LogoImage)" (no extension, just the variable name). Everything looks fine running locally on Windows (11). Uploading to a server, no image displays in the header.

2. Ticked. A file is generated into the same folder as above. It is the correct image (with name and extension) referenced in the branding stylesheet. It works locally and on the server.

(Interestingly, the file created in scenario 1 is actually the correct image, it just doesn't have the right name or extension. So it feels like a bug when the Advanced tab setting is not enabled.)

[Psider]

I should also clarify that when looking at the Styles.css file generated in the Skins\Fluid\Stylesheets folder, the background property has been set to :

background: transparent url('path/var(--LogoImage)') no-repeat center center;

which feels wrong, although I'm unsure how variables are supposed to work in this case. I need to do more research.

[AlexFox]

Can you share your :root declaration for that variable?

[Psider]

I created a fresh project using the Austin Tutorial template and simply unticked the "resolve" checkbox. So it's exactly as MadCap set it up. --LogoImage: url('../Images/Styles/Austin-Logo-Online.png');

[NorthEast]

Yep, I can reproduce this. I'm quite glad I only use CSS variables for things like colours and sizes in my skins.

That's a pretty bad bug, considering "Resolve CSS variables" is not set by default for new targets, and most people shouldn't need to set it unless they have to support IE11.

As branding and CSS variables were the two main features in 2023R2, you'd think this would've been tested a bit more thoroughly.

[Psider]

I've just submitted a bug report for it. I'll try to remember to post back if/when I hear back.

[AlexFox]

I've just submitted a bug report for it. I'll try to remember to post back if/when I hear back.

Someone needs to set up a public bug tracker we can all contribute to as MadCap won't ever divulge what has or hasn't been reported

[Psider]

Support has logged a bug report for this issue for me. Number 184710.

[Psider]

Further to this, I found the following when a project has two branding stylesheets. (I assume this holds for more than 2 branding stylesheets but I didn't specifically test that scenario).

1. If "Resolve css variables" is set in a target, the Branding Stylesheet set in the target is ignored and the Primary Branding Stylesheet is used for the output.
2. In this scenario, the "Resolve css variables" setting is also not honoured, and css variables are used in the output.

I've submitted a ticket to MadCap and will post back when I hear from them.

[Psider]

I made an error when typing point 2. Here's the corrected issue.

2. If there is no Primary Branding Stylesheet (either in Project Properties or assigned to the Primary Target), then the "Resolve css variables" setting is not honoured, and css variables are used in the output.

A bug ticket has been submitted for me ((#184178)