Skip to Content

Theme Class Locator

Intro

Say one wants to change the appearance (Look & Feel) of some elements in the portal,

he should enter the “Theme Editor” and change the entries representing these elements, however,

knowing which entry in the theme editor represents which element is not so trivial…

This support tool was developed in order to ease up the process of finding the correct entry to

change in the theme editor for a provided element.

Prerequisites

Portal Versions:

SAP NetWeaver 7.00 SP22 and above.

SAP NetWeaver 7.01 SP7 and above.

SAP NetWeaver 7.02 SP5 and above.

For Internet explorer browser:

IE Developer Toolbar – can be downloaded from Microsoft official site.

For Mozilla Firefox browser:

Firebug – can be downloaded from Add-ons for Firefox site.

How to use

First of all, one should find out the class name of the element he wishes to change.

That could be done by opening the IE Developer Toolbar / Firebug and selecting the
element to change, as can be seen in the following screenshot (e.g. IE Developer Toolbar)

/wp-content/uploads/2010/04/1_97672.png

After retrieving the desired class name of the element, the support tool should be opened.

To display the support tool, one should enter the portal and switch the URL to

http://<host>:<port>/irj/servlet/prt/portal/prtroot/com.sap.portal.themes.classthemelocator.SupportThemeEntries

Now the class name that was retrieved in the previous step should be filled as the parameter.

The dropdown list displays all the custom themes. It is possible to choose a theme from

the list in order to generate a link to the specific section of a specific theme; however, that field is not mandatory.

/wp-content/uploads/2010/04/2_97682.png

After clicking the “Execute“ button, the tool will display the location of the entry that represents that item in the “Theme Editor “.

It will also generate a link for that entry if a theme has been selected.

/wp-content/uploads/2010/04/3_97683.png

When clicking the link, the “Theme Editor” will be opened for the chosen theme on the specific Group and page.

/wp-content/uploads/2010/04/4_97684.png

Now the Entry should be searched in the “styles” section by scrolling down that page.

/wp-content/uploads/2010/04/5_97685.png

The only thing left is changing the relevant fields of the element and saving the theme.

Hope that helps !

Best Regards,

Nadav.

To report this post you need to login first.

