Skip to Content

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:

image

Using Firebug for Firefox it is easy to analyze the used CSS for each element. For the Home tab the revealed CSS definitions are:

image

And the HTML code looks like:

image

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;”).

image

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

image

DLN is not using IDs and classes for every element; customization can only be done on a basic level

image

Of course you can apply changes to all elements that are available.

image

To access this blog on your mobile device scan the QR image:

image

To report this post you need to login first.

6 Comments

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

  1. John Moy
    Hi Tobias,

    Thanks for this.  It is perfect timing for a piece of work I am just about to undertake on our portal.  Your blog will be a great reference.

    I am interested to know … Have you tried this with the new Signature design?  We have activated it for trial purposes on 7.02 portal.  There are som things that don’t seem to behave the way I expect, so I am experimenting with whether I can port some of the visual elements back to our existing theme (without of course getting into the AJAX side of things).

    Rgds

    John

    PS.  Great to finally ‘see’ you on the Mentor call the other day.

    Rgds

    John

    (0) 
    1. Tobias Hofmann Post author
      Hi John,

      I too started evaluating the new signature design, right now I’m in the customization process with AJAX. For me it will be a full switch to AFP or none at all, so I cannot help you in this case. Sorry.

      Tobias

      (0) 
  2. Guillaume GARCIA
    Hi,
    Thanks for sharing this information.
    I was wondering whether this approach were applicable in a real-word scenario?
    Indeed, the Portal uses assign indexes to tabs but different users may have different tabs. Worse, a user may inherit a new role causing a re-assignment of the tab colors he’s accustomed to.
    Thus, you might get same tabs with different colors depending on population and time…which can prove confusing.

    Thanks for your insights.

    Best regards,
    Guillaume

    (0) 
    1. Tobias Hofmann Post author
      Guillaume,
      the TLN modification serves as an example. If you need to have the same color for a specific entry point (like Home, ESS) and not for the first, second or third entry point you’ll need to adjust your TLN.

      br, Tobias

      (0) 
  3. Matthew Harding
    Just to check I understand this right, if you were to do a patch or upgrade, I imagine you need to update the KM CSS files from the delivered originals (to ensure you get all changes) then reapply your changes each time?  i.e. Especially if you are working in the AFP theme as there is likely to be changes between releases that are functional fixes.

    Nice idea with the rewrite…

    Cheers,
    Matt

    (0) 
    1. Tobias Hofmann Post author
      Hi Matt,

      yes, with every modification of the original theme, you have to reapply your modifications.
      As the original theme files are copied from a file system location to another path you can experiment to use rsync, svc, patch, etc for syncing the custom code into the SAP code.

      The rewrite is nice 🙂 I really do like that the SAP Web Dispatcher is gaining more and more functionality. I’m still missing the ability to modify the response header.

      br, Tobias

      (0) 

Leave a Reply