on 01-07-2014 4:01 AM
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
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thank you !
Best Regards.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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..
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
88 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.