13 Comments

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

  1. Kevin Laevers
    I had to change the color of the Universal Worklist table. Even with something like Firebug to identify the class used, it’s not easy finding the correct entry in the editor. With this tool, it’s a piece of cake!

    Thanks, this is a really cool tool that covers missing functionality in the portal, and has been very helpful !
    (0) 
  2. shivani mishra
    Hi Nadav ,

    I m unable to change the Tabstrip color in EP 7.0 . I have changed the properties of tabstrip in complex elements but it is not reflecting in theme. I cleared all the caches and all but no sucess . Then i tried ur Theme Class locator but when I see the iview it only promts for “Enter Class Name ” but there is no option for selecting the theme because of which it says ” No Element Found” . Could you please help me out.

    (0) 
    1. Nadav Nuri Post author

      Hello Mallepadi,

      In 730 there was some change in the tool (support for AFP etc…)

      You can enter the portal anywhere go by adding /irj/servlet/prt/portal/prtroot/PortalAnywhere.Go to the URL and there chose

      “ThemeClassLocator”.

      I hope you find it helpfull.

      Best Regards,

      Nadav.

      (0) 
  3. Darijo Pavlic

    Hello Nadav,

    good tipps!

    I do some modifications in themes where the theme editor hinders me in cases of performance, quick-save of changes, find the right parameters, etc.

    For finding the right parameters, the ThemeClassLocator helps 🙂

    But what if I want/need to change classes which are not visualized in theme editor?

    What I do is to access the CSS files directly.

    I use the developer tool in IE or firebug in Firefox to find the classes which I need.

    My question is:

    Do I need to consider anything if I continue to go this way?

    Is there a dependency between the CSS on file system and the portal database (persistency)?

    I figured out, when I change css on filesystem and access the theme editor afterwards, do some othere changes there and press save, then the file system directories seems not to be created correctly, some directories are missing or my changes are vanished.

    Also I can’t retrieve the theme with motive editor anymore.
    I restore the part of the file system, then it works again.

    Is there a procedure to do changes on file system level and keep my changes?

    thanks

    Darijo

    (0) 
    1. Nadav Nuri Post author

      Hello Darijo,

      Thanks for the good words.

      I am familiar with the fact that some classes does not appear in the Theme Editor.

      As you said, changing the css files on the file system will not last as these files are getting updated by the portal.

      Unfortunately I’m not aware of a “legal” way to keep the changes done on the file system as doing things like setting the folder to “read only” or other “hacks” like that are of course not supported and not upgrade safe.

      In case you have some specific parameters that you wish to change which are not exposed, you can open a message and the relevant colleagues will handle each case separately.

      Best Regards,

      Nadav.

      (0) 
      1. Darijo Pavlic

        Hi Nadav,

        thanks for the answer.

        I am quite interested in that topic and like to understand it better.

        Does the portal database plays any role during updates with the Theme Editor?

        How to you proceed if you want to change more details, than that what the Theme Editor offers you?

        In many cases a company wants to adapt it corporate identity even to the SAP portal, but using the theme editor, it can be achieved only to a certain part.

        Any recommendations?

        Thanks

        Darijo

        (0) 
        1. Nadav Nuri Post author

          Hello Darijo,

          As per your first question, the DB plays a role during updates. Any change you make will get updated in the PCD as a central place and then updated in the file system accordingly.

          As per your second question, I can’t say in general how to proceed.

          The majority of the parameters are changeable through the “Theme Editor”.

          Other parameter that are not exposed should be treated differently.

          I must say that there are some changes in 730 and therefore this tool does not find 100% of the parameters, so it could be that the parameters you wish to change are available in the “Theme Editor”, however, it could be that they are not.

          My advice is to change whatever is possible and open a ticket for the parameters that are not exposed. Each parameter could be treated differently.

          Best Regards,

          Nadav.

          (0) 
  4. Noël Hendrikx

    Hi Nadav,

    I was looking for the 7.3 Theme Class Locator and found it in your post.

    http://server:portl/irj/servlet/prt/portal/prtroot/com.sap.portal.support.desk.ThemeClassLocator

    There are some classes not available, like urPgHT2, lsHdArCenter2 and urPWWave.

    After the upgrade to 7.3 there are some strange things in the portal theme going on. There is no messagearea anymore in WDA (I made an OSS call for this already).

    The support engineer told me to adjust the properties file – export the theme, adjust the properties file – as a workaround.

    Is there any information on the properties file? I know this is lowlevel adjustment, but sometimes it is necessary 🙂

    Some class tags refer to the ls – lightspeed – directory in my custom theme. But I don’t have a ls folder in my theme.zip file. How can I adjust that?

    Cheers and two thumbs up for your blog!

    Noël

    (0) 
    1. Nadav Nuri Post author

      Hello Noël,

      First of all, thank you for the good feedback.

      Unfortunately, I’m not familiar with the 2 issues you referred to, however, this is not my expert zone.

      I think the best thing will be to consult others by posting these questions in the “Portal Implementation” SCN.

      In case you won’t get an answer there, you can open an oss message as well.

      Best Regards,

      Nadav.

      (0) 
  5. Sandra Rossi

    Thank you Nadav for this great tool.

    Great also that SAP referenced your tool in note 1517914 – Themes & Styles – Specific Component Note.

    For information of people, there is “now” 2 other tools named:

    • ‘Update Customer Portal Theme Parameters Tool’ (for adjusting the display of portal-specific elements, like the masthead)

    • ‘Update Customer Unified Rendering Theme Parameters Tool’ (for adjusting the display of generic application controls such as tables which are rendered using Unified Rendering [UR]).

    They are described in note 1752515 – Updating Customer Theme Parameters Not Exposed in the Theme Editor.

    PS: so, some CSS classes are “not exposed in the Theme Editor”, this maybe answers Noël question (asked a long time ago, I know).

    (0) 

Leave a Reply