Skip Headers
Oracle® Fusion Middleware Extending the Administration Console for Oracle WebLogic Server
12c Release 1 (12.1.1)

Part Number E24966-01
Go to Documentation Home
Home
Go to Table of Contents
Contents
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

5 Rebranding the Administration Console

This chapter describes how to create a WebLogic Portal Look and Feel and deploy it as a WebLogic Server 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

This chapter includes the following sections:

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:

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 follows
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

5. 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:

To expand the template:

  1. 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/.

  2. 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.

  3. 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:

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

  1. 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.

  2. 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

  3. 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
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:

  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 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.

  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=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
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:

  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 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.".