Note:
The information in this blog refers to a feature - theme editor - that is deprecated.
For a list of deprecated features and possible alternatives that you can use instead, see SAP note 2204286.
In my previous blog I wrote about the possibility to store the portal theme files in the KM to make use of a custom cache time (max-age) of the portal file. Now I will focus on the 2nd point I mentioned in the previous blog:
For companies with a demand for showing the corporate design in every product the Theme Editor isn’t offering all the options needed to adjust the SAP Portal to management needs. There you need a tool to modify several parts of the portal that you cannot do with the tools provided. |
Good thing about the (limited) theme editor is that you cannot break the theme and it will be generated automatically for all supported browsers. Problems with the portal theme editor are:
To show what is possible I will modifying the design of the navigation: the top level navigation (TLN) and detail level navigation (DLN). In a standard SAP theme the TLN looks like this:
Using Firebug for Firefox it is easy to analyze the used CSS for each element. For the Home tab the revealed CSS definitions are:
And the HTML code looks like:
What really helps is that every tab is using its own ID. Tab “Home” has id=navNode_1_0 and tab “Web Page Composer” the id=navNode_1_1. Adding for some TLN elements a custom background color shows how the CSS needs to be modified (ex.: adding style=”background-color: red;”).
To make the background green for the Home tab, the CSS file needs to include a definition for the ID:
#navNode_1_0 { Background-color: green; } |
Changing the theme is easy with Firebug, but the changes won’t be permanent. Looking at the information Firebug provides, the CSS file that contains the specification for the TLN is:
/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/sap_tradeshow/prtl/prtl_nn7.css
This is the Firefox / Mozilla version of the file, for Internet Explorer the file change. Using the solution outlined in my previous blog the theme files can be stored in the KM; therefore it is possible to make changes that go beyond the theme editor functionality. To load the theme file from the KM add a rewrite rule to the SAP Web Dispatcher (as of 7.2😞
RegIRewriteUrl ^/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/sap_tradeshow(.*) /irj/go/km/docs/themes/portal/sap_tradeshow$1
After activating the new rule on the SAP Web Dispatcher you can apply custom changes to the CSS. You still cannot do everything, because:
Having full control over the theme files allows to fix or adjust the layout for different browsers – supported or unsupported by SAP - that come from the CSS
TLN is making a fine use of ID’s, makes it easy to customize the theme
DLN is not using IDs and classes for every element; customization can only be done on a basic level
Of course you can apply changes to all elements that are available.
To access this blog on your mobile device scan the QR image:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |