Random Stuff About Stuff

Customise the skin of weblogic admin console

March 31, 2014

If you have several Weblogic servers you might find it useful to customise the look of the Admin Console so that you can quickly see which one you are on.
For example having a different border colour for production and development.
You can do this by editing the look and feel of the console.
Full details are available on the Oracle site here

Below is a quick example of what worked for me
Change into the directory where the console app is located, it will depend on your Oracle based directory but it will be something like this

cd /Oracle/Middleware/Oracle_Home/wlserver/server/lib/consoleapp/webapp/framework/skins/wlsconsole/css  

What I have done is replace the Oracle logo with my own text to identify the server and added a coloured border to distinguish each server.
The red box surrounds where I want to place my custom text

custom_console_1

The first file you need to edit is console.css
Add following lines to the end of the file, this will insert the text “PRODUCTION TEST” as part of the header of the console, allowing you to see which server you are on

#product-brand-name:before {  
    background-color: blue;  
    content: "PRODUCTION TEST ";  
    font-size: large;  
    margin-right: 20px;  
    padding: 35px;  
}  

This adds the text with a blue background like like

custom_console_2

Next find the rule below and add the display setting which will hide the Oracle logo.

#logo {  
  padding-top: 3px;  
  display: none;  
}

The logo should now be gone and should look like the below

custom_console_3

Lastly for this file find the below rule and change the padding to better align our new custom box

#console-header-logo {  
  float: left;  
  width: 400px;  
  padding: 0 0 5px 0;  
  white-space: nowrap;  
}

It should now look like below

custom_console_4

And lastly to create a coloured border edit the file general.css
Find the html element rule and add a border with the colour and size you want

html {  
    background-color: #FFFFFF;  
    border: 8px solid blue;  
}  

This should give you something like this, which I believe makes it easy to see which server you are on, you can have bolder colours represent your main servers.

custom_console_5


Written by David Kerwick who lives and works Dublin as a Java Technical Lead.