UI Theme Designer CSS

[roger_beach]

I am looking for a better understanding of how to work with the UI Theme Designer and the CSS Tab.

I am working with the ESS Landing Page.  There is CSS within the application that control the color of the Header inside the lane.

when I Inspect Element in Chrome, I can see the CSS that is controlling this from the application:

I have added the URL to the application in the Theme Designer and on the CSS Tab I have added the following to my custom theme (based on sap_goldreflection):

In the preview of the theme designer I can see this change to the darker green that I set:

When I inspect the element in Chrome within the UI Theme Designer, I can see my css from the css tab being applied:

If I comment out this portion of the CSS in the lpd.css of the application itself and then launch the application with my custom theme via URL Parameter &sap-theme=ZMSU_Goldtheme0502, the CSS is not applied although I can verify in Chrome's Developer Tools that the theme is loaded.  This results in the background of that Favorites box just being white.

Am I not utilizing the CSS tab in the Theme Designer appropriately?  Or am I missing a step or something?

Tags edited by: Michael Appleby

[jmoors · Accepted solution]

Are you using sap-theme or sap-ui-theme? I think sap-ui-theme is the correct parameter.

Regards,

Jason

[roger_beach · Accepted solution]

I also needed to tell it where the theme was so instead of just:

&sap-ui-theme=ZMSU_Goldtheme0502

I needed to add the path as follows:

&sap-ui-theme=ZMSU_Goldtheme0502@/sap/public/bc/themes/~client-100

[Noel_Hendrikx]

Hi Roger,

I am not 100% sure, but the CSS tab is for SAPUI5 / Fiori only at the moment. Maybe or can confirm this.

Cheers,

Noel

[agentry_src]

Hi Roger,

There is a rather comprehensive set of documents in the What is SAP Fiori UX? landing page which covers the Theme Designer.  It is focused on its use with Fiori, but most of the docs and blogs are more generic.

Take a look and see if there is anything there to help with the CSS override window.

http://scn.sap.com/docs/DOC-53179

Regards, Mike