Using Portal Designer

Use Portal Designer to change the appearance of your portal.

Upon opening your portal project, you will see the Portal Designer editor in the center of the workbench. The following views surround it: Project Explorer, Outline and Thumbnails, Properties, and Palette.

Portal Designer

In terms of portal layout and appearance, you can think of Portal Designer as a What-You-See-Is-What-You-Get (WYSIWYG) editor. It will render graphic interface items such as themes, skins, and page layouts.

Portal Designer will also render the initial pages of JSF and Struts portlets within your portal pages, but not anything else with regard to portlet content. You can view your portal site, with portlet content, using the WebSphere® Portal test environment.

Description View
Use this editor to customize both the graphic design of your portal and the layout of your portal pages. Use it as you would use any WYSIWYG web editor. Functions you can perform include:
  • Right-clicking a design element and selecting an Insert menu item
  • Clicking on a design element to edit its properties. Scroll down to read more about working with properties
  • Using Page Designer to alter the graphic design of themes, skins and styles. These editors are available via the Edit menu.
Portal Configuration editor in Portal Designer
Portal Configuration is the name of the layout source file that resides in the root of your portal project folder.

The Project Explorer view

Description View

Project Explorer

When you open your portal project, the Project Explorer opens by default in the upper left-hand corner of your screen. Use this view to navigate the file structure of your portal.

The folders for both portal (and portlet) projects appear in the root of the Dynamic Web Projects folder. When you expand a portal project folder, the Portal Configuration appears as a node in the project root. If a portal project has portlets associated with it, the portlets will appear as children of the Portal Configuration node.

Each project's EAR folders appear in the Enterprise Applications folder.

Project Explorer view in Portal Designer

Outline and Thumbnails views

The Outline and Thumbnails views appear in the lower left-hand corner of Portal Designer editor. The Outline view appears by default when you open your portal project. It displays three root nodes:
Description View
  • Elements - expand this node to view and select non-visual elements for editing in the Properties view.
  • Layout - each page in your project appears off of the root of this node. Expand a page node to see the hierarchy of its contents (i.e. columns, rows, portlets, etc.)
  • Navigation Root - For WebSphere Portal v5.1 portal projects, Content Root is the root navigation node. The My Portal label, the Login page and the Edit My Profile page are its child nodes. You can edit both the Login and Edit My Profile pages in Portal Designer. For WebSphere Portal v5.0 projects, My Portal remains as the root navigation node for the portal.
Outline View in Portal Designer
The Layout and Content Root nodes aid in defining both the page layout and the navigation of your portal project. For more information, refer to Defining layouts.

The Thumbnails view works in conjunction with both the Theme and Skin nodes that appear within your portal project folder. For more information, refer to the Project Explorer views section on this page.

To view thumbnails of your themes and skins:
  • In the Project Explorer view, expand the Dynamic Web Projects > [Portal Project] node; then click either the Themes or Skins folder.
  • Below the Project Explorer view, surface the Thumbnails view. You will see thumbnail images of either your themes or skins.

You can drag and drop a theme thumbnail onto a Label or a Page (See Changing themes), or you can drag and drop a skin thumbnail onto a portlet. (See Changing skins).

Properties view

The Properties view appears at the bottom of the screen under the Portal Designer editor. Depending on which design element you choose, either within the Outline view or the Portal Designer editor, the properties view will change to reflect the options that you can edit for that element.

The following image shows an example of the Properties view for a WebSphere Portal v5.1 page:Properties View in Portal Designer

Palette

This view is located along the right-hand margin of the interface.

When designing the layout of your portal page, you can insert one of these items by dragging it to the Portal Designer editor.

Palette view in Portal Designer

Limitations and accessibility

Portal Designer has the following limitations:
  • Access Control - Portal Designer does not support access control. For instance, if you create a page and want to show it to only a limited number of people, you will have first deploy the portal application to the server, then use the admin portlet to set the access rights to the page.
  • Accessibility - When using Portal Designer, screen readers such as JAWS will not be able to read the correct label or page name from within the portal configuration editor. The best practice is to access page and label features from within the Outline view, which resides to the lower left of the portal configuration editor.
Related tasks
Defining layouts
Adding portlets to portal pages
Working with skins
Working with themes
Feedback
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.