Portal User Interface Framework Reference

Many styles and skeletons are used to render a portal desktop. This topic shows some of the main CSS style classes used in desktop look & feels that are shipped with WebLogic Portal and describes the skeleton JSPs used to render portal components in HTML. Use this topic to help you troubleshoot your portal desktops.

This topic contains the following sections:

Style Sheet Class Reference

Skeleton Reference

Style Sheet Class Reference

The following figure points to some key pieces of a desktop that are controlled by CSS classes. The tables that follows identify the style classes used. For each piece, the style class controls all aspects, including font color, background color, border, padding, and so on.

The style classes listed occur in multiple places in the CSS file. For example, .bea-portal-book-primary-menu-single, .bea-portal-book-primary-menu-single a, and .bea-portal-book-primary-menu-single span are grouped to share a specific set of attributes, yet a standalone entry for .bea-portal-book-primary-menu-single a exists to let you apply style attributes to that class only. When you modify one of the classes listed, determine whether you want the attributes to be shared among multiple classes or used by only that one class. Then modify or add the attribute(s) you want in the appropriate location in the CSS file.

The style classes used in the illustration change depending upon the navigation type of the book at each level. The figure shows a mix of books with single-level menus and books with multi-level menus.

If the book is set to Single-Level Menu

  Description Style(s) Style sheet

1

Top-level unselected menu item

.bea-portal-book-primary-menu-single a

book.css
  Rollover on top-level unselected menu item .bea-portal-book-primary-menu-single a:hover book.css

2

Top-level selected menu item .bea-portal-book-primary-menu-single span book.css

3

Top-level menu background .bea-portal-book-primary-menu-single book.css

4

First-level unselected menu item

.bea-portal-book-menu-single a

book.css
  Rollover on first-level unselected menu item .bea-portal-book-menu-single a:hover book.css

5

First-level selected menu item .bea-portal-book-menu-single span book.css

6

First-level menu background. Also applies to the background that displays sub-books and pages. .bea-portal-book-single book.css

7/8

Second-and-higher-level selected menus use the same style classes as the first-level menus.

book.css

9

Portlet titlebar background: .bea-portal-window-titlebar
title: .bea-portal-window-titlebar-title
window.css

10

Portlet titlebar icons These are not determined by style classes. They come from the skin's /images directory. This information is presented for convenience. N/A

11

Portlet border .bea-portal-window window.css

12

Page background .bea-portal-book-page book.css

13

Portlet content (mainly for padding)

The content in the portlet itself (JSP, HTML, or JPF) are not skin-related and controls the styles used within itself.

.bea-portal-window-content
window.css

If the book is set to Multi-Level Menu

  Description Style(s) Style sheet

1

Top-level unselected menu item

.bea-portal-book-primary-menu-root a

book.css
  Rollover on top-level unselected menu item .bea-portal-book-primary-menu-root a:hover book.css

2

Top-level selected menu item .bea-portal-book-primary-menu-root a book.css

3

Top-level menu background .bea-portal-book-primary-menu-root book.css

4

Sub-level menu items in a drop-down list from the top-level menu (not shown in the figure)

.bea-portal-book-primary-menu-nested-item a

book.css

Different combinations of menus result in different styles used that are not listed. For example, if a book with a multi-level menu is nested in a book with a single-level menu, the drop-down list for the nested books and pages in the multi-level menu is controlled by .bea-portal-book-menu-root a:hover; and if the same book contains only pages, resulting in no drop-down list, the styles for the menu items are controlled by .bea-portal-book-menu-root a.

Troubleshooting the Styles

If you do not find the styles you need to modify in the previous tables, use the following guidelines.

Another way to pinpoint the styles you need to modify is to view the HTML source and look at the styles used, as shown in the following example:

    <div class="bea-portal-ie-table-buffer-div">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="bea-portal-book-primary-menu-single-container" align="left" nowrap="nowrap">
<ul
class="bea-portal-book-primary-menu-single"
><li class="bea-portal-book-primary-menu-single-item"><a href="http://localhost:7001/sampleportal/my.portal?_nfpb=true&_pageLabel=my_page_2">Page 1</a></li><li class="bea-portal-book-primary-menu-single-item-active"><span>My Book</span></li></ul>
</td>

In this example, the unordered list <ul>, which corresponds to a list of menu items, controls the menu styles. The style class used is bea-portal-book-primary-menu-single. However, the context of the menu's sub-elements determines the more fine-grained styles used. For example, if a menu item is linked (using an <a> tag), the style class you would modify to control the linked menu items is bea-portal-book-primary-menu-single a. If an active menu item was wrapped in a <span> tag, the style class you would modify is bea-portal-book-primary-menu-single span.

Skeleton Reference

The following table lists portal components and shows which skeletons are used to render each.

This portal component... uses this skeleton JSP... to:
Desktop desktop.jsp Insert the HTML document declarations and insert <!-- Begin Desktop --> and <!-- End Desktop --> comments.
Shell shell.jsp Insert the HTML document's opening and closing <html> tag and insert <!-- Begin Shell --> and <!-- End Shell --> comments.
Shell - The <netuix:head> tag in a .shell file head.jsp Insert the HTML document's opening and closing <head> tag and insert <!-- Begin Head --> and <!-- End Head --> comments.
Shell - The <netuix:body> tag in a .shell file body.jsp Insert the HTML document's opening and closing <body> tag and provide presentation logic.
Shell - The <hetuix:header> tag in a .shell file header.jsp Render the desktop's header region.
Shell - The <netuix:footer> tag in a .shell file footer.jsp Render the desktop's footer region.
Book

book.jsp

Render the book framework and styles.
Navigation Menu singlelevelmenu.jsp Render the Single Level Menu provided by WebLogic Portal.
Navigation Menu multilevelmenu.jsp Render the Multi Level Menu provided by WebLogic Portal.
Navigation Menu submenu.jsp Used by multilevelmenu.jsp to create a book's navigation links. Also provides rendering for nested books and pages.
Page page.jsp Render a page framework and styles.
Layout - The <netuix:gridLayout> tag in a .layout file gridlayout.jsp Render placeholders in the layout using the Grid Layout style.
Layout - The <netuix:borderLayout> tag in a .layout file borderlayout.jsp Render placeholders in the layout using the Border layout style.
Layout - The <netuix:flowLayout> tag in a .layout file. flowlayout.jsp Render placeholders in the layout using the Flow layout style.
Layout - The <netuix:placeholder> tag in the .layout file placeholder.jsp Render an individual placeholder in a Layout.
Portlet titlebar titlebar.jsp Render a portlet titlebar.
Portlet titlebar buttons for floating windows buttonfloat.jsp Render a button that launches separate portlet mode windows (for example, Edit and Help).
Portlet titlebar toggle buttons togglebutton.jsp Render a button that toggles between portlet states (for example, Minimize/Restore and Maximize/Restore).
Portlet titlebar Delete button buttondelete.jsp Render a button that removes a portlet from a page.
Portlet error.jsp Display error messages in a portlet.
Portlet webflowportlet.jsp Render a Webflow portlet created in previous versions of WebLogic Portal and running in a compatibility domain.
Book, Page, and Portlet window.jsp Rendering the container for the content area.
Theme theme.jsp Render books, pages, and portlets in the themes applied to them.

Related Topics

How the Shell Determines Header and Footer Content

How Portal Components are Rendered

Creating Look & Feel Files

Creating Skins and Skin Themes

Creating Skeletons and Skeleton Themes