How to… UI Theme Designer – Make use of the Custom CSS tab in the Portal!
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 🙂
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
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 🙂 Happy branding again!
Noël Hendrikx – SAP Portal consultant @ Peppie Portals.
Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.
UI Theming blog series