cancel
Showing results for 
Search instead for 
Did you mean: 

How to integerate external css for sapui5 controls and how to override the existing css of the base theme?

Former Member
0 Kudos

Hi

I am not able to customize sap ui5 controls using external css. What is best way to integrate external in my sap ui5 application?

Can i get any tutorial for that?

regards,

Madhan

Accepted Solutions (0)

Answers (6)

Answers (6)

0 Kudos

Hi All,

The following images shows the folder structure where to create an external css file in the SAPUI5 project.

1) Create a folder under WebContent (Right click on WebContent folder New->Folder) and name it as "css".

2)Create a new css file under "css" folder. Extension of this file must be .css. Best way is to create the file on the desktop, cut it and paste.

3) Link that file with folder path in ur index.html file.

david_fryda2
Participant
0 Kudos

Thanks!

Regards.

david_fryda2
Participant
0 Kudos

Thank you !

Best Regards.

Former Member
0 Kudos

Hi,

You can use addStyleClass("styleclassname") method to any control and write code is external css file like

.styleclassname{

background:red !important;

}

Its better to follow sap provided styles.If you need more control over your design find the sap provided style class names using inspect element tool and override that.

for example..

footer.sapMBar {

   height: .75rem !important;

   background: red !important;

}

I changed the sap.m.page control footer color and height using above css.

find the css classes and play around have fun...

JS Bin - Collaborative JavaScript Debugging

Regards

david_fryda2
Participant
0 Kudos

Hi everyone,

I tried the classic :

<head>

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

</head>


But it doesn't work.


Did someone succeed ?


Thanks.


Regards.

Private_Member_15166
Active Contributor
0 Kudos

Hi,

Follow this document.

This might be helpful for you.

surendra_pamidi
Contributor
0 Kudos

Hi Madhanabharathy,

You can copy the styles of controls alone from the library.css file of sap ui5 themes.. you can get the library files from the developertools - Network (or) do right click on the control which you want to change the css of control.. You will see inspectelement option after right click. Click inspectelement.. You will get developertools again. In that you will find Elements, Resources,Network etc.. From "Elements" you can see the css of that particular control  style under the right side "styles" tab. Then you can copy that css style alone and add that css style property in new css file and modify it..

You can add css file in any HTML or JS file by using follow methods..

jQuery.sap.includeStyleSheet("A.css","id");

Where A.css is your new css file and id is any id given by you. You can give any id name you want..

Former Member
0 Kudos

thank u surendra..

Former Member
0 Kudos

Hi Madhanbharathy

were you able to do this? IF so can you please share the process that you followed.

In my scenario I have extended from panel and its renderer. I want to override default panel header styles.

any pointer

regards


former_member184867
Active Contributor
0 Kudos

Hi Madhan,

Did you check this blog http://scn.sap.com/community/developer-center/front-end/blog/2013/09/19/create-and-apply-custom-them...

and  https://openui5.hana.ondemand.com/#docs/guide/Theming.html

and if you want something very handy and quick use .addStyleClass("myStyle")

Regards,

Atanu

Former Member
0 Kudos

thank you Atanu. Wil check that.

regards,

madhan