The visual display of SAP UI5 controls can be edited in various ways. One simple way is to define an own CSS style class and to embed it to the SAP UI5 Control. It is verry simple:
Extending the SAP UI5 INDEX file
Add a new css class to the index.html. Of Course, there are also other ways (external css file, … ) – but in this example we will add the style-class direct in the index.html file;
Adjusting the SAP UI5
Use the method addStyleClass to add the new css class to the sap ui5 control:
Result
Not very surprisingly, the font color is whit, black background and italic:
Hi Johann,
Can you also let us know how to use external css file. thanks in advance
Hello Rohan,
just tried and it worked.
Just add this line to HEAD in index.html:
<link href=”custom.css” rel=”stylesheet” type=”text/css”>
hello Alexander,
<link href=”custom.css” rel=”stylesheet” type=”text/css”>
it was not working with classes(.hims), but it is working with Id(#hims).
Hi Himshwet,
I also found the same
custom css not working on classes eg (.hims)
you found at any reasons for this?
How to override standard SAP UI5 classes that applies in DOM?
I also tried the same one but it is working only in eclipse internal browser not working in any external browser what could be the issue?
Hi,
which external browser do you use?
Regards, Johann
What if we are following Component approach by using Component.js instead of index.html and lets say deploying our application to launchpad. In that case ,we won’t be writing our own index.html so where are we going to write our code of defining Custom CSS
You can add the following code to your createContent() method of your Component:
var csspath = jQuery.sap.getModulePath(“your.component.name”,”/foldername/filename.css”);
jQuery.sap.includeStyleSheet(csspath);
Regards,
Anjana
what do you mean by your component name is it the name of the view ??
No, it is the name of your component. The namespace that you have used for your project to be specific.
eg: sap.trans.eg is the name of your component or the namespace of the app
and your view name would be: sap.trans.eg.view.App
Regards,
Anjana.
Use into onInit …
Correctly!!!!!!!!!! 100% for my use case.
How to do the same with XML view?
Did you get the answer ? I need to apply custom css to one of my form element.
how to apply Custom CSS for Calendar (sap.me.Calendar)