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:

Screenshot - 18-11-2014 , 14_13_57_ver001.png

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

Screenshot - 18-11-2014 , 14_19_32.png

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 🙂

Screenshot - 18-11-2014 , 14_35_36.png

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

Screenshot - 18-11-2014 , 14_45_41.png

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++.

Screenshot - 18-11-2014 , 14_49_47.png

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)

Screenshot - 18-11-2014 , 14_52_54.png

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

Screenshot - 18-11-2014 , 14_56_45.png

Screenshot - 18-11-2014 , 14_57_58.png

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!

Screenshot - 18-11-2014 , 15_03_26.png

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

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

/*

To report this post you need to login first.

3 Comments

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

  1. Prasanna Seesala

    Hi Noël,

    I am using UI Theme designer in NetWeaver Portal. I changed the branding for Top level navigation using Expert tab, I would like to customizes the CSS for the Ui5 iviews created in the portal. But the CSS tab is not editable, I am unable to enter anything.

    My EP version is 7.30 SP10

    UI theme designer version is 1.1.4

    Please suggest me on how to achieve it.

    Regards,

    Prasanna

    (0) 
    1. Noël Hendrikx Post author

      Hi Prasanna,

      Did you select the UR controls?

      The instruction above is for the UR less file, not for the UI5 less file. But you can try that as well of course!

      cheers,

      Noël

      (0) 
      1. Prasanna Seesala

        Hi Noël,

        I have selected the UR controls. If I am changing the color using Expert tab for any control, it is reflecting for framework page not for the UI5 iview controls. I just want to try with Custom Css tab but it is not editable at all. Is the problem with theme designer version..?

        If that is the case, please suggest me why the basic properties are not reflecting for UI5 controls..?

        Regards,

        Prasanna

        (0) 

Leave a Reply