Can't get simple CSS injection to work

[David_Nicks]

Trying to create a knockout effect for a label, where the label text is transparent to reveal the background of the flex container, and the label background is black. No issues doing this with the advanced stylesheet, but I'm not having any luck doing it with CSS injection instead. Client not sold on using advanced stylesheet, so hoping to get CSS injection working.

The stylesheet CSS that works:

.psc-inverted-label {
	color: white;
	background: black;
	mix-blend-mode: multiply;
}

But when I instead use the backgroundImage style property to inject some CSS, it doesn't work. The extra properties are not showing up in the browser.

I'm sure I'm missing something obvious...but just can't see it yet. Ideas? @victordcq?

[victordcq]

The stylesheet is 100% better than css injection.
Css injection only works inside a text field inside the perspective style classes ui.
But i can not see how this would be ever preffered over stylesheet.css; I only ussed this because perspective did not have the stylesheet feature yet.

If you are on a version that can use it. use it.

You can add any css propertiy in perspective styles though even the ones the designer doesnt know.

(Altho newer ones might not work in the designer they will work in the browser)

Though i guess if you only need to add in some simple properties that are not in the style Ui you could indeed add them with injection putting the string you posted inside a class, and assigning the class to the label

[PGriffith]

@David_Nicks

Client not sold on using advanced stylesheet, so hoping to get CSS injection working.

This is baffling to me. They'd rather use an undocumented, unintentionally supported edge case in our parsing over an officially supported feature built into the software that's explicitly more powerful?

[David_Nicks]

I expect to go this route as well. I much prefer the stylesheet for the reasons @victordcq described.

Meanwhile, it still bothers me that the above approach doesn't work...it seems to be exactly as described elsewhere on the forum.

[jlandwerlen]

It bothers you that something not supported doesn't work?

[victordcq]

where exactly is this mentioned in the forum? as im pretty sure i always said it should be in a styleclass, or just as seperate properties...

[David_Nicks]

It bothers me that something that appears to work for others, which seemed to be a quick fix for a small problem, doesn't work for me, and I'm simply trying to figure out what I'm getting wrong, because I'm detail-oriented and like to understand things. That's all.

[David_Nicks]

Had to re-read your previous post a few times and it finally sunk in...I wasn't getting that injection is not required at the component instance level - you simply add the style properties as new values, rather than injecting them. In a class definition, you have to inject because there is no way to add properties to the class definition via the UI.

See, I knew it was something simple I just wasn't seeing up front...

[lrose]

@David_Nicks

I'm simply trying to figure out what I'm getting wrong

For what it's worth, if you do the injection with the proper syntax in a style class it does work:

Notice the }{ and the selector?

} .psc-knockout {color:white; background:black; mix-blend-mode:multiply;}{

Result:

Still, use the Stylesheet or add the properties manually.

[victordcq]

if you dont use the }{ you can still add in properties that are not defined in the styleclass ui (like mix-blend) like he did by adding a ;

So this will work on the class too,

;color: white;	background: black;	mix-blend-mode: multiply;

if filled in here

@lrose

For what it's worth, if you do the injection with the proper syntax in a style class it does work:

[David_Nicks]

@lrose

or add the properties manually.

That was my main mistake.