Customizing the portal using the new UI Theme Designer - Part 2

[Former Member]

Following the first blog in the series: http://scn.sap.com/community/netweaver-portal/administration-and-development/blog/2013/10/08/customi...

In this blog I will try to walk through a more advanced scenario where you can customize your theme manually in the Web Resource Repository.

Prerequisites:

1. You already created a custom theme using the UI Theme Designer

2. CSS knowledge

So let's begin :smile:

1. Custom themes repository

Once you published your theme all the relevant resources will be stored in the Web Resource Repository (WRR): Content Administration->Web Resource Repository-> theming

Note - Only custom themes information is stored in the WRR. you will not see here SAP theme.

The folder structure contains 3 levels:

1. Framework Level - Unified Rendering, Portal, Base (and UI5 in future). The Base framework will contain the quick theming elements and all other frameworks inherit from it.

2. Library level - This level is a child of a framework and the semantic is a bit different for every framework. For example:

• UR  has the libraries: ls, ur...
• Portal has the libraries: AFP, glbl, prtl...

For those of you who worked with the old theme editor, a library is the same as the old "design part".

This level always conatin a base library called baseLib. all common elements between the different libraries will be stored here

3. Theme level - Here you will find the actual resources, pay attention that your theme's folder will created under every library so once you publish a theme, many new folders will be created under the different libraries under the different frameworks

There are 4 types of files:

1. LESS files - these are the "deign time" files, the UI Theme Designer read & modify these files

2. Images - only images which are different from the inherited theme are stored

3, CSS files - These files are generated by the UI Theme designer and shouldn't be changed in WRR since they will might be overwritten (for example when the theme will be published again in the UI Theme Designer). These are the files used in runtime hence the base enteties (Base Framework, baseLib, baseTheme) will not have CSS files

4. .theming files - configuration files which shouldn't be touched

Less files structure:

To understand better less structure and syntax I recommend to read less documentation: http://lesscss.org/

Our less file structure is based on inheritance in several levels:

1. Inheritance from sap theme

2. Inheritance from base entities (baseTheme, baseLib, baseFramework)

3. Inheritance from base.less - every theme folder has a base.less file. This file contains relevant information for all browsers (which is usually the case). Only if your change is relevant for a specific browser then change the relevant less file (i.e nn7.less file) otherwise make your changes on this file and it will affect all browsers.

Tip - the generated CSS files will contain all the information from all the inherited less files. I recommend to use the CSS files to understand which parameters you need need to change since here you will see the full picture and not only the changed parameters.

Images in details:

The images you changed are stored under "img" folder under the theme's folder. The relevant less files will also contain the path to the new image, for example:

Also here you can do some nice manual modifications, you can replace the image with a different image that has the same name or a different name (and then adjust the less file) or you can add a new image reference. The sky is the limit :wink:

2. Custom themes re-generation

After you are done with the manual changes you need to regenerate the CSS files again and only then your changes will be reflected in runtime. You have 2 options to do it:

Option 1 - With UI Theme Designer (Recommended):

This is the easiest solution and the most recommended one. Just launch the UI Theme Designer, load your custom theme and publish it again. Before you publish you can see how your changes are reflected in the previews and you can do additional fine tuning. Theme publishing is a trigger for the CSS regeneration.

Option 2 - With a dedicated portal component

There is a special portal component used for generating the CSS files of the theme, open it with the following URL:

<...Portal URL...>/irj/servlet/prt/portal/prtroot/com.sap.portal.themes.archive.download

Now you can choose any custom theme to compile (re-generate CSS) or compile all custom themes together:

Tip - This is an administrative component and the only advantage is how quick you can regenerate the CSS files, I recommend to use it only if you want to compile all the themes together. Otherwise, if you work on one theme, use the 1st option.

That's it for now :oops:

Good Luck!

Itzik