How change component background color

Question

I would like emphatize items changing the backgroud color. In Particular I have a page with sap.uxap.ObjectPageHeader and a list with sap.m.ObjectListItem.

I want change the header backround and the list item background with @sapUiWarningBG color (https://openui5.hana.ondemand.com/explored.html#/sample/sap.ui.core.sample.BasicThemeParameters/preview)

If, for example, I try to set the header background by class property, it doesn't work..

<ux:ObjectPageHeader
    class="sapUiWarningBG"
    objectImageURI="sap-icon://database">

How can I obtain the result?

Answer 1

You try to use the theme parameter @sapUiWarningBG as style class. This does not work! You can think of theme parameters as variables which are used to define recurring values, e.g. background color. These variables can be used in your CSS classes. The final CSS is created by a CSS pre-processor, LESS in this case. Please check the documentation how to add custom CSS.

However, I strongly recommend to use the existing features to visualize the warning, e.g. by using an object status with state "Warning". You find extensive examples in the documentation.