Unleash the power of the Portal Theme Editor

Former Member · ‎11-06-2009

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.

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.