Architecture & DesignHow to Customize the Color Scheme for the BEA WebLogic Server 9.x...

How to Customize the Color Scheme for the BEA WebLogic Server 9.x Administration Console

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

At last year’s BEA World, many portal developers were excited to hear that the WLS Administration Console is now portal-based. As developers, we all know that what excites us doesn’t always excite those who hold the purse strings, and customizing an application that is only used by IT generally falls pretty close to the bottom of the budget approval list—at least, until there is a really good reason for it. So, my first foray into customizing the WLS Administration Console didn’t come about until 9.2, and was limited to changing color schemes.

A Business Case for Customizing the Console

For those of you looking for approval to customize your console, the driver for the project this article is based on came from a case where multiple BEA domains were running installed on the same physical machine. When the maintenance team would log in to the various consoles, they would occasionally make an update to the wrong domain. Doh! For those who have done support, this comes as no big surprise. Many service activities are scheduled in off hours. Off hours are defined as when most users are off the applications and most IT folks are off their par because it is too late at night. The only visual cue as to which console you are logged into is some subtle text showing the user name and domain name.

The solution for this was to color-code the header in each Administration Console. Although this sounds fairly straightforward to the average portal developer, there are a few things that made it a bit of a challenge. First, the Administration Console application is compiled (as it should be), so cracking it open was a bad option because this could have upgrade implications. Second, even if one were to crack open the Administration Console portal (we’ve all made a similar call and regretted it at the next upgrade), the application under WEBLOGIC_HOME affects all domains rather than individual domains. Finally, the steps described at http://e-docs.bea.com/wls/docs92/console_ext/rebrand.html leave out a couple of minor pieces that are only obvious to portal developers. To make a long story short (which is only ever said when it is already too late), I came up with the following steps that worked for this effort.

(If you don’t already have a portal development environment, download the latest from the BEA website.)

Steps to Changing the Header Colors

Create a new workspace for Eclipse for your customization project. For old-time Eclipse developers, this may sound odd. I thought it odd that the BEA best practice is a new workspace for each related group of projects and at first stuck to my old ways of one workspace for all projects. Then I made a change to the wrong project and stopped being so obstinate. Because there are similar types of projects from one group to the next, it is an easy mistake to make and thus the smart recommendation not to. Long story…

In your new workspace, create a new Java project named console-extension. Although it doesn’t matter what you name your project, this name makes it easier to remember what it is for and to reference documentation related to console customization. Next, import [WEBLOGIC_HOME]samplesservermedrecconsole-extension into your new project. If you are unfamiliar with Eclipse imports, this is done with the File System option in the Import dialog. Once you have this tree in, you want to trim the branches that you don’t want to change by deleting the following:

workspaceconsole-extensionframeworkmarkup
workspaceconsole-extensioncommon

All in

workspaceconsole-extensionframeworkskinsxray

EXCEPT the following:

css
images
skin.properties

And all in

workspaceconsole-extensionframeworkskinsxrayimages
workspaceconsole-extensionframeworkskinsxraycss
workspaceconsole-extensionframeworkskeletonsxray
workspaceconsole-extensionimages

Now, you want to add some files for your use. First, create a skeleton.properties file in

workspaceconsole-extensionframeworkskeletonsxray 

and add the following:

jsp.search.path:  ., ../default

Then do the following imports (all files in the path for each):

  • [WEBLOGIC_HOME]serverlibconsoleappwebappframeworkskinsdefaultimages to /console-extension/framework/skeletons/xray/images.
  • [WEBLOGIC_HOME]serverlibconsoleappwebappimages to /console-extension/images.
  • [WEBLOGIC_HOME]serverlibconsoleappwebappframeworkskinsdefaultcss to workspaceconsole-extensionframeworkskinsxraycss.

Next, open /console-extension/framework/skins/xray/skin.properties and delete the following (spread in groups through the file):

theme.plain.search.path:          plain/images, images
theme.alert.search.path:          alert/images, images
theme.wlsmodules.search.path:     wlsmodules/images, images
theme.wlstoolbar.search.path:     wlstoolbar/images,images
theme.wlsbreadcrumbs.search.path: wlsbreadcrumbs/images, images
theme.wlschangemgmt.search.path:  wlschangemgmt/images, images
theme.wlsworkspace.search.path:   wlsworkspace/images, images
theme.wlsnavtree.search.path:     wlsnavtree/images,images
theme.wlsmessages.search.path:    wlsmessages/images, images
theme.wlsstatus.search.path:      wlsstatus/images, images
theme.wlsquicklinks.search.path:  wlsquicklinks/images, images

