Skip to Content

I started this journey here How to Find and Change the CSS Class – Design Studio

It is easier to do this using the conditional formatting from Analysis Office (seeChecking out Features from Analysis Office to Design Studio ) but maybe you want to read the exceptions from the BEx Query.

Some of this is described in the Design Studio Learning Hub material, but I struggled with it.  Finally I got it working today.

Step 1: Set up Exceptions in the BEx Query:


Step 2: In Design Studio, set up the custom.css for the Crosstab property as follows:


Code is also shown here for readability:


background-color:#FFFFFF !important;



background-color:#F9F9F9 !important;


.sapzencrosstab-DataCellAlert1Background, .sapzencrosstab-HeaderCellAlert1Background



background-image: url(‘/aad/resources/~1399838692937~/sap/zen/crosstab/themes/sap_platinum/img/exceptions/trend_asc_9.gif’) !important;

background-repeat:no-repeat !important;

background-position:center top !important;


.sapzencrosstab-DataCellAlert9Background, .sapzencrosstab-HeaderCellAlert9Background



background-image: url(‘/aad/resources/~1399838692937~/sap/zen/crosstab/themes/sap_platinum/img/exceptions/trend_asc_1.gif’) !important;

background-repeat:no-repeat !important;

background-position:center top !important;


Step 3: Place the custom.css in the Properties of the crosstab and set Conditional Formatting to true:


Step 4: At run time review the cross tab:


Step 5: Turn Exceptions off:


I need to change the color of the arrows but that is for another day.  I found the .GIF files by searching the DOM in IE11.

Here is a recording in action:


Design Studio 1.1 Full List of CSS classes (?)

HANA, BI, BW on HANA Hands-on Sessions with SAP Mentors at ASUG Annual Conference / SAPPHIRENOW

ASUG Annual Conference – Add Dashboarding/Design Studio to Your Agenda

Dashboarding/Design Studio Sessions at Conference

Find all the Design Studio-related sessions here for ASUG Annual Conference and below:

Session ID Title Date
1 Hands-on: SAP BusinessObjects BI 4.1, SAP BW and SAP BW on HANA – All in one day 6/2/2014
207 Latest News on SAP BusinessObjects Design Studio 6/4/2014
208 Influence SAP at the ASUG SAP BusinessObjects Design Studio Influence Council 6/4/2014
305 SAP BusinessObjects Analysis Roadmap to SAP BusinessObjects Analysis & Design Studio Roadmap 6/4/2014
1308 ASUG Influence Council: Business Intelligence with SAP BusinessObjects Mobile 6/4/2014
To report this post you need to login first.


You must be Logged on to comment or reply to a post.

        1. Hans Segers

          Hi Ryan,

          Did you get it working ? I have the same issue : the trend icons are well displayed when executing locally, but not when I execute in BI Launch Pad.

          Where do you have to put the .gif on the BI Platform ?

          Do you have to change something in the css to make it working in BI Launch Pad ?



  1. Onur Göktaş

    That is exactly what i was looking for. I was creating scorecards with separate text cells formatted by css, and wondering how it was possible for an entire crosstab like it was on tutorial. I was searching if i could set “If” conditions on a css file, but i was on a wrong path; crosstab cells are just defined by Alert1-9, separately. Anyway thank you for sharing this.



  2. André Berghaus


    the solution is working perfectly (only with one exception),

    but it only supports the first exception of a query, more will be ignored (no pics, only data shown).

    Any information about this?

    Regards, André

    1. Onur Göktaş

      Hi André,

      I am not sure if it’s the same problem but, i realized when i was working with exceptions that, you need to add a bex query as a data source after you make all exceptions at bex. I had two identical data source(same bex query);  one was supporting all of the exceptions but the other one was only showing the one i created before adding the ds. So if you make an exception after you already added your query as a data source to design studio, you need to delete/re-add the data source. Resetting initial view, reload,restart didn’t work for me.



  3. Jomy Joy

    Hi Tammy,

    How can we incorporate certain functionalities like:

    – Bold and Left Aligned some of the rows

    – Italic, not Bold and right aligned some of the rows

    What shall go in the CSS, as I’m a newbie in CSS and hence need your expert thoughts ?

    Thanks & regards,



Leave a Reply