It is always a lot of fun playing around with CSS (Cascading Style Sheets) ! In this blog, I have showcased some of the cool things I’ve tried to do using CSS in SAP Design Studio. You can also check out these blogs about creating basic animations and custom background patterns using CSS.
To get some basics out of the way, the look of components is determined by the theme of the application. To make changes to the look and feel of a component, we can use the CSS Style Editor and change the UI properties. But if we would like to change a whole bunch of properties, we can group them in a CSS Class and assign that class to the component, in the CSS Class property. We can consolidate multiple such classes, in a single Custom CSS file for the application. This must be located in the root folder of the application. It is very helpful to have a CSS file for the application, with all the classes, because it makes it so much easier to make global UI changes across the application.
Inline CSS – defined using the CSS Style Editor – in the Display properties of the component.
Display Properties – SAP Design Studio
CSS Style Editor – SAP Design Studio
Linking a Custom Style Sheet to the application – the .CSS file needs to be placed in the repository folder of the application. The repository location can be accessed from ‘Application -> Open Repository Folder’.
Repository Folder
The style sheet can be linked to the application by specifying the .CSS file name in the ‘Custom CSS’ Display property of the application.
Custom CSS File in SAP Design Studio
You can now assign any of the classes to each component by specifying it in the ‘CSS Class’ Display property of the component.
CSS Class
It’s Showtime !
Some of the images / animations shown below may not render well in some of the browsers, particularly IE. Some might give unexpected results…just a word of caution ! If you would like to take a look at the related CSS files used in this blog, feel free to reach out to us at solutions@visualbi.com. If you have some crazy CSS ideas, would love to hear from you ! Feel free to send yours with your name, a cool caption and the application file.
To conclude, SAP Design studio is well on its way to becoming the de-facto tool for dashboarding. Coupled with the power and flexibility of CSS, imagination is the only limit !
Show your love to SAP Design studio – HEART
The sky is the limit – CSS Animation – CLOUD
Seek Direction – COMPASS
Remembering my First Game – MARIO
Save Water – WATER_DROP
Text and Button Effects :
Hexagonal Button – HEXA_BUTTONS
Ribbon Text – RIBBON
Stamp Effect – STAMP
Talk Bubble – TALK
Text Effects – TEXTEFF
The post Fun with CSS in SAP Design Studio! appeared first on Visual BI Solutions.
