5 Rebranding the Administration Console

This section describes how to create a WebLogic Portal Look and Feel and deploy it as an Administration Console extension. A Look and Feel extension enables you to replace some or all of Oracle's logos, colors, and styles in the Administration Console.

Files Used to Create a Look and Feel

The following types of files are used to create the look and feel of a console extension:

Cascading stylesheets (CSS). Most of the changes (and the easiest changes) are done by changing CSS.
Images. These may be referenced from CSS files or by the HTML generated by skeleton JSPs or content JSPs. If you change an image but keep it the same size and use the same name, you do not have to change the CSS or JSPs that reference it.
Skeleton Java Server (JSP) files.
JavaScript files. Client side behaviors come from JavaScript files. Oracle recommends that you do not change these files.

All of the Look and Feel files (CSS, skeleton, JavaScript and images) are subject to change with each release. Therefore, when you upgrade to a new release of WebLogic server, you may have to update your custom Look and Feel.

Overview of the Process

Figure 5-1 illustrates the process. The steps in the process and the results of each are described in Table 5-1. Subsequent sections detail each step in the process.

Figure 5-1 Administration Console Extension Development Overview

Description of "Figure 5-1 Administration Console Extension Development Overview"

Table 5-1 Rebrand the Administration Console: Tasks and Results

Step	Description	Result
1. Expand the Look and Feel Template	WebLogic Server includes a Look and Feel template that you can use as a starting point. Expand the template to access the files.	A set of Look and Feel files you can modify.
2. Modify or Replace Files	Replace images and styles with your own to create a custom Look and Feel for the console.	A Look and Feel that contains your logos and styles.
3. (Optional) Use a Message Bundle for Your Look and Feel	If you want to change the text messages displayed in the banner, login, and login error pages, create your own message bundle and modify the pages to use messages from your bundle.	Localized properties files that contain your messages.
4.Create a NetUI Extension File	The NetUI Extension file describes the locations of files and directories in your Look and Feel.	`netuix-extension.xml`
45 Archive and Deploy the Extension	Archive the Look and Feel extension in a WAR file and copy it to your domain's `console-ext` directory. See Chapter 9, "Archiving and Deploying Console Extensions."	When the Administration Console starts in your domain, it uses the Look and Feel extension that is in the domain's `console-ext` directory instead of the Look and Feel that Oracle packages and installs.

Expand the Look and Feel Template

Your WebLogic Server installation includes a Look and Feel template that you can use as a starting point. Expand the template, and replace the images and styles with your own. There are two files:

build-new-laf.xml

This file is an ant script that creates the initial set of Look and Feel files for an extension. This script expands the Look and Feel files from laftemplate.zip (see below) and renames directories to correspond to the name of your extension.
laftemplate.zip

This template contains the initial set of Look and Feel files that build-new-laf.xml expands.

To expand the template:

If you do not already have Apache Ant installed (or available in an IDE), install and configure it. See The Apache Ant Project at http://ant.apache.org/.
From a command prompt, change to the following directory:
```
WL_HOME/server/lib/console-ext/templates
```
where WL_HOME is the directory in which you installed WebLogic Server.
Run Ant on build-new-laf.xml using the following syntax:
```
ant -f build-new-laf.xml -Dname=ext-name -Ddir=root-dir
```
where ext-name is the name of your extension and root-dir is your console extension development directory, for example:
```
ant -f build-new-laf.xml -Dname=myLAF -Ddir=c:\src\laf-ext
```
The files from laftemplate.zip are extracted into root-dir.

Modify or Replace Files

Once the template is expanded, you can modify or replace the files to create your own Look and Feel. See the following:

Modify the Administration Console Banner
Modify the Login Page
Modify Colors, Fonts, Buttons, and Images

