Posted on by

UI5 Styling & Theming

The main motto of styling &  theming in our application is responsiveness as well as  look & feel.

Here, we will design a form and will change the styling of the page by using the CSS as per the screenshot :-

Output

Step1:- Open our existing previously developed application from Here

Open the application in eclipse and right click on the WebContent and create a new folder named it as CSS as mentioned below:-

CSS

Then right click on the created CSS folder and create a new file named as new.css :-

CSS2

Next , let us open the index.html in HTML editor and add this piece of code(marked in yellow) to our existing code:-


<link rel="stylesheet" type = 'text/css' href='css/new.css'>

Link

Step:2 Now if we want to add the CSS to that particular element then add this function [.addStyleClass(“inputCss” & .addStyleClass(“btnCss”)] respectively for the text field and the button to the code:-

createContent : function(oController) {
 var oSimpleInput = new sap.m.Input({
 
 placeholder:"Enter Name"
 
 }).addStyleClass("inputCss");
 
 var oBtn = new sap.m.Button({
 text:"Submit"
 }).addStyleClass("btnCss");

Now, let us add this CSS in our new.css file :-


.inputCss{
 
 width: 60% !important;
 padding-left: 30% !important;
 
}

.btnCss {
 
 width: 60% !important;
 padding-left: 30% !important;
 
}

Now to change the color of the button to red let us apply the mentioned code to the button class :-


.btnCss>.sapMBtnInner {
 background: #007cc0;
}

Step:3 Now we have got the exact output as below:-

Output

That’s all for now, Stay tuned for more 🙂