Adding background image to portlet title bar

Question

Hi,
Does anyone know how to add a background image to a portlet title bar. I have tried using the LAF editor but nothing seems to work. The image will be static and not change.
Any help appreciated.

Answer 1

Hi Chris
You have to modify the .css file depending on the type of Skin you are using like "default" or "bighorn" in case of 10.x and 9.x etc. Best thing is to install Firebug for Firefox and inspect the Titlebar in firebug. That should tell exactly which .css file and which element in that .css file is used to render the Portlet Title bar.
For "default" skin, the file is window.css and the element in this file is ".bea-portal-window-titlebar" with background-color: #XXXXXX. Replace this or add another field like background-image: url(your image path). This window.css file can be found under WebContent\framework\skins\default\css\window.css. Remember that in 9.x and 10.x to see this file from Workshop IDE, you need to switch view to Merged Projects and select this file and copy this to your project to view it. BUT, I would not recommend to modify any out of box .css file. Instead create a new file custom.css file and add entries in this file which you want to overwrite. This is the standard way to customize any out of box skins look and feel. So in your custom.css file your will have one entry like this:
.bea-portal-window-titlebar {
background-image: url(your image path)
For "bighorn" skin introduced in 9.x and 10.x, the elements in .css files are slighty different but the concept is same. I customized out of box bighorn skin to change background color of portlet title bar. The .css location for portlet title bar for bighorn skin is: WebContent\framework\skins\bighorn\css\colors.css and the element is ".wlp-bighorn-titlebar". For quick testing from Firebug, inspect this element and change the background color to something else and see if it reflects in Firefox. Then you can create custom.css file under same folder structure in your portal web project and over write this element and this field alone with the background-image that you want something like:
.wlp-bighorn-titlebar {
background-color:#FF0000;
background-image:url(your image path);
It is highly recommended to have all customizations go into custom.css file only. Please make sure that you have this custom.css file entry in the skin.xml file (in case of bighorn) or skin.properties file (in case of old legacy default skin). This .xml or .properties file can be found under same folder structure like: WebContent\framework\skins\yourSkin. For new bighorn skin.xml file this custom.css file entry is already there. But for old legacy default skin you may need to add this entry.
HTH
Ravi Jegga