Making more complex changes to the WebLogic Server Look and Feel, such as changing the layout of portal components and navigation menus, requires a more advanced knowledge of WebLogic Portal Look and Feels. For more information, see "User Interface Development with Look & Feel Features" in Portal Development Guide for Oracle WebLogic Portal.

Modify the Administration Console Banner

To overwrite the sample Look and Feel's image files with your image files, do the following

To replace the logo in the Administration Console banner, save your own logo file as root-dir/framework/skins/ext-name/images/Branding_WeblogicConsole.gif.

To prevent the need to resize the banner frame, do not change the size of the image.
To change the background color of the banner, replace the following image file with one of the same size but that contains a different color: root-dir/framework/skins/ext-name/images/titlebar_bg.png
To replace the ALT text for the logo, change the value of the login.wlsident key in the global.properties file (and any bundle_locale.properties files). See Use a Message Bundle for Your Look and Feel.

To make more complex modifications, you can change the JSP and styles that render the banner. The root-dir/framework/skeletons/ext-name/header.jsp file determines the contents of the Administration Console banner. Within header.jsp, the style console-header-logo specifies the name and location of an image file that is used as the banner background. The style console-title specifies the name and location of the logo file. Both of these styles are defined in root-dir/framework/skins/ext-name/css/console.css.

Note:

You must precompile JSPs before deploying the extension.

Modify the Login Page

The login page asks users to enter a user ID and password. Table 5-2 summarizes the files that determine the appearance of the login page.

Table 5-2 Files for the Login and Login Error Page Appearance

File Name and Path (Under root-dir/) Description

File Name and Path (Under `root-dir/`)	Description
css/login.css	Defines fonts and spacing for the login page.
framework/skins/ext-name/images/Branding_Login_WeblogicConsole.gif framework/skins/ext-name/images/Login_GC_LoginPage_Bg.gif framework/skins/ext-name/images/Loginarea_Background.png	Images for the login page. See Table 5-4 for more information about `Login_GC_LoginPage_Bg.gif`.and `Loginarea_Background.png`.
login/LoginForm.jsp	Render the login page. If you want to change the text that these pages display, modify the `<fmt:message/>` JSP tags to point to messages in your own message bundle. See Use a Message Bundle for Your Look and Feel.

css/login.css

Defines fonts and spacing for the login page.

framework/skins/ext-name/images/Branding_Login_WeblogicConsole.gif

framework/skins/ext-name/images/Login_GC_LoginPage_Bg.gif

framework/skins/ext-name/images/Loginarea_Background.png

Images for the login page. See Table 5-4 for more information about Login_GC_LoginPage_Bg.gif.and Loginarea_Background.png.

login/LoginForm.jsp

Render the login page.

If you want to change the text that these pages display, modify the <fmt:message/> JSP tags to point to messages in your own message bundle. See Use a Message Bundle for Your Look and Feel.

Modify Colors, Fonts, Buttons, and Images

The Administration Console uses several cascading style sheets (CSS) to specify its fonts and colors, as well as other properties such as spacing. To change these styles, open the style sheet and change the style's definition.

Style Sheet Properties

Table 5-3 summarizes the Look and Feel styles defined in the style sheets. The styles themselves are not described in the table, because the style names in the style sheets are adequately descriptive, for example, background-color.

Table 5-3 CSS Style Sheets Used for Look and Feel Extensions

