Skip to Content

CSS in SAPUI5 controls.

Sometimes we want change design SAPUI5 elements. For this task we can use this methods:

  • We can use transaction /UI5/THEME_DESIGNER in backed SAP system. This topics explain here...
  • Use CSS class for modify SAPUI5 elements.

I tell you about my experience. For example take sap.ui.commons.Panel.

Standart sap.ui.commons.Panel. look like


For change design we need know what we want change and which CSS class for this we need change. For this use debug in Chrom, click on search icon and choose part component. We find CSS class which use for this part. In our example Title text Panel use class .sapUiPanelTitle { }.


We create CSS file or create <style></style>. Write new class MyPanel and copy .sapUiPanelTitle in this class in our CSS file. For example:

  1. .myPanel .sapUiPanelTitle {
  2. margin-left: 30px;
  3. font: 12pt Segoe Print;
  4. color: #4A8DA5;
  5. }

Like this example you can change part element use CSS which you want.

I have file like this:

  1. <style type=”text/css”>
  2. .myPanel .sapUiPanelHdrEmph {
  3. background-color: #ADBAB8;
  4. border-radius: 8px ;
  5. }
  6. .myPanel .sapUiPanelTitle {
  7. margin-left: 30px;
  8. font: 12pt Segoe Print;
  9. color: #4A8DA5;
  10. }
  11. .myPanel .sapUiPanelHdr {
  12.   color: #4A8DA5;
  13. }
  14. .myPanel .sapUiBtnS.sapUiBtnNorm {
  15. border-color: #4A8DA5;
  16. background-color: #CCD1D0;
  17. color: #4A8DA5;
  18. font-style: italic;
  19. }
  20. .myPanel .sapUiPanelCont {
  21. padding: 6px;
  22. background-color: #E8E8E8;
  23. border-radius: 8px;
  24. border: 2px solid #4A8DA5;
  25. }
  26. .myPanel .sapUiLbl {
  27. vertical-align: top;
  28. line-height: 18px;
  29. display: inline-block;
  30. font: 10pt Segoe Print;
  31. }
  32. .myPanel .sapUiTfBrd {
  33. padding: 2px 5px 3px 5px;
  34. height: 22px;
  35. box-sizing: border-box;
  36. -moz-box-sizing: border-box;
  37. border-width: 2px;
  38. border-radius: 8px;
  39. border-color: #9CC9D6;
  40. background-color: #DEF0F4;
  41. font-style: italic;
  42. }
  43. </style>

In the end add new CSS class to the element.


Now you can compare two panel.


It is my first document so don’t be strict

Best Regards Oleksii.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.