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.

Fun with CSS in SAP Design Studio!
Display Properties – SAP Design Studio
Fun with CSS in 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’.

Fun with CSS in SAP Design Studio!
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.

Fun with CSS in SAP Design Studio!
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.

Fun with CSS in SAP Design Studio!
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@test.visualbistage.wpengine.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

Fun with CSS in SAP Design Studio!


The sky is the limit – CSS Animation – CLOUD

Fun with CSS in SAP Design Studio!

Seek Direction – COMPASS

Fun with CSS in SAP Design Studio!

Remembering my First Game – MARIO

Fun with CSS in SAP Design Studio!


Save Water – WATER_DROP

Fun with CSS in SAP Design Studio!

Text and Button Effects :

Hexagonal Button – HEXA_BUTTONS

Fun with CSS in SAP Design Studio!
Fun with CSS in SAP Design Studio!

Ribbon Text – RIBBON

Fun with CSS in SAP Design Studio!

Stamp Effect – STAMP

Fun with CSS in SAP Design Studio!

Talk Bubble – TALK

Fun with CSS in SAP Design Studio!

Text Effects – TEXTEFF

Fun with CSS in SAP Design Studio!


Corporate HQ:
5920 Windhaven Pkwy, Plano, TX 75093

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com


Copyright © Visual BI Solutions Inc.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This!

Share this with your friends and colleagues!