Skip to Content
Author's profile photo Koen Hesters

Design Studio how to crack the CSS code

I checked a lot of posts here and there are a lot telling us please use F12 to see which CSS code is used behind your component, so you can make changes.  Well with this blog I want to explain step by step what to do to have your changes up and running in your SAP Businessobjects Design Studio app. I’m certainly not the master of this code cracking, but I wanted to share this basic how to so you can play with the css styles of all the components.  I’ll explain it via an example. Say you want to change a radiobutton by pushing a button to show the values in horizontal order in stead of vertical order.

  • Initial set up radiobutton
  • initial set up button
  • code on event, to set the CSS class:

    Now we are all setup to set the required changes


    you can right click on the object in your webapp and select control element, the code in the DOM will be pointed out.

    another method is to:

  • First we need to find out the CSS behind the radiobutton, so we run the Design Studio app, I have chosen in local mode
  • After run, Press F12
  • On explorer tab you will get all the html code behind your app.
  • via search you can fill out “radiobutton” the component we want to alter the code
  • in the left window you will see the style code
  • checking the code we ‘ll see the CSS style defining the layout of our component
  • CSS code:
     	display: inline-block; 

    If we add this code to our CSS style sheet, you can open it via the icon in toolbar or go the properties of your App



  • Note that CSS code refers to the Radiobuttoncomponent via class: .sapUIRb
  • If we just copy paste the code and add line to adjust the number of columns we have changed the SAP default style of the component.  So all Radiobuttons using not a specific CSS class will be changed because the default class is retrieved.
  • Business Content like-
     	display: inline-block; 
     	columns: 3;
    } ​

    Note the code above changes the default class of the Radiobuttoncomponent.

  • What we need to do is create our own class: .myRB
  • adding the code below to our CSS stylesheet, we entered our new Class in the CSS stylesheet
  • Z customized like-
     	display: inline-block; 
     	columns: 3;

    save the stylesheet, run the design studio app, press on the button and you will see your class work and change the layout of the component from vertical to horizontal.

TIP! if you create a standard in-house template copy the original SAP stylesheet and change the SAP Business content classes instead of creating Z-classes (/my-classes) in the copied stylesheet .  Via this way you can adjust the whole SAP BusinessObject Design Studio app by uploading the copied stylesheet in one swift move in stead of filling out the z-classes in each component separately one by one.

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Raf Boudewijns
      Raf Boudewijns