Log in to AnswerLog in to Follow
UserImage.jpg
Tom Meehan
27Views
2Comments
How to set background color for entire screen
Question
Mobile
CSS
Application Type
Mobile
Service Studio Version
11.50.19 (Build 53358)
Platform Version
11.15.0 (Build 33590)

I need to set the background color for the entire screen, including the header and bottom layout objects.  I thought I had a work around by setting the background colors of all the elements to the color I need but the main content doesn't extend down to the bottom  so there is a gap between them where there apparently isn't a background to set a color to.  It seems like there would be a way to make the main content grow to bump up to the bottom - but so far I. haven't seen how to do that.  So I guess either fix will help... either setting the background color of the whole screen OR set the appropriate styles to the body content so it extends to the the bottom, thus avoid the no man's land in between them.  Any help would be greatly appreciated.  BTW this is for a mobile app.

0
0
02 Dec 2021

Hi Tom,

You can achieve what you need, by setting the values of some CSS variables on the root section of tyour Theme:

:root {
    
    /* App Settings */
    --header-color: #ffffff;
    --footer-color: #ffffff;
    --color-background-body: #ffffff;

}

If the above example, the background color will be white, for Header, Content and Footer (change '#ffffff' to your desired color).

Hope this helps.

Best regards,

Paulo

1
0
02 Dec 2021
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.