How to... UI Theme Designer - Make use of the Cust...

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!

In the portal the UI Theme Designer has a CSS tab that doesn't work (yet!). You can add custom css styling in there, but nothing happens. Previously you could download the theme via the Web Repository WRR, manually change the less files and upload it into the portal. Then you need to recompile the theme. Please note: this is undocumented and you don't have any support from SAP.

This is how it works

The CSS tab is available, you can enter everything in it as you want, but during compiling nothing is added. So we need to add the custom.less file, which is created if you enter css information in the CSS tab.

First I will create a new theme, based on goldreflection:

I will rename my Custom Gold Reflection theme to "PeppiePortals" and open the UR Control Properties.

1. Create the custom.less file

Select the CSS tab now.

After selecting UR Control properties, select the "All/no selection (middle arrow)". At the left hand side all Controls will be displayed. Just select a random UR one.

After selecting you will see at the righthand side UR Technology: Unified Rendering appear. It is time to add some CSS styling.

Be aware of the fact that a lot of elements can be styled with the UI Theme Designer in the Expert tab as well. This feature is only for adding new css properties that do not exist in the current theming.

As an example I have added the css style "urPgHTTxtSmall". For this element the background color will be set to red. Again, this is tricky since the .urPgHTTxtSmall will be used on more places in WebDynpro than in this example. So know what you do :smile:

Now save the theme (and publish it, so it is generated in the WRR).

2. Download the theme and edit the less definition

Go to Content Administration > Web Repository

Expand the theming folder and navigate to UR > ls. Now open your custom theme folder. You will see a custom.less file which you created in step 1. You will need to change the base.less file to import the custom.less file.

Right click on the base.less file and download it. Edit the file with your favorite text editor, too bad Edlin is not available anymore, so I am using Notepad++.

Add the statement

@import "custom.less";

And save the file.

Upload the base.less file and replace it with the old version. (select yourfolder > right click > select upload)

Now we need to open the UI Theme Designer again and recompile the theme.

Now check if the css is displayed correctly. If this works, you can change stuff directly in the CSS tab and recompile the theme. This will save you approx 2 minutes per change! In my case... this saves me a LOT of time!