Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
hofmann
Active Contributor
0 Kudos

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:

  • hard to customize the portal design to a greater extent
  • adjust just one element for one specific browser
  • add a CSS definition for an element that does not exist in the theme editor.

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:

  1. The portal makes heavy usage of Javascript to define some properties like width, height, insert pictures
  2. Not every element has its own class or id, so you cannot define a theme for every element

 

Possible use cases

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

  • apply changes based on Firefox or Internet Explorer
  • add new definitions for HTML elements, class or divs that are not available from the theme editor
  • merge files: SAP theme files and your custom theme files
  • compact files

       

Example

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:

6 Comments
Labels in this area