Change background in SAPUI5

[rodrigo_esteves]

Hello!
I'm new to SAP UI5 and I'm facing a problem that was faced before around by some other colleagues in a different way.

I have this main index page with a light blue background and I would like it to have the same background as my CRUDS views background, the blue-greenish gradient from the blue crystal theme.

Is there a way I can set the backgroundDesign property in my sap.m.Page component in order to have the desired background?

This is the background I need to change:

This is how I want it to look like:

Thanks a lot!

[Former Member · Accepted solution]

Hi Rodrigo,

You can use a Shell component to wrap your pages, this control already contains properties that will handle width (in case you need to resize your app like that in order to show the background on the sides and you app centralized) and also background.

See more in OpenUI5 SDK - Demo Kit - Shell

Please reward if helpful.

Thanks.

[rodrigo_esteves · Accepted solution]

Hey Jefferson, thank you.
I fixed the problem using your solution, by wrapping my App control inside a Shell control. Just had to take a look at the component properties.

Thanks a lot!

[Former Member · Accepted solution]

Hi Rodrigo, if you could post your shell code here, it would be helpful for others

[rodrigo_esteves · Accepted solution]

Hi Jefferson.
Heres how I made it and how it looks like now.

 

  Nevertheless, I would like it to look like the following, but I can't see to find a property or method inside my Shell or App control that allows me to set only the tiles on the  the same blue-greenish background. Like this:

Thanks in advance for your time!

    

[Qualiture · Accepted solution]

In order to achieve more or less the same results, you should override the .sapMShellGlobalInnerBackground and .sapUiUfdShellBackground, .sapMGlobalBackgroundColor CSS selectors with transparancy

If I remember correctly, I couldn't get it to completely having the original background (seems there is a slight lighter layer on top which I could not find) but according to your two images, the latter seems also a bit brighter

[rodrigo_esteves · Accepted solution]

Hey Robin, thanks for the reply.

UI5 is using LESS internally to enable theming, so I can only access the the plain generated CSS via chrome dev tools. I'm not able to make a custom .css to override those class selectors you pointed out with my desired properties. Perhaps there's some detail I'm not seeing.

I'm using HANA Web IDE by the way.

[Qualiture · Accepted solution]

I just looked it up, and I just used this in my custom stylesheet to override the CSS properties in the standard generated CSS:

        .sapUiUfdShellBackground, .sapMGlobalBackgroundColor {
            background-color: transparent !important;
            background-image: none !important;
        }


        .sapMShellGlobalInnerBackground {
            background-image: none !important;
        }

[former_member204297 · Accepted solution]

Thanks Robin, It was helpful to solve my issue.

[Former Member · Accepted solution]

Hi Robin, Is there any CSS properties for app like you did for shell..bcoz i want to use that blue-greenish background in my app.

[former_member220149 · Accepted solution]

do you mean

background-image: linear-gradient(to bottom,#2da9b1 0,#178299 50%,#1a4c7d 100%)

?

[Former Member · Accepted solution]

Yes..exactly..Thanks Tina

[pinakipatra]

Hi ,

you can use css

create css file and in your index page give a link to the css file

use inspector in chrome to find out the body/background class
copy paste that class in your css file
there you can see something 'background-color : <give desired color here> '

this should change the background color everywhere inside index (ie. views)

[rodrigo_esteves]

Thanks Pinaki. I could not get my custom CSS to work inside my html. Though it gave a great insight to see how the library.css from UI5 works. I have to read  about LESS in order to understand better the subject.

Thanks a lot for your support!