CSS loads with unknown property name warning

Good morning, we have a button that we want to toggle between red and blue.   We accomplished this by adding style the the extended properties of the button.

This button lives in a web block that is placed in a placeholder at the top all of our screens.   

When a user navigates between pages and the condition for red button is true; Chrome developer tools shows that the CSS is there but is not being loaded because the property name is unknown, however as soon as you mouse over the button it immediately turns red and the unknown property warning goes away.   I'm puzzled by how this is happening, any ideas?

Hi Josh,

Try this:

If(Session.CTI_PopsPaused, "background-color: red; color: white;", "background-color: white; color: #59ABE3;")

Regards,

Daniel

Hi Josh,

You don't need to treat most CSS property values as strings, except in some cases where you need to point towards external resources, such as background-image:url('URL'). 

Try removing the single quotes from your values.

Daniël Kuhlmann wrote:

Hi Josh,

Try this:

If(Session.CTI_PopsPaused, "background-color: red; color: white;", "background-color: white; color: #59ABE3;")

Regards,

Daniel

Same warning/lack of CSS application.   We event went a step further and removed the IF so it's just style  "background-color=red; color =white;"

It appears in the Chrome developer tools and says element.style background-color is an unknown property name.   At this point we are just going to create two buttons with the proper coloring and wrap them in an If condition so the proper button is displayed based on the variable... but it's odd for sure.

Solution

Not use = but :

Solution

And Afonso is right too

Goodness, I looked at this so long and never spotted the =.


Thanks!

Your welcome, and the single quotes that where not necessary as Alfonso stated.

Due to the = your code was interpreted that the background-color is an html property, which it isn't it is a css style property.