Customizations: Using CSS in SAP Design Studio Dashboards
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.
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;
3) Another way is to use CSS Class. Insert an Image component in the application.
4) Create a CSS file with Class ‘patterns’.
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
source: http://visualbi.com/blogs/design-studio/css-in-sap-designstudio/
Heya, nice post, I am attempting to do something similar, but I want to do it with an actual image file(.jpg/bmp etc) is there a way to call a .jpg that is uploaded to Design studio in CSS? similarly to the way you would call an image in your websites folder ie: images/examplepicture.jpeg (CSS)?
I believe image paths should be referenced relative to your CSS file. So if your CSS is in a resources/ folder, and your images are in resources/images, you can just reference images/example.png in your CSS.
Hey Michael I have tried that.. it doesn't work.. I assume its because the image is called but since it is local it won't appear on design studio (thats why I am searching for a way to call uploaded images) :/ this is driving me nuts
Maybe I'm misunderstanding the problem.
Your CSS is uploaded to BIP via DS Client into your CMS and you are unable to do the same with your images? This is possible if you didn't know. I did a somewhat related blog on dealing with MIMEs here if it helps:
Design Studio 1.3 - Making Adhoc Analysis Template, Images, and CSS Work
Hey Michael let me try explain it a bit better, I am working on design studio remotely on a clients server. So basically I am using a VPN to connect to Design studio BI. I am trying to add a picture to the background of a KPItile. So what I have done, is created a folder on my C Drive(my laptop) to hold css images + css. Since that was unsuccessful I have also done the same to the Server machine where the BI is installed for the specific client I am working on, with the only difference is that I created the folder (containing my css+ image) on the following path (C:/program filesx86/SAP/BI... templates)<- that is also where Design studio is installed. Something to note: on my laptop in preferences the templates folder is located in program files(64 bit folder) I don't know if this is of any importance.
The folder I am refering to is called css and it contains a CSS file and another folder "images" that has example.jpg.
My css script says the following:
.exampleclass
{
background: url(images/example.jpg);
}
the KPItile component class is the same.. Am I doing something wrong?
Sorry for the extremely long and boring post. (I looked at that post coincidentally about an hour ago but I got more confused:/)
thank you for your response
-Stav