Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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.

oPanel.addStyleClass("myPanel");

Now you can compare two panel.

It is my first document so don't be strict

Best Regards Oleksii.

Labels in this area