Skip to Content
Author's profile photo Former Member

Unleash the power of the Portal Theme Editor

h4. Introduction

The portal uses a whole lot of stylesheets and stylesheet classes to set the look and feel. The portal theme editor is basically a tool that renders all these style sheet files so that you don’t have to create and manipulate them yourself. Although you can change quite a lot with the theme editor, when you want to make some serious changes you’ll find out that it is rather limited. In fact, I think it only covers roughly 20% of the available style-sheet classes. 

So, after you have created your own theme or made the required changes to an existing one, the stylesheets are updated in the database and the latest version is also put on the file system. You can then go onto the filesystem and make changes to the most important .css files (the ur_6.9_<browser>.css files) by modifying the stylehsheet classes that you cannot change with the theme editor. But all your changes will be lost once you go back into the theme editor and save your theme.

The good news is that you can change all of this directly in the Theme Editor, and in most cases you will see the result directly.

Pre-requisits

To unleash it’s power it is important that you understand how style sheets and in particular style sheet classes work. The W3CSchools website is very helpful for this.

In addition I recommend to use the IE Developer toolbar which is a free download from Microsoft. With this tool you can very quickly determine which stylesheet class is responsible for which area in you screens. It is built into IE8 but do not use IE8 unless you run a portal version that supports IE8. I prefer IE7.

Go 

To change more than you can see, all you have to do is add more style attributes in the text field of the class you are editting. To do this, open the theme editor and find the element which you would like to change but for which it doesn’t seem possible to change a specific attribuut.

For example: to change the font-weight for a label of a disabled field there is no option in the the theme editor to do so. To set the label to bold for instance, simply add: ;font-weight:bold after the color in the field: Font Color of Label of Invalid Field.

This will change the stylesheet class: urLBarDsbl and make the Labels of disabled fields bold. You will see in this example that the change is displayed immediatly in the theme editor.

Add attributes to a style sheet class

And you can add pretty much everything that a browser supports; borders, colors, onmouseover.

Advanced

So, the trick is basically to find the right elemement and corresponding stylesheet class. To do this, use the IE Developer toolbar. Open the page you need and start the tool. Pick the element you wish to change and the IE Dev Toolbar will show you which stylesheet class is affected.

!https://weblogs.sdn.sap.com/weblogs/images/9103/sdn.jpg|height=321|alt=IE Developer Toolbar|width=650|src=https://weblogs.sdn.sap.com/weblogs/images/9103/sdn.jpg|border=0!</body>

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member
      Hi
      Good blog, help me a lot.
      Thanks !
      Author's profile photo Former Member
      Former Member
      Blog Post Author
      Thanks. Should you have any specific questions don't hesitate to ask.

      Marcel

      Author's profile photo Former Member
      Former Member
      Thanks a lot, we used this method and obtained exceptional results, our portal looks amazing, it is a shame I can not share an image (confidentiality), but it really helped us a lot, the business is more than happy with the look and feel we accomplished and this is in a big part because of this blog.

      Again, thank you, this was a life saver!!!!!

      Author's profile photo Former Member
      Former Member

      Hi

           I have some questions regarding the structure of the theme editor itself in terms of custom developments for this specific solution.

           After some investigation on How the theme editor works, we were able to see that it is based on a series of XML Structured Files (ParameterPool, DesignParts etc). So what we tried to do was modify this files manually (Add New Parameters, Change/Remove Some) to create a Proof of Concept that we can generate different stylesheets with this changes.

          We got the following problems i hope someone can help us with:

      1. When transporting themes generated from development to Production, the production system does not recognize the new parameters so the theme is rendered with SAP default parameters/values. Does this mean if we want to have custom parameters and still have a valid theme transport mechanism, we would have to change production system parameterpool aswell?
      2. How would these changes react to Theme Upgrades? i have seen there are some configuration files(upgrade60/70) that serve to upgrade parameters values/definition, would we have to define our parameters here instead of the parameterpool?

      Thanks for any input on this topic, it probably might be unknown for most of the people using theme editor, but we would like to adapt this tool in order to give customers more flexibility to change custom .CSS