Customizing the portal using the new UI Theme Designer – Part 2
Following the first blog in the series: http://scn.sap.com/community/netweaver-portal/administration-and-development/blog/2013/10/08/customizing-the-portal-using-the-new-ui-theme-designer–part-1
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 🙂
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 😉
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 😳
Good Luck!
Itzik
I had some questions raised by Noel Hendrikx (Thanks Noel 🙂 ) and I would like to share it with you:
Q: Sometimes publishing the theme takes very very long. I noticed when I only open the control buttons, the saving does not take long. Opening the Ajax framework page also results in a Chrome timeout warning. Then I need to press "Wait" and the savings are done after another 10-20 seconds.
A: We are aware of it, We are going to release a patch soon and this should be improved
Q:My portal theme is inherited from sap_goldreflection. I can't find the sources of the standard theme. As an example downloading images for a new radiobutton style is time-consuming. There are 30 different images. I can't copy a folder of sap-tradeshow with the radiobutton images in it.
A: All resources can be found on the server under:
C:\usr\sap\<…>\<…>\j2ee\cluster\apps\sap.com\com.sap.portal.design.urdesigndataless\root\theming and C:\usr\sap\<…>\<…>\j2ee\cluster\apps\sap.com\com.sap.portal.design.portaldesigndataless\root\theming
most of the images are under the baseLib
Q: For my understanding... When I create a new theme based on sap_goldreflection (lets say theme_noel), the following will happen in the WRR:
/Base/baseLib/theme_noel created
/Base/baseLib/theme_noel/.theming created (with reference to sap_goldreflection);
/Base/baseLib/theme_noel/base.less created
/Portal/baseLib/theme_noel created
/Portal/baselib/theme_noel/base.less created
/Portal/baselib/theme_noel/ie6.less created (and other browser types)
/UR/baseLib/theme_noel created
/UR/baseLib/theme_noel/base.less (references to uploaded images)
/UR/baseLib/theme_noel/img/control folder with uploaded images
A: It's only part of the process, the theme_noel is created under every Library (Portal/AFP/theme_noel, UR/ur/theme_noel and more…)
Q: Let's say I change the background color of an element, will that be stored in the base.less file in the /Base, /Portal or /UR folder? Any logic about that?
The Base Framework is used for the quick theming parameters. So assuming you are in expert theming view, if you are changing a color of UR element it will be under UR and portal element under Portal…
Q: It is still hard to know which less elements belong to a css element. In the browser I have a css class urGrpTtlBoxUnderline. I can locate it and replace the background image. Somewhere (I can't find it) the position: repeat-x is attached to urGrpTtlBoxUnderline. With the old theme editor there were two files (designpart and urdesignpart) that hold the definition of a css class and their elements. Is there a reference file also?
A: It works a bit different and I am not sure it's sufficient:
More from Noel:
Q: Changing an image (upload an image of my own) will result in a new folder in the UR/baseLib/my_theme/img folder.The type of control is the subfolder in it (so /my_theme/img/radiobutton/radio.gif.
It is quite hard to see which less/css styles are related to the image (like size, repeat and so on).
A: The CSS is easy since in the CSS you don't have all the hierarchy stuff, so you can find everything in the CSS that is located under UR/ur/my_theme or UR/ls/my_theme
The LESS is more tricky I assume it will be in UR/baseLib/my_theme/base.less or UR/ur/my_theme/base.less or UR/ls/my_theme/base.less
But pay attention, only your changes will be available here meaning that you will probably see the new image URL but if you haven't changed the size so you will not see it in your less and you can add it on your own.
Few tips:
1. You can download the whole theming folder from WRR to your desktop, then you can do all relevant searches and find your things easily (i.e in Notepad++ you can search in files)
2. In the planned patch, you will have the CSS tab enabled, then you will be able to do these changes in the theme designer and see them reflected immediately
Another one:
Q: I found the definition file for css classes.
com.sap.portal.design.urdesigndataless\servlet_jsp\com.sap.portal.design.urdesigndataless\root\theming\UR\ls\baseTheme
.urGrpTtlBox {
background-color: @sapUrGroupTtl1Background;
border-width: @sapUrGrpTtlBorderWidth;
border-style: @sapUrGrpTtlBorderStyle;
border-color: @sapUrGrpTtlBorderColor;
color: @sapUrGroupTtl1FontColor;
font-size: @sapUrRelFontSizeStd;
font-weight: @sapUrGroupTitleFontWeight;
padding: @sapUrGroupBoxTitlePadding;
height: @sapUrGrpTtlHeight;
background-image: @sapUrGrpTtlBoxBgImg;
background-position: @sapUrGrpTtlBoxBgPos;
background-repeat: @sapUrGrpTtlBoxBgRep;
}
I'd like to add:
text-transformation: uppercase;
Is it possible to add entries to this css class, so the result will be:
.urGrpTtlBox {
background-color: @sapUrGroupTtl1Background;
border-width: @sapUrGrpTtlBorderWidth;
border-style: @sapUrGrpTtlBorderStyle;
border-color: @sapUrGrpTtlBorderColor;
color: @sapUrGroupTtl1FontColor;
font-size: @sapUrRelFontSizeStd;
font-weight: @sapUrGroupTitleFontWeight;
padding: @sapUrGroupBoxTitlePadding;
height: @sapUrGrpTtlHeight;
background-image: @sapUrGrpTtlBoxBgImg;
background-position: @sapUrGrpTtlBoxBgPos;
background-repeat: @sapUrGrpTtlBoxBgRep;
text-transformation: uppercase;
}
or even better with a new less variable:
@noelHeaderTitle : "uppercase";
and text-transformation: @noelHeaderTitle;
A: You can't change the less files of sap provided themes but you can redefine the class in your theme less file in WRR: theming/UR/ls/<Noel's theme>/base.less
In this file just rewrite the class .urGrpTtlBox as you wish and it will override the original class when the CSS files will be generated.
Hi,
This is a very illustrative document. Thanks very much.
But the information is kind of irrelevant for those who have not integrated with SAP Portal.
We have Netweaver 7.31 with support package 0005. I am using /UI5/THEME_DESIGNER for accessing themes in browser. I copied the theme and created a new custom theme.
After publishing I am now trying to apply my new theme in the Component. But I am not able to apply the theme.
Can anybody help me on this?
Hi Ankit,
Can you please elaborate more about what you are trying to do?
UI Theme Designer exists in the Portal starting 7.31 SP9.
In order to use is you have first to swithch to "LESS" mode. This can be done by following the steps in the following link:
Activating the UI Theme Designer - Portal - SAP Library
Regards,
Tuvia.