Creating Look & Feel Files

A Look & Feel file is a simple XML file that determines the skin and skeleton used for the desktop Look & Feel. When you create a Look & Feel file, you can select the new Look & Feel in the Portal Designer for your portal desktops. Look & Feel files are located in the Web Application tree in:

<application>/<project>/framework/markup/lookandfeel

where <application> is the name of your portal application and <project> is the name of your portal project. For example:

portalApp/sampleportal/framework/markup/lookandfeel

This topic explains how to create a new Look & Feel file in Weblogic Workshop using the Look & Feel Wizard. The new Look & Feel file can then be edited using the Look & Feel Editor.

To create a Look & Feel file

  1. In WebLogic Workshop, right-click over the portal application name in the Application panel, and select New > Other File Types... from the menu, as shown in the following figure. The New File dialog box appears.


  2. In the New File dialog box, select Look And Feel from the right column, as shown in the following figure.


  3. Click Create... The Look and Feel Wizard appears.


  4. Enter values for the fields in the Look & Feel Wizard using the following table for guidance:

    Tip: Before you create the Look & Feel file, you may want to copy a skin and skeleton file and use the copies with the new Look & Feel file. Whenever you edit a Look & Feel using the Look & Feel Editor, the underlying skin and skeleton files may be modified. Therefore, using copies makes sense if the existing skin and skeleton files are used with other Look and Feels, and you do not wish to affect them.

    File Name Enter a filename for the new look and feel. A .laf extension is added automatically.
    Title Enter a title that will appear in the look & feel drop-down list in the Property Editor.
    Description Enter a brief description of the look & feel.
    Skin

    Click the ellipsis icon [...] and select the skin.properties file you want the look & feel to use. The skins are located in:

    <application>/<project>/framework/skins/

    For example:

    myPortalApp/mySamplePortal/framework/skins/mySkin/skin.properties

    Skeleton

    Click the ellipsis icon [...] and select the skeleton directory you want the look & feel to use. The skeletons are located in:

    <application>/ <project>/framework/skeletons/.

    For example:

    myPortalApp/mySamplePortal/framework/skeletons/mySkeleton

  5. Click Create. The new .laf file is created and saved, and the Look & Feel Editor automatically opens.
  6. Use the Look & Feel Editor to modify the Look & Feel. For detailed information on using the Look & Feel Editor, see Using the Look & Feel Editor.
  7. To use the new Look & Feel for a portal, open the portal in WebLogic Workshop, select the Desktop icon in the Document Structure window, and select the Look & Feel in the Property Editor Look and Feel field.

Selecting a Look and Feel for a desktop in Weblogic Workshop simply gives the portal a default Look and Feel setting. Portal administrators and end users can also change the Look and Feel used for a desktop.

Note: You can also set the default icon to be used in portlet titlebars by opening the .laf file as XML in WebLogic Workshop and adding defaultWindowIcon and defaultWindowIconPath attributes. For example, if the icon you want to use is located at <application/<project>/images/window-icon.gif, set the attributes like this:

defaultWindowIcon="window-icon.gif" defaultWindowIconPath="images/"

Samples

The WebLogic Workshop Portal Extensions include a set of predefined Look & Feel files. You can find these predefined files in the sampleportal project at <BEA_HOME>/weblogic81/samples/portal/portalApp/sampleportal/framework/markup/lookandfeel. The predefined Look & Feels are also included with any Portal Web Project you add to a portal application. The files are located in <application><project>/framework/markup/lookandfeel.

The Tutorial Portal contains examples of Look & Feel implementations that let end users change a portal's Look & Feel. For instructions on viewing the Tutorial Portal, see Portal Samples.

Related Topics

How Look and Feel Determines Rendering

Creating Look & Feels

Creating Skins and Skin Themes

Creating Skeletons and Skeleton Themes

Changing Look & Feel

What is a Portal?

Creating a Portal File