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!
Showing results for 
Search instead for 
Did you mean: 
Active Contributor

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!

Hope you can use this as well :smile: Happy branding again!


nol.hendrikx - SAP Portal consultant @ Peppie Portals.

Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.

UI Theming blog series

Portal theming - also waited a couple of years?

How to... UI Theme Designer - Installation

How to... UI Theme Designer - Migration

How to... UI Theme Designer - Locating elements

How to... UI Theme Designer - Transportation

How to... UI Theme Designer - Make use of the Custom CSS tab in the Portal!

Other blogs:

Tired of zipping / unzipping portal theme?

Tips for the Portal Content Studio

DSM Terminator and popup blockers (or not)

My best development friend - Autoresponder FTW


Labels in this area