Migrating from version 2.0 to version 2.1

If you are upgrading from version 2.0 to version 2.1 of the code, follow the steps below to make your pages ready to consume the new CSS.

The Steps

Update the browser detection script

Add a test for Internet Explorer 8 into your detection script. For this release, we are keeping the general lotusui_ie class for IE6 and IE7 adjustments and using lotusui_ie8 for any additional IE8 adjustments.

Update the banner component

The banner component now includes mega drop-down menus and the application links are grouped. Please use example code on the interactive page and also refer to the banner component for code samples and instructions.

Update the title bar component

The title bar component now contains an application title. The default configuration is to contain the application title and tabs. Examples/instructions are also provided for a title bar with an application name only and for a title bar with tabs only.

Update the filters code

Filters, which used to be part of the header component, have also been needed for membership lists. So filters are now their own component. They use a newer lotusFilters2 class and now use the delete icon rather than an "x."

Update the error page

The error page example now shows two varitions of an error page. Only one would show up at a time. You'll need to update your markup to the one of these variations.

Update the login page

The login page has been simplified to be less graphically intense so it loads more quickly. There are two varities of login pages, a simple one and an extended one. Update your login page to use one of these.

Updates to about page

The about page now uses a smaller 128x128 graphic. You need to reference that new graphic in your markup.

Update related tags

Related tags now use a + symbol instead of an icon. See the new code on the 2 columns, detail view page.

Replace form footer links with buttons

Form footers now use buttons in place of links (like the cancel link).

Remove the wrapping fieldset from forms

Our forms used to use a fieldset element right inside the form element for additional styling/spacing. We have removed that element. You should now use fieldsets to wrap groups of elements. If you want visual styling, add a lotusFieldset class to the element. A fieldset used without a class will not show up in the visual UI, but will allow you to group elements for screen reader users.

Replace your deprecated components with the newer components

Deprecated components should be eliminated from your user interface because they will not be supported indefinitely. If you remove all the elements you also don't need the deprecated.css file (that has been included in core.css). You can rebuild core.css and eliminate those extra styles.

Apply the lotusSymbol class to any unicode symbols

To insure that your unicode symbols preserve their integrity in multiple languages, apply the lotusSymbol class to the element wrapping the unicode character/value.

Use the lotusPersonInactive class for non-active users

This is a new class that should be applied to a person link in place of the lotusPerson class when a user is inactive.

Use the new lotusPhoto class

If you are including a large picture on your page, like what is shown on the 3 columns with sections example page, apply the lotusPhoto class to the element, for proper styling in the new theme.

Upgrade to Dojo version 1.4.1

If you are using our dojo style overrides, they have been updated to support version 1.4.1

Also worth noting

Reset styles have been simplified

Because of multiple bug reports and to increase performance, we have trimmed down our use of reset styles. So you may notice more browser differences in your 2.1 UIs as the browsers use some of their own defaults.

New dojo tree control styling for a complex menu

This release contains styles for making the dojo tree control look like our menu component, allowing for a complex menu structure and drag/drop.

Messages now support a close button

See the message component for an example and sample markup

Our theme styles are now bundled with our core styles

Our individual stylesheets now contain all styles needed to generate core and theme styles. More details can be found in our developer guide.