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

- Style classes ending with space-a (" a") control clickable menu items.
- Style classes ending with a:hover control rollover styles.
- Style classes ending with space-span (" span") usually control selected menu items.
- Style classes ending with space-ul or space-li (" ul" or " li") control unordered lists and list items, particularly their inline horizontal placement rather than vertical placement.
- Base style classes usually control the menu background.
- Style classes inserted by the skeleton JSPs that do not have corresponding entries in a CSS file are ignored.

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