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.
- lotusFrame
- lotusBanner
- lotusLogo
- lotusTitleBar
- lotusPlaceBar
- lotusMain
- lotusContent
- lotusColLeft
- lotusColRight
- lotusFooter
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:
- core.css
- defaultTheme.css
- dijit.css (from the dojo library)
- dojo.css
- dojoTheme.css
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:
- ....../base/core.css
- ....../defaultTheme/defaultTheme.css
- ....../base/dojo.css
- ....../defaultTheme/dojoTheme.css
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
- Change logo.gif to logo.png and remove width and height attributes. Use the new Logo graphics that are in PNG 8 format for proper IE 6 support.
- Add lotusUtility class to the links that contain the name, login, help links <ul class="lotusInlinelist lotusUtility">
- Switch the order of the lotusLinks and lotusUtility links (the utility links should come first).
Updates to title bar component
- Replace your search control with the new custom search control.
- Remove the h2 tag from your titlebar unless you are using a title instead of tabs. You can't have both in the titlebar at the same time, and you can't just set the h2 tag to display:none, because some edge cases cause funky display issues.
- Tabs (both in the titlebar and the regular tab component) now have an extra div in each individual tab to allow for really long tab text. It is not absolutely necessary to add this extra div if you can guarantee that your text will never be too long for graphics used on the tabs. But even then, it provides more styling options for customers who need to rebrand. So it is recommended that you add this.
Updates to sections
There have been a few changes to sections. For more details see the section component.
- Section header twisties have been made accessible.
- The help icon is replaced by an action icon which should pop up an action menu with a help menu item. [CAVEAT: if help will be your only action menu item for the section, you can keep the help icon, but please look at the new code for the action icon and implement the accessibility for the help icon the same way.]
- The rest of the section content is wrapped in a section body for proper alignment of content (<div class="lotusSectionBody"></div> )
- Add lotusActions class to the same div that contains the lotusInlinelist class on the "View as" links, to make the non-link text smaller. You can remove the lotusAction class from the links themselves, but this is not necessary.
<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
- The large icon name has changed (see above item)
- The logo was separated from the background. You need to add the following div to your page: <div class="lotusLoginLogo"></div> as the first div inside the lotusLoginContent div. See login page for code.
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
- The image itself points to blank.gif
- The title text on the wrapper div helps screen reader users understand what the button is and gives the visual user a tooltip. That's where you can be more verbose.
- If using an image button (input type="image") the wrapper for the button is a span tag. If using an img tag, the wrapper for the img is a link tag.
- The wrapper link tag contains both the lotusBtnImg class and the particular class for that button (which selects the appropriate image). For the search UI, there was already the lotusSearchButton class on the input tag. So that remained there.
- Most of the CSS for these buttons is defined in the buttons component CSS (the styles for the magnifying image on the search button is in the search component). Overrides can be put in individual components that use these buttons.
- a span with the class of lotusAltText is placed inside the outer span after the image tag to define the text that shows up when images are turned off and in high contrast mode.