Customization Palette

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.
• lotusHeading - the class assigned to the h2 tag when the customize palette header contains text rather than tabs.
• 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
• lotusPaletteNavHeader - the class assigned to a header element wrapping the back button and navigation menu heading
• lotusHeading2 - the class assigned to the h3 tag of the navigation menu header
• 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.
• lotusWidgetTitle - the class assigned to the div that contains the widget text
• lotusTitle - the class assigned h4 tag of the widget
• 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 an HTML5 header element with the class of lotusPaletteHeader and another div 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).

If you want to replace the tabs with a title, use an h2 tag with the class lotusHeading)

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

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

The browse header is a header element with the class of lotusPaletteNavHeader, an optional back button (link surrounding an image), and an h3 tag with the class lotusHeading2 that contains the text "Browse."

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

Each widget is made up of two wrapping divs. The lotusPaletteWidget class goes on the outer div, the lotusInner class goes on the inner div.

Inside of each widget is 2 divs and a link - a lotusIcon div (contains the widget icon), a lotusWidgetTitle div (contains the widget name and optional description), and a link (for the add icon).

The add icon is created using a background image. 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 assigned the class lotusTitle and can be a link.

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.

Accessibility

The customize palette has not been reviewed for accessibility although there are some ARIA attributes in place.

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.

September 2010 - accessibility fixes surrounding the header including a new lotusPaletteNavHeader div and styling using the lotusHeading and lotusHeading2 classes rather than the specific h1/h2 tags. Also moved the lotusTitle class to the h4 tag from the wrapping div and replaced it on the wrapping div with lotusWidgetTitle.

April 2011 - removed the :hover definitions for lotusPaletteWidget to deal with IE7 performance issues if those declarations are made on anything but a link element. Moved the hover effects to javascript mouseover/off events on the div.

June 19, 2012: added ellipsis fix for long widget titles. Removed artifact rating stuff and updated the Basic Implementation section.

June 26, 2012: Updated color contrast of the menu more icon to be accessible (small text 4.5:1 equivalent).