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.

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.

Now that you know the style sheet class, simply add anywhere in the theme editor your modification by closing the current class with a } and opening your class (in the screenshot I use SItreeText) with a dot and the name of your class.

 Example: in the editor navigate to Component Specific Styles -> Tree -> Level Colors -> Background Color of 4th Level:
Change the entry: #FFF into  #FFF}.SItreeText{font-weight:normal;background-color:black

This closes the current class and adds your class to the portal stylesheets and you should be able to see your changes. In this example it changes the font style and background of entries in the detailed navigation.

However, there's a catch.....

Stylsheet override

If you open the biggest portal stylesheet file (which holds most, but not all classes) you will see that many classes are defined multiple times. The browser will apply only the last one of each class. So, if by chance your own class with your changes does appear in the ur_6.9_ie6.css file (download it from http://host/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/<your_theme/ur/ur_6.9_ie6.css) but is not the last entry of that class, your changes will not be visible.

To make sure that your changes are used add the ! important parameter to the elements.

Example using the same entry as above: #FFF}.SItreeText{font-weight:normal! important;background-color:black! important

Technically, you can add your changes anywhere in the editor, but my advice is to try to keep your changes aligned with where you would expect them to be in the theme editor.

By the way, did you know that if you open the theme editor in Opera, or Firefox you can make browser specific changes?

Happy changing!