File Name and Path (Under `root-dir/`)	Styles
css/changemgt.css	Styles for the Change Center ("Lock and Edit") panel.
css/content.css	The following styles: General console layout, such as margins. The toolbar area. Breadcrumbs. Messages. Data tables.
css/forms.css	Styles for defining forms, such as configuration and monitoring page content areas.
css/jndinavtree.css	Styles to define the navigation tree in the JNDI browser.
css/login.css	Styles for the login page.
css/navtree.css	Styles to define the navigation tree in the Domain Structure panel.
css/quicklinks.css	Styles for the How Do I... panel.
css/systemstatus.css	Styles for the System Status panel.
framework/skeletons/ext-name/css/layout.css	Default styles for the grid on which the other user-interface items are arranged.
framework/skins/ext-name/css/console.css	The following styles: Console header and footer styles, including logo image file name and location, background color, size, etc. Structural elements, such as margins and widths. Background colors for content areas. Breadcrumb styles. Styles to enhance screen reader support.
framework/skins/ext-name/css/general.css	The following styles: The background color for the console, including the Domain Structure, How do I..., and System Status panes on the left side, as well as the areas behind content areas. Typography throughout the console, including font family, font weight, font size, text color, text decoration, link styles, etc.
framework/skins/ext-name/css/menu.css.css	Styles to define menu margins, padding, backgrounds, colors, etc.
framework/skins/ext-name/css/window.css	The following styles: Titlebar colors, borders, padding, alignment, image rollover behavior, etc. Windows styles, such as border style and color, spacing, background image file name and location, etc. Window content overflow handling.

Images Used In Conjunction with Style Sheets

Several images are used in conjunction with the style sheets to create effects such as rounded and shaded corners on tabs and buttons. These are summarized in Table 5-4 and Table 5-5. To change any of these effects, you can substitute your image for the default image, using the same file name; or you can reference a different image file from the style sheet.

Note:

Two tables show the association of the style sheets and the images. Table 5-4 shows files relative to root-dir/ and Table 5-5 shows files relative to root-dir/framework/skins/ext-name. There is no special significance that the files are grouped this way except to improve the readability of the tables.

Other images than the ones listed in the tables are also used in the console, and some are referenced in the style sheets. However, these tables only show those that are used to create formatting effects, as mentioned above. Browse root-dir/framework/skins/ext-name images/ and root-dir/images/ to see the other images.

Table 5-4 Images Used With Style Sheets (Under root-dir/)

Effect	CSS File	Image file
The surface of a button. See also use of this image with `login.css`.	css/forms.css	images/button_bg_n.png
The surface of a button when the mouse pointer rolls over it. See also use of this image with `login.css`.	css/forms.css	images/button_bg_mo.png
The surface of a button when it is pressed down. See also use of this image with `login.css`.	css/forms.css	images/button_bg_md.png
The background of the Welcome box that prompts for Username and Password when first starting WebLogic Server.	css/login.css	framework/skins/ext-name/images/ Loginarea_Background.png
The surface of the Log In button in the Welcome box. See also use of this image in `forms.css`, listed above.	css/login.css	images/button_bg_n.png
The surface of a button when the mouse pointer rolls over it. See also use of this image in `forms.css`, listed above.	css/login.css	images/button_bg_mo.png
The surface of a button when it is pressed down. See also use of this image in `forms.css`, listed above.	css/login.css	images/button_bg_md.png
The background of the Login page.	css/login.css	framework/skins/ext-name/images/ Login_GC_LoginPage_Bg.gif

Table 5-5 Images Used With Style Sheets (Under root-dir/framework/skins/ext-name/)

Effect	CSS File	Image file
Title bar at top of panels	css/window.css	images/titlebar_bg.png
Background for entire console. Visible at top of console behind logo.	css/console.css	images/r_bg_global.png
The left edge of a tab. The top half of the image is used for unselected tabs and the bottom half is used for selected tabs.	css/menu.css	images/tab_left.gif
The main surface of a tab. The top half of the image is used for unselected tabs and the bottom half is used for selected tabs.	css/console.css	images/tab_right.gif
The corner of a shadow behind a panel. With default settings, it is at the top and bottom right corners.	css/window.css	images/shadow-corners
The right side of a shadow behind a panel.	css/window.css	images/shadow-right.gif
The bottom of a shadow behind a panel.	css/window.css	images/shadow-bottom.gif

Use a Message Bundle for Your Look and Feel

In the banner and login pages, the Administration Console uses JSTL tags to load text messages from localized properties files. For example, to display the window title in LoginForm.jsp:

