Blogs / SAP / SAP BusinessObjects / SAP Design Studio / Tips and Tricks / Customizations: Using CSS in SAP Design Studio Dashboards

Customizations: Using CSS in SAP Design Studio Dashboards

Oct 21, 2014

SHARE

In many of our client dashboards, we use patterns created using CSS in SAP DesignStudio, for the background. Though we could just as well use images, using CSS patterns helps us come up with some really creative and interesting backgrounds. And as we know, CSS is light weight, responsive and also loads quicker than regular images. Using the right patterns can also make a huge difference on the overall user experience.

Steps for using CSS in SAP Design Studio

1) Insert a Textbox in the Application and set the Width and Height to auto and Margins to 0.

Customizations: Using CSS in SAP Design Studio Dashboards
Customizations: Using CSS in SAP Design Studio Dashboards

2) Now insert the CSS code in the CSS Style Editor, as shown below.

background:

linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;

Customizations: Using CSS in SAP Design Studio Dashboards
Customizations: Using CSS in SAP Design Studio Dashboards


3) Another way is to use CSS Class. Insert an Image component in the application.

Customizations: Using CSS in SAP Design Studio Dashboards

4) Create a CSS file with Class ‘patterns’.

Customizations: Using CSS in SAP Design Studio Dashboards


5) Now set the CSS Class for the Image component to ‘patterns’. That’s all there is to it! The main part of the effort is in creating an effective background using CSS in SAP DesignStudio

Customizations: Using CSS in SAP Design Studio Dashboards

Read more blogs from SAP BusinessObjects Design Studio category here.


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 Blog!

Share this blog with your friends and colleagues!