Set the background color of the Skuid Header dynamically on basis of the value of a field in custom

You can by hacking the XMl. Start by adding a background color as normal in the page builder. Then, open the xml and find the the line of code that sets the background color. Replace the color with a merge variable like {{$Model.MyPageSettings.data.0.Color__c}}.

Hi Raymond
Thanks for your reply.

I have tried this, but it doesn’t seem to works.

Hmmm… I use this method to change background images… I assumed it would work for colors as well. I know it works for images because I am doing it. For images, save the images in static resources and then use the method I laid out to change them. You could upload solid color images set to stretch and it would give you a solid color background.

Thanks @Raymond.
I will try this solution.

In addition to this, I tried with Custom Label to set the background color, but that didn’t work too.

Have you tried Raymond’s method with everything in the header inside a wrapper component, setting the background of the wrapper dynamically with merge syntax? You would have to run skuid.$C(‘WrapperId’).render() every time your color field changed.

If that doesn’t work, you can use a brute force jQuery method.

Set a model action to run every time your color field changes. The action should run a javascript snippet.

To begin, set the snippet to just console.log(arguments) to see what you get in the runtime console, in order to get the value of the field from the arguments.
Once  you have the value of your color in the snippet, you can do something approximately like this:

skuid.$C(‘HeaderComponentId’).element.css(‘background-color’,YourColorValue);

Hey Matt,

Hope u r doing well.

Well your solution works fine with the HeaderComponentId.
What if I need to use  - HeaderComponentCssClass ?

I haven’t tested, but something like this might work:

skuid.$(‘.HeaderComponentCssClass’).css(‘background-color’,YourColorValue);

Thanks Matt.
It seems to work, while the CSS is not working for the buttons on “Show Popup”.

Also Matt,

Just want to know may be you have done something like:
can we set the color property with element - !important

e.g : skuid.$(‘.HeaderComponentCssClass’).css(‘background-color’,red !important);

you will need to place it in quotes, but I believe that should work:
skuid.$(‘.HeaderComponentCssClass’).css(“background-color”,“red !important”);

Hey Matt,

This doesn’t seem to work. In fact Css is not working If I use “!important” in the CSS. Any suggestion?

Not sure, sorry. I’m not a css expert. I always just play with it in the browser console and elements panels until it works.

No problem. I will try to do the same.
Thanks!