Skip to main content link. Accesskey S

Migrating from version 1.x to version 2.0

If you are on a prior version (1.x), follow the steps below to make your pages ready to consume the new CSS.

The Steps

Add classes to the main layout divs

For main layout divs that have an ID attribute in the list below, you must have a class attribute set to the value that is currently in the ID attribute. If you already have other classes on these divs, add the appropriate classname matching the current ID as an additional class. If your JavaScript is not using the ID attribute, you can remove the ID attribute, but this is not required.

Replace your iehacks code (no more iehacks.css style sheet)

Custom IE CSS is now coded the same way Dojo does it. Custom CSS for IE is authored inline with all other CSS and it is activated by adding CSS classes to the <html> tag at the top of the page. Use these new conditional comments on your page instead of the ones you have that pull in iehacks.css.

 <!--[if IE 6]>
  <script type="text/javascript">
    document.getElementsByTagName("html")[0].className+=" lotusui_ie lotusui_ie6";
  </script>
  <![endif]-->
  <!--[if IE 7]>
  <script type="text/javascript">
    document.getElementsByTagName("html")[0].className+=" lotusui_ie lotusui_ie7";
  </script>
  <![endif]--> 

Then use the lotusui_ie, lotusui_ie6 and lotusui_ie7 classes for targeted hacks.

Add onload accessibility script to your page

High Constrast and "images turned off" modes are now coded the same way Dojo does it. If High Contrast is detected or if images are turned off in the browser, a new class is added to the <body> tag to enable hidden markup. There are two ways to detect High Contrast. If you are using Dojo, you don't have to maintain your own code. You can add an onload handler to check if the "dijit_a11y" class has been added to the <body> tag. Be sure your onload handler is run after Dojo adds the class. Here's one way you could write that code:

dojo.addOnLoad(function() {
        var bodyElem = document.getElementsByTagName("body")[0];
        if (dojo.hasClass(bodyElem, "dijit_a11y")) {            
            dojo.addClass(bodyElem, "lotusImagesOff");
        }
 });

Dojo alt text and lotusAltText (which shows up when lotusImagesOff is set) can be safely used in the same page.

If you are not using Dojo, you need to duplicate the onload handler contained in wai.js in Dojo. Here is what is used in the developer documentation:


// NOTE: THIS CODE HAS DEPENDENCIES ON DEVELOPER DOCUMENTATION CLASSES AND REQUIRES
// CLEANUP TO BE MORE GENERIC.  IT IS NOT MEANT TO BE PRODUCTION-QUALITY CODE.
// TODO: Compare this code to the latest Dojo code and consider deleting the test DOM node at the end of the function.

// javascript to check for high contrast/images off mode

//create test case element
var imagesPath = devdoc.imagesPath;
var vTestHC = document.createElement("div");
vTestHC.id = "testHC";
vTestHC.style.cssText = 'border: 1px solid;'
		+ 'border-color:red green;'
		+ 'position: absolute;'
		+ 'height: 5px;'
		+ 'top: -999px;'
		+ 'background-image: url("' + imagesPath + '/blank.gif");';
document.body.appendChild(vTestHC);

//do the tests
var vTestHC = document.getElementById("testHC");
var vStyle = null;
try{
	vStyle = document.defaultView.getComputedStyle(vTestHC, "");
}catch(e){
	vStyle = vTestHC.currentStyle;
}
var vTestImg = vStyle.backgroundImage;
if ((vStyle.borderTopColor==vStyle.borderRightColor) || (vTestImg != null && (vTestImg == "none" || vTestImg == "url(invalid-url:)" ))){
	document.getElementsByTagName("body")[0].className+=" lotusImagesOff";
}

Add the lotusui class to your body tag <body class="lotusui">

If you already have other classes on the tag, add this as an additional class

Decide if you want the CSS to use sprited graphics

You can improve performance of your website by using sprited graphics. This reduces HTTP requests to your server. To enable the CSS to use sprited graphics, add the lotusSpritesOn class to your body tag <body class="lotusui lotusSpritesOn"> If you already have other classes on the tag, add this as an additional class.

Change the order of stylesheet linking

Link the following stylesheets in the following order:

For right-to-left versions, append the above stylesheet names with RTL (e.g. coreRTL.css). These will replace your left to right versions linked into the page.

NOTE: In prior versions, dojo.css was included in core.css and dojoTheme.css was included in defaultTheme.css. These have now been split out into separate files so consumers can choose whether or not to include the Dojo CSS as well as so reset styles work properly.

Change the paths to the stylesheets

The directory structure has changed to accommodate multiple themes. If you use the structure provided (instead of re-packaging the CSS into your own structure), use these paths now:

Change the root context of your file bundling servlet

If you use a file bundling serlvet (including a JSP file that uses the @include JSP directive to include the .css files), and if you do not re-package the CSS into a structure other than what is provided by default, you must change the root context of the servlet. Change it from the "css" folder to the "defaultTheme" folder. This is so relative links from the theme CSS work properly. There are no URLs in the css in the "base" folder. So, you can safely include those files into a different context without runtime link fixup. If you plan to use a file bundling servlet on more than one theme, you need a different instance for each theme.

Updates to banner component

Updates to title bar component

Updates to sections

There have been a few changes to sections. For more details see the section component.

	<ul class="lotusInlinelist lotusActions">
	<li class="lotusFirst">View as <a href="javascript:;">cloud</a></li>
	<li><strong>list</strong></li>
	<li><img src="images/iconPopup.gif" alt="" /><a href="javascript:showAllTags()">all</a></li>
	</ul>

Updates to widgets

Widgets now have one action icon, instead of multiple icons, in the header. See widget component.

Updates to welcome panel

Use new welcome panel code.

Updates to legal statements

If you are not already using a table for your legal statement, switch to a table. See legal component.

Updates to large application icons

Application icons should now be in PNG 8 format in your product. Replace the images on the login and about pages with new icons. Application icons are product-specific and are no longer included.

Updates to login page

Message components now have different styling depending on the type of message

See the message component for implementation details.

New comment and discussion forum html

Comments are more robust now and use different html/classes. See the comment component and this page and this forum page for implementation details.

Tools page styles have been deleted

These styles were product-specific.

Switching to themeable buttons

The search, close, and add icons created using img tags and input type=image form buttons are now created as separate images so the background color can change depending on the theme.

Search button

Add a span around the input type=image tag. See this example page for search examples in the titlebar and the sidebar):

Close button

See dialog, customize palette and welcome page for coding examples):

Add button

The add button code is almost identical to the close button code. See the buttons component for an example.

Notes

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.