How to Find and Change the CSS Class – Design Studio
First I used the Learning Hub with Design Studio 1.2 but I still struggled, mostly with Internet Explorer 9. Then I upgraded to IE 11 and it became a lot easier to navigate the DOM and find the CSS classes in my application. For reference, see http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85)
Step 1: See simple crosstab below in runtime
Step 2: Click F12 with IE11
IE11 has a nice DOM Explorer (easy for newbies to CSS/DOM to follow)
Step 3: Select desired element to analyze CSS class using the arrow/box icon (or Ctrl-B):
Step 4: On the right of the Styles, you can navigate to the desired class to select.
Step 5: After finding desired CSS class, right click and Copy to the clipboard.
Step 6: Open a text editor like Notepad. In my example, I am changing the totals row to orange. Save it as a .css file in the Repository folder. If you are launching this on the BI launchpad you will need to upload the .CSS to the platform.
Step 7: Place the custom.css in the Properties of the Crosstab.
Notice now the totals row is now in orange.
See video below:
Related:
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 |
Hi Tammy. Great write up!
What if I wanted to apply some CSS rules to one checkbox group, and not another?
For example, I have placed in the application Custom CSS formats that I want to apply to make the checkbox group 2 columns.
However, for another checkbox group, I'd like to make them just 1 column, which is the default.
The CSS applies to all instances of the class. How can I differentiate the one checkbox group? I tried putting the class only on the checkbox group in the Display - CSS Class
Hi Robert -
Thank you for reading and replying.
I don't have the answer to your question; I recommend creating a new discussion and see if others can assist. This space has some great CSS contributors.
Tammy
The CSS for dummies document I was dreaming of.
Thanks