Body Background-Color property

[rshah]

Hi All,

How can I set the background color of a custom page?

Forgive me if this is too simple of a question, or if I'm missing something obvious, but this isn't working and I can't really figure out why....

I've read through this: https://help.infiniteautomation.com/using-custom-css-styles/

I presume what is happening is since the <style> is being applied IN the body it can't repaint, so we'd have to make the change in the head, but I'm not sure how to do that for one page only.... or if I'm totally off track here. I guess we could also add a div that is the size of the entire page, and style that if that is the right way to go.

Edit inspector image:

[Jared Wiltshire]

@rshah you are changing the background color of the body element just fine. There are other elements in front of it though, you need to change their background colors. Use your browser's element inspector to discover which element you need to change the background color of and adjust your style sheet accordingly.

Are you sure you just don't want to change the theme? You can change the colors under "Administration", "UI settings".

[rshah]

@jared-wiltshire said in Body Background-Color property:

Are you sure you just don't want to change the theme? You can change the colors under "Administration", "UI settings".

Hey @Jared-Wiltshire ,

Thanks for the quick reply. Changing the theme works great! Thanks for the tip.

[Jared Wiltshire]

@rshah no problems. You can also define a custom palette in the JSON store if you need more control over the exact colors -

Go to /ui/administration/json-store-editor/mangoUI-settings
Modify the JSON adding a "palettes" property like below. my-palette is the name you have given to the palette, after you refresh the "UI settings" page it will be available for selection for a theme.

{
    "palettes": {
        "my-palette": {
            "50": "#ffffff",
            "100": "#ffdfbd",
            "200": "#ffc485",
            "300": "#ffa23d",
            "400": "#ff941f",
            "500": "#ff8500",
            "600": "#e07500",
            "700": "#c26500",
            "800": "#a35500",
            "900": "#854500",
            "A100": "#ffba6f",
            "A200": "#ff921c",
            "A400": "#ff8500",
            "A700": "#da7200",
            "contrastDefaultColor": "light",
            "contrastDarkColors": "50 100 200 300 A100"
        }
    }
}

Here's a reference for the palette properties.
https://material.angularjs.org/latest/api/service/$mdThemingProvider#mdthemingprovider-definepalette-name-map

[rshah]

You guys are the best, thanks!

The custom palette worked even better for our needs.