link.window-plain.href:           plain/css/window-plain.css
link.window-plain.rel:            stylesheet
link.window-plain.type:           text/css

link.window-alert.href:           alert/css/window-alert.css
link.window-alert.rel:            stylesheet
link.window-alert.type:           text/css

link.window-wlsmodules.href:      wlsmodules/css/window-wlsmodules.css
link.window-wlsmodules.rel:       stylesheet
link.window-wlsmodules.type:      text/css

link.window-wlstoolbar.href:      wlstoolbar/css/window-wlstoolbar.css
link.window-wlstoolbar.rel:       stylesheet
link.window-wlstoolbar.type:      text/css

link.window-wlsbreadcrumbs.href:  wlsbreadcrumbs/css/window-wlsbreadcrumbs.css
link.window-wlsbreadcrumbs.rel:   stylesheet
link.window-wlsbreadcrumbs.type:  text/css

link.window-wlschangemgmt.href:   wlschangemgmt/css/window-wlschangemgmt.css
link.window-wlschangemgmt.rel:    stylesheet
link.window-wlschangemgmt.type:   text/css

link.button-wlschangemgmt.href:   wlschangemgmt/css/button-wlschangemgmt.css
link.button-wlschangemgmt.rel:    stylesheet
link.button-wlschangemgmt.type:   text/css

link.window-wlsworkspace.href:    wlsworkspace/css/window-wlsworkspace.css
link.window-wlsworkspace.rel:     stylesheet
link.window-wlsworkspace.type:    text/css

link.book-wlsworkspace.href:      wlsworkspace/css/book-wlsworkspace.css
link.book-wlsworkspace.rel:       stylesheet
link.book-wlsworkspace.type:      text/css

link.window-wlsnavtree.href:      wlsnavtree/css/window-wlsnavtree.css
link.window-wlsnavtree.rel:       stylesheet
link.window-wlsnavtree.type:      text/css

link.window-wlsmessages.href:     wlsmessages/css/window-wlsmessages.css
link.window-wlsmessages.rel:      stylesheet
link.window-wlsmessages.type:     text/css

link.window-wlsstatus.href:       wlsstatus/css/window-wlsstatus.css
link.window-wlsstatus.rel:        stylesheet
link.window-wlsstatus.type:       text/css

link.window-wlsquicklinks.href:   wlsquicklinks/css/window-wlsquicklinks.css
link.window-wlsquicklinks.rel:    stylesheet
link.window-wlsquicklinks.type:   text/css

script.skin.src:                  skin.js
script.skin.type:                 text/javascript

script.menu.src:                  menu.js
script.menu.type:                 text/javascript

script.util.src:                  util.js
script.util.type:                 text/javascript

script.delete.src:                delete.js
script.delete.type:               text/javascript

script.float.src:                 float.js
script.float.type:                text/javascript

script.menufx.src:                menufx.js
script.menufx.type:               text/javascript

Note: If you want to customize any of the above UI elements for your own application, leave the ones you need.

Open netuix-extension.xml and delete the following: default-window-icon=”window-icon.gif” and default-window-icon-path=”/console/images/”.

Changing the Header Appearance

To change your header appearance, you need to change two files.

  1. Open /console-extension/framework/skins/xray/css/body.css and change the value of background-color: for .bea-portal-body-header
  2. Grab an image editor and change the color in /console-extension/framework/skins/xray/images/banner_bg.gif to the same value. For ascetics, you may wish to edit /console-extension/framework/skins/xray/images/banner_logo.gif as well.

Deploying Your Updates

Finally, save everything, and then right-click on the console-extension project and select Export. Export as a JAR file to domain-dir/console-ext directory (or to a handy local location to later be uploaded to the domain-dir/console-ext directory). If you made any of your changes in the file system rather than in Eclipse, be sure to refresh your project before exporting or you will get errors.

The example below uses the color value of FFCC33 to replace the default:

Although there may be some simpler paths to achieving this, this particular approach was the fastest solution that should have little or no impact to future upgrades within the 9.x WebLogic Server series. If most of these steps seem daunting, you can grab the workspace from here and find the values you want to change.

About the Author

Scott Nelson is a Professional Services Principal Portal Consultant by day and a blogger with a sense of humor by night. This article illustrates the former. To confirm the latter for yourself, visit http://fuq.fywservices.com/.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories