Custom CSS in SAPUI5 Application

Question

i have a question based in this:

i load my css like this in my manifest.json:

"resources": {
    "css": [{
            "uri": "css/custom.css",
            "id" : "customcss"

    }]
},

so my css only will affect the elements and not the theme ? or the theme in fiorilaunchpad will affect everything ignoring my css?

What are those elements you want to change with your custom CSS? Is it about fixing cosmetic bugs? Do you want to change some colors? What do you want to achieve? — Boghyon Hoffmann

luuksen luuksen · Accepted Answer · 2018-03-28T13:21:54

CSS is quite powerful and you can pretty much change anything you want, including the existing SAP themes, if you decide to change properties in the existing standard classes (normally beginning with "sap").

See it this way: Fiori always loads a standard theme first and applies its styles to the existing controls based on the Fiori UX and Guidelines. Now you can pretty much change anything in your CSS you want to overwrite, but be aware that you easily break things like responsiveness if you change size properties like width/height of controllers.

I would only use CSS in combination with custom classes on my controls and only change things that do not interfere with the sizing/layouting of controls. So I would only change colors, font sizes, etc.

Custom CSS in SAPUI5 Application

1 Answers