Exercise 2.2: Customizing the portal site

Before you begin, you must complete Exercise 2.1: Create a new portal to display the portlet application.

Create a new theme

In the process of creating a portal application, you can choose to create a brand new theme in Portal Designer. Themes provide the overall look and feel of your portal application, and incorporate many elements of portal design, including images, navigation, tool bars, and page level visual effects. Follow these steps to create a new theme for the portal site that we have developed in this tutorial:

  1. Select File > New > Theme from the menu bar.
  2. Type Auction in Title field.
  3. Scroll and select the Corporate theme to be the source theme. It is much easier to base a new theme on an existing theme, so that you do not have to create all of the necessary theme elements from scratch.
  4. Click Next.
  5. Select the Shadow skin from the list of available skins, and click the Set as Default Skin to make Shadow the default skin for the new Auction theme.

    A skin is the border around each portlet within a portal page. Unlike themes, which apply to the overall look and feel of the portal, skins are limited to the look and feel of each portlet that you insert into your portal application. By default, only a limited selection of skins are available for each theme.

  6. Click Finish.
  7. Expand Elements > Themes in the Outline view, and select Auction.
  8. In the Properties view, select the Default check box to apply the new theme to the portal application.

    The change will be immediately applied to the Portal Configuration:
    Portal Configuration with a new theme

  9. Save the Portal Configuration.

In this portion of the exercise, you will update styles, themes, and skins in the Auction portal application, using CSS Designer and Page Designer.

Change the banner image of the current theme

To replace the banner image in the default theme for the Auction portal, follow these steps:

  1. First, you will import a new banner image into the project:
    1. From the menu bar, select File > Import. The Import dialog appears.
    2. Under Select an import source, click File System.
    3. Click Next.
    4. Because different Rational products use different installation target locations, you must leave the product's user interface to locate the plug-in that contains the new banner image. Use a file search tool to locate the com.ibm.etools.portal.examples.application_6.0.0.1 plug-in folder under the product installation path in your local file system.
    5. Return to the Import wizard, and click Browse next to the From directory field. Navigate to the following directory:
      x:\com.ibm.etools.portal.examples.application_6.0.0.1\samples
      where x: is the path that contains the com.ibm.etools.portal.examples.application_6.0.0.1 plug-in on your computer.
    6. Select auction.gif as the target of the import, and click OK.
    7. Click Browse next to the Into folder field and specify AuctionPortal/PortalContent/themes/html/Auction.
    8. Click Finish.

      The wizard imports the file into your workspace.

  2. With the Portal Configuration file for the AuctionPortal project open, select Edit Style from the Portal Designer pop-up menu. This will open the Styles.css file in CSS Designer. Styles.css is the default style sheet for the default theme in the application.

    The CSS Designer provides two views of the styles defined for CSS files: the Preview (on the left side), which provides visualized examples of the style rules as they appear in a browser rendering of a Web resource, and the Source view (on the right side), which displays a text version of the CSS file. You can edit styles using either of these views.

  3. Scroll and select the Banner Background icon in the Preview.
  4. Select Edit Style Rule [.wpsToolbarBannerBackground] from the pop-up menu.
  5. Click the Background property from the left side of the Set Style Properties dialog.
  6. Type ../../auction.gif in the Image field.
    Set Style Properties dialog
  7. Click OK.
  8. Save the CSS file and close CSS Designer. Note that the new banner image is applied to the open page in Portal Designer.

    New banner

  9. Save and close the Portal Configuration file.

You can make a large variety changes to a theme, such as the layout of a toolbar in the header area, using Page Designer. You can edit the layout (and style) of a theme and its associated skins. Changes are stored in the theme's default.jsp file, associated skins' control.jsp files, and other related JSP files. Also, any changes that you make in the editor will apply to all uses of this theme within your portal application.

Now you are ready to begin Exercise 2.3: Run the portal application in the WebSphere Portal Test Environment.

Terms of use | Feedback
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.