Banner
The banner sits at the very top of the UI and contains application links, utility links (help, log in) and the application logo.
Classes
- lotusBanner - the class that goes on the outermost containing div.
- lotusRightCorner - the class that goes on the next outermost containing div (for additional styling options).
- lotusInner - the class that goes on the innermost containing div (for additional styling options).
- lotusInlinelist - general class used for making the lists horizontal that is used for the two sets of links in the banner.
- lotusUtility - an additional class that goes on the list of utilities (user name, log in, help).
- lotusLinks - an additional class that goes on the list of application links.
- lotusNavMenu - a class assigned to a div that wraps a list of navigation links - which shows up as a drop-down menu
- lotusNavMenuLarge - an additional class assigned with the lotusNavMenu class to allow us to size the larger application menu in Internet Explorer
Basic Implementation
The banner is created using three nested divs for additional styling options for customer customization. The three classes used are described above.
The banner includes a logo which should be created with no extra pixels on the edges so it will align properly horizontally and vertically.
A list with the class of lotusInlinelist and lotusUtility appears next in the banner, followed by a list with a class of lotusInlinelist and lotusLinks.
See the interactive.htm example page for the code for the drop-down navigation menus.
IMPORTANT CODING NOTE: Firefox has rendering issue when there are return characters within the inline list html, so code the application links and utility lnks as one string with no carriage returns.
Examples
Sample HTML
CSS (banner.css)
Theme CSS (bannerTheme.css)
This component started off being styled by using lotusBanner as an id. This is obsolete. Assign lotusBanner as a class.
There are 3 wrapping divs to support a look of rounded corners, which originated with Connections R1 and other products.
6/17/09: moved lotus product logo to a background image and added lotusAltText for high contrast mode.
4/22/09: created drop-down navigation menus (seen on interactive.htm page)