4

Is there anyway we can override existing theme and its controls to a custom font?

Problem: I can able to override the global font with my custom font, but I can't override each and every controls font since all the controls have their own Font property assigned rather than inheriting from the global.

Any solution?

2 Answers 2

7

UI5 Theming and LESS

UI5 is using LESS internally to enable Theming in a comfortable way. LESS is a CSS Precompiler that extends CSS functionality. The implication and drawback is that the delivered UI5 Themes are precompiled already meaning your application is only using the generated, plain CSS.

UI5 Tooling for Themes

Unfortunately the real UI5 tooling behind it wasn't unveiled to us developers so far. The only tooling they provide is Theme Designer. There even is a on-demand version here. With Theme Designer you should be able to achieve easy styling changes as you are looking for.

Hacking UI5 Themes

But still all the ControlName.css files contained in the Themes ARE the uncompiled less files and you can find all the LESS variables UI5 is using in the library.less file. So with a little bit of hacking you should be able to recompile those LESS files into a new library.css file which is used at runtime. All css files of a library are combined and compiled with library.less into a single file - library.css

So if you want more details and understand what's going on behind the scenes check the library.less files e.g. http://[host][:port]/[path_to_my_application]/resources/sap/m/themes/sap_bluecrystal/library.less

You will find all the UI5 LESS variables in there. Probably most interesting for you is @sapUiFontFamily.

Anyways I would not recommend to change a lot in here since your styling can break very easily with new UI5 versions!

3
  • Very detailed indeed! Yes I started to work on the UI Theme designer will comfort myself to it. I will also look into your suggestion on compiling the LESS option. Thanks cschuff!
    – Chillbird
    Jul 23, 2014 at 12:29
  • You're most welcome. If struggled quite a lot with building custom themes. Yes, it's a pain :D If you liked my answer please mark it as correct answer. BR Chris
    – cschuff
    Jul 23, 2014 at 12:32
  • Ya, we are building a custom look and feel staying away from existing sapui5 Theme. So lots of customization is needed. Thanks for helping!
    – Chillbird
    Jul 23, 2014 at 12:39
0

Are you using the UI Theme Designer to generate the CSS files for your custom theme? If not, you should give it a try. It makes adjustments really easy.

To customize a few or all font families, simply choose the "Expert" settings tab on the right hand side of the designer and filter for "FontFamily". It will then list all the relevant attributes.

1
  • Thanks TimoSta! But we are not using any theme designer.Its just plain css editing and we don't have exposure or access to this theme designer yet in our team. So thought of asking some tips and tricks from experts.
    – Chillbird
    Jul 23, 2014 at 8:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.