The <fmt:setBundle basename="global" var="current_bundle" scope="page"/> tag in LoginForm.jsp sets the current message bundle to global.

This JSP tag looks in WEB-INF/classes for files with the following name pattern:
```
bundle[_locale].properties.
```
The default properties file for this bundle is global.properties in WL_HOME/server/lib/consoleapp/webapp/WEB-INF/classes/console.jar. If the Web browser or operating system specifies a different locale, then the JSP tag would load global_locale.properties.
The <fmt:message key="window.title" bundle="${current_bundle}" /> tag opens the global.properties file and renders the text that is identified by the window.title key:
```
window.title=Oracle WebLogic Server Administration Console 
```

If you want to change these messages, you can create your own properties files and modify the JSP tags to use your bundle. See Chapter 4, "Creating a Message Bundle."

Table 5-6 describes the text messages that the banner, login, and login error pages display.

Table 5-6 Messages in Banner and Login Pages

File (Under root-dir/) Message Key and Value

File (Under `root-dir/`)	Message Key and Value
login/LoginForm.jsp	window.title=Oracle WebLogic Server Administration Console login.wlsident=Oracle WebLogic Server Administration Console login.welcome2=Log in to work with the WebLogic Server domain login.username=Username: login.password=Password: login.submit=Log In
framework/skeleton/mycompany/header.jsp	window.title=Oracle WebLogic Server Administration Console

login/LoginForm.jsp

window.title=Oracle WebLogic Server Administration Console 
login.wlsident=Oracle WebLogic Server Administration Console 
login.welcome2=Log in to work with the WebLogic Server domain 
login.username=Username: 
login.password=Password: 
login.submit=Log In

framework/skeleton/mycompany/header.jsp

window.title=Oracle WebLogic Server Administration Console

Create a NetUI Extension File

A NetUI Extension file, named netuix-extension.xml, is the deployment descriptor for your Look and Feel. It contains the names and locations of the files in your Look and Feel, and it causes the Administration Console to replace its Look and Feel with yours. See netuix-extension.xml.. For more information about this file, see the NetUI Extensions Schema Reference.

Example 5-1 netuix-extension.xml

<?xml version="1.0" encoding="UTF-8"?>
<weblogic-portal-extension
  xmlns="http://www.bea.com/servers/portal/weblogic-portal/8.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.bea.com/servers/portal/weblogic-portal/8.0 netuix-extension-1_0_0.xsd">

  <provider-info>
    <title>My LAF</title>
    <version>1.0</version>
    <description>My LAF.</description>
    <author>Me</author>
    <support-url>My URL</support-url>
  </provider-info>

  <portal-file>/console.portal</portal-file>
     <desktop-extension>
       <look-and-feel-content title="myLAF"
             definitionLabel="myLAF"
             markupName="myLookAndFeel"
             skin="myLAF"
             skin-path="/framework/skins"
             skeleton="myLAF"
             skeleton-path="/framework/skeletons"
             default-window-icon="window-icon.gif"
             default-window-icon-path="images/"/>

</weblogic-portal-extension>

To modify this file:

Open the file in a validating XML editor (recommended) or a text editor.
In the <provider-info> element, change the information to describe your Look and Feel, developer contact and support URL.

The information in this element has no programmatic significance. It is intended to help your technical support team keep track of your software modifications.
In the <look-and-feel-content> element:
1. In the title, skin, and skeleton attributes, replace the myLAF value with the name of the directory you chose in step 3 in Expand the Look and Feel Template.
2. In the definitionLabel and markupName attributes, replace the myLAF value with the name of the directory you chose in step 2 or use some other string. These attributes are required by the portal framework, but are not used in a Look and Feel extension.

Archive and Deploy the Extension

For instructions on how to archive and deploy the extension, see Chapter 9, "Archiving and Deploying Console Extensions.".