Skip navigation.
Downloads | Product Documentation | Support

Extending the Administration Console

# Rebranding the Administration Console

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

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

Table 5-1 Model MBean Development Tasks and Results

Step | Description | Result
--- | --- | ---
1. Copy and Modify the Sample Look and Feel: Main Steps. | BEA installs a sample Look and Feel that you use as a starting point. Replace the images and styles in this sample with your own. | A Look and Feel that contains your logos and styles.
2. (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.
3.Modify the Sample NetUI Extension File. | The NetUI Extension file is the deployment descriptor for your extension. It describes the locations of files and directories in your Look and Feel. | A deployment descriptor for your extension.
4. Archive and deploy the extension. | Archive the Look and Feel extension in a JAR file and copy it to your domain's `console-ext` directory. See 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 BEA packages and installs.

# Copy and Modify the Sample Look and Feel: Main Steps

To create a simple extension that replaces the BEA logos and colors with your own:

1. Copy all files from the following directory into your own development directory:

`WL_HOME/samples/server/xray/console-extension`

where `WL_HOME` is the directory in which you installed WebLogic Server.

2. Change the name of the `xray` directory under `root-dir``/framework/skins` and `root-dir``/framework/skeletons` to a name that you choose.

where `root-dir` is the name of your development directory.

For example, `root-dir``/framework/skins/mycompany` and `root-dir``/framework/skeletons/mycompany`

3. Modify the Administration Console Banner.
4. Modify Colors, Fonts, Buttons, and Images.
5. Modify Themes for the Change Center and Other Portlets.
6. Modify the Login and Error Page.

Making more complex changes to the WebLogic Server Look and Feel, such as changing the layout of portal components and navigation menus, requires an advanced knowledge of WebLogic Portal Look and Feels. If you have a license for WebLogic Workshop, you can use its Look and Feel editor to make these complex changes. For more information, see the Portal User Interface Framework Guide.

## Modify the Administration Console Banner

To overwrite the MedRec Look and Feel's image files with your company's image files:

1. To replace the logo in the Administration Console banner, save your own logo file as `root-dir``/framework/skins/``mycompany``/images/banner_logo.gif`.

To prevent the need to resize the banner frame, do not make your image any taller than 42 pixels.

2. To replace the ALT text for the logo, open `root-dir``/framework/skeletons/``mycompany``/header.jsp` and replace `<bean:message key="login.wlsident">` with your text.

If you want to provide localized strings, use the JSTL `<fmt:message>` tag. See Use a Message Bundle for Your Look and Feel.

3. 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/``mycompany``/images/banner_bg.gif`

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

## Modify Colors, Fonts, Buttons, and Images

The Administration Console uses several cascading style sheets (CSS) to specify its fonts and colors. To change these styles, open the style sheet and change the style's definition. Table 5-2 summarizes the CSS files that the Administration Console uses. All of these files are located in the `root-dir``/framework/skins/``mycompany``/css` directory.

Table 5-2 CSS Files That Define General Colors and Fonts

CSS File | Description
--- | ---
`wls.css` | Contains WebLogic Server styles for the following areas: General definitions for elements such as `body`, `a`, `h1`, and `h2` Data tables Form fields WebLogic Server form buttons Error messages Toolbar content Breadcrumbs content General styles for How Do I..., System Status, and Change Center portlets
`body.css` `book.css` `button.css` `form.css` `layout.css` `portlet.css` `window.css` | Contain WebLogic Portal framework styles for the following areas (some of which are not used by the Administration Console): Portal header and footer Book, page, and menu styles Button styles Form, input, and text area styles Layout and placeholder styles Portlet styles

The buttons in the Administration Console use a repeating background image to render the blue fade (and grey for inactive buttons). The image files for these buttons are located in the following directory:
`root-dir``/framework/skins/``mycompany``/images`

## Modify Themes for the Change Center and Other Portlets

Several portlets in the Administration Console use a theme, and you can change the definitions of these themes. Themes are similar to Look and Feels but the scope of a theme is limited to a section of a portal, such as a book, page, or portlet. A theme can be used to change the look and feel of the components of a portal without affecting the portal itself.

For example, the Change Center portlet uses its own theme to distinguish its buttons from the other form buttons in the Administration Console.

To change the color of a theme's buttons or title bars, change the images and styles in the theme's `skins` directory. Table 5-2 summarizes the directories that contain CSS files and images for theme skins. All of these directories are under the `root-dir``/framework/skins/``mycompany` directory. For information about modifying skin themes, see Creating Skins and Skin Themes in WebLogic Workshop Online Help.

Table 5-3 Skins for Administration Console Themes

Skin Directory | Description
--- | ---
`wlsbreadcrumbs` | Defines fonts and spacing for the breadcrumbs portlet, which displays above the tabbed interface and provides a navigation history.
`wlschangemgmt` | Defines buttons, fonts, title bar background, and spacing for the Change Center portlet.
`wlsmessages` | Defines buttons, fonts, title bar background, and spacing for the messages portlet, which displays only when the Administration Console has validation or confirmation messages.
`wlsnavtree` | Defines buttons, fonts, title bar background, and spacing for the NavTreePortlet.
`wlsquicklinks` | Defines buttons, fonts, title bar background, and spacing for the How Do I... portlet.
`wlsstatus` | Defines buttons, fonts, title bar background, and spacing for the System Status portlet.
`wlstoolbar` | Defines fonts and spacing for the breadcrumbs portlet, which displays in the banner and contains the Home, Help, and AskBEA buttons.
`wlsworkspace` | Defines borders, spacing, and background colors of the books and pages in the ContentBook area of the Administration Console.

Each theme is made up of a skin and a skeleton. The skeleton defines the overall structure of the portlet contents. The definition for each theme's skeleton is under the `root-dir``/framework/skeletons/``mycompany` directory. For information about modifying skeleton themes, see Creating Skeletons and Skeleton Themes in WebLogic Workshop Online Help.

## Modify the Login and Error Page

The login page asks users to enter a user ID and password. The login error page displays if users enter invalid data. Both of these pages are displayed before the Administration Console loads its portal desktop. Therefore, these pages do not use the portal's Look and Feel and their image and stylesheet files are not under the `root-dir``/framework` directory. Table 5-4 summarizes the files and directories that determine the appearance of the login and login error pages.

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

File | Description
--- | ---
`root-dir``/common/ login.css` | Defines fonts and spacing for the login page.
`root-dir``/images/ login_banner_bg.gif login_banner_right.gif login_banner.gif login_bottom.gif` | Images for the login page.
`root-dir``/login/ LoginError.jsp LoginForm.jsp` | Render the login and login error pages. 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.

# Use a Message Bundle for Your Look and Feel

In the banner, login, and login error 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`:

1. 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 `WEB-INF/classes/global.properties`. If the Web browser or operating system specifies a different locale, then the JSP tag would load `WEB-INF/classes/global_``locale``.properties`.

2. 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=BEA 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 Creating a Message Bundle.

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

Table 5-5 Messages in Banner, Login, and Login Error Pages

File | Message Key and Value
--- | ---
`root-dir``/login/ LoginForm.jsp` | `window.title=BEA WebLogic Server Administration Console` `login.wlsident=BEA 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`
`root-dir``/login/ LoginError.jsp` | `window.title=BEA WebLogic Server Administration Console` `login.wlsident=BEA WebLogic Server Administration Console` `loginerror.authdenied=Authentication Denied` `loginerror.passwordrefused=The username or password has been refused by WebLogic Server. Please try again.` `login.username=Username:` `login.password=Password:` `login.submit=Log In`
`root-dir``/framework/ skeleton/``mycompany``/ header.jsp` | `window.title=BEA WebLogic Server Administration Console`

# Modify the Sample NetUI Extension File

A NetUI Extension file 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. For more information, see the NetUI Extensions Schema Reference.

The sample file is in the following location:
`root-dir``/WEB-INF/netuix-extension.xml`

To modify this file:

1. Open the file in a validating XML editor (recommended) or a text editor.
2. 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.

3. In the `<look-and-feel-content>` element:

1. In the `title`, `skin`, and `skeleton` attributes, replace the `medrec` value with the name of the directory you chose in step 2 in Copy and Modify the Sample Look and Feel: Main Steps.
2. In the `definitionLabel` and `markupName` attributes, replace the `medrec` 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.