Skip to Content

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

Ashampoo_Snap_2014.08.28_13h49m19s_001_.png

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 { }.


Ashampoo_Snap_2014.08.28_13h57m22s_002_.png

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.

Ashampoo_Snap_2014.08.28_14h17m29s_003_.png

It is my first document so don’t be strict

Best Regards Oleksii.

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply