Skip to main content link. Accesskey S

Customization Palette

This version is a first iteration of the palette and is considered beta.

The customization palette opens up below the place bar when the user clicks on the customize button on the place bar.

Directionality:

Palette with no widget icons

Classes

  • lotusPalette - this is the container class on the div.
  • lotusPaletteHeader - this contains the header navigation (to the different kinds of customization), meta data, and the close button.
  • lotusClose - the class for the close button
  • lotusPaletteBody - the class that surrounds the rest of the palette (except for the header)
  • lotusPaletteNav - the left-hand nav
  • lotusMore - this class is an additional menu class that goes on the li tag of any menu item that has submenu items
  • lotusPaletteContent - the right hand widget content
  • lotusPlain - an additional class on the lotusPaletteContent div for when the widgets have no icons.
  • lotusPaletteWidget - the class that surrounds an individual widget
  • lotusInner - the class assigned to an inner widget div to help with layout issues
  • lotusIcon - the class assigned to the div that contains the widget type icon and to the link that contains the add icon.
  • lotusTitle - the class assigned to the div that contains the widget text
  • lotusRating0, lotusRating1, lotusRating2, lotusRating3, lotusRating4, lotusRating5 - the class assigned to the span that wraps the title text
  • lotusMenu, lotusPaging, lotusSearch, lotusTabs - these components (and their classes) are used in the palette and their styles modified, accordingly.

Basic Implementation

Create a div with class of lotusPalette. Inside it, create a div with the class of lotusPaletteHeader and another with the class of lotusPaletteBody.

Inside the header, use tab component for the customize options, and a link tag floated right for the close button (with the close button image inside the link).

Inside the palette body, create a div with the class of lotusPaletteNav and another with the class of lotusPaletteContent.

Inside the left nav, place a lotusSearch component, a "browse" header (use an h3 tag) and a lotusMenu component. Use lotusChunk around the search component for proper spacing.

In the content div, place 12 widgets, then a paging div.

Each widget is made up of 2 divs and a link - a lotusIcon div (contains the widget icon), a lotusTitle div (contains the widget name and optional rating), and a link (for the add icon).

The rating images and add icon are created using background images. For the add icon, a blank.gif is used as the foreground image inside the link tag so the user will see alt text if images are turned off.

The widget text is created using an h4 tag and can be a link. If a rating is used, one of the rating classes listed above is assigned to the h4 tag.

For accessibility, the title text on the add icon contains the name of the widget, so screen reader users can navigate from link to link without having to read the text. The use of the H4 tag also allows them the option of jumping from header to header.

Variations

The widget palette either has an icon on every widget or no icon on any widget. The two aren't mixed.

Add an additional class of lotusPlain to the lotusPaletteContent div and put   inside the lotusIcon div if you are creating widgets with no icons.

Add a class of lotusDraggable to the widget if it is draggable.

Examples

Sample HTML

Sample HTML - Palette with no widget icons

CSS (palette.css)

Theme CSS (paletteTheme.css)

This is a new component as of February 2009.

See also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.