Rainbow Portal Community

I have been a big fan of the CSS Zen garden kind of designs because of those reasons. With the default themes/layouts it is pretty easy to realize vertical menus but with the zen engine you have to dive into your desktoplayout and themes folder to accomplish this. This article explains the steps you have to take to achieve this. This will also show you a way to get rid of the very slow page rendering with larger menus in IE due to the IE7 script. The most important reason for using the IE7 scripts with Rainbow.Zen is to get the menu hovers to work. Unfortunately this slows down the page to sometimes unacceptable performance. Therefore I chose to look for a different menu that doesn't depend on IE7 scripts. This example is what we're going to use here. It's just 10 lines of javascript (only used by IE not FF), basic Zen unordered nested lists and CSS.

1. Decide what you want to do with your multiple hierarchies. In this example I'll have the root of the menu show horizontally at the top and have childs show up vertically and have child of childs etc show up on hover.
2. Select the zen-3cols-hmenu Page Layout with the zen-example1 theme.
3. Go to /Design/DesktopLayouts/zen-3cols-hmenu/DesktopDefault.ascx (make a backup first of course) and change the ZenNavigation node to this:
           <zen:ZenNavigation
               ID="PortalTopNav"
               ContainerCssClass="mainmenu"
               XsltFile="BindTopOnly"
               runat="server">
           </zen:ZenNavigation>
4. Then add the menu javascript (required for IE) and another ZenNavigation element inside the LeftColTemplate:
   <script type="text/javascript">
   startList = function() {
   
       // code for IE
       if(!document.body.currentStyle) return;
       var subs = document.getElementsByName('daddy');
       for(var i=0; i<subs.length; i++) {
           var li = subs[i].parentNode;
           if(li && li.lastChild.style) {
               li.onmouseover = function() {
                   this.lastChild.style.visibility = 'visible';
               }
               li.onmouseout = function() {
                   this.lastChild.style.visibility = 'hidden';
               }
           }
       }
   }
   window.onload=startList;
   </script>
   <zen:ZenNavigation
               ID="PortalChildNav"
               ContainerCssClass="leftmenu"
               XsltFile="BindRootChildren"
               runat="server">
           </zen:ZenNavigation>
5. Then still in the same file set the Layout's attribute ForceLeft to true.
   
6. The BindRootChildren.xslt that you can find in /app_support/ZenNavigation has a bug and needs some modification to add a name attribute to parent menu items. Here is the fixed XSLT: BindRootChildren.xslt
7. Go  to /Design/Themes/zen-example1/zen.css and add:
   @import url(leftmenu.css);
8. add the leftmenu.css to /Design/Themes/zen-example1
9. go to layout.css and change the overflow of div.zen-col-left to visible
10. Empty out the IE7Script setting in your /Rainbow.config:
        <add key="Ie7Script" value="" />
    This step is not included in the zip file!!! so apply it manually.
    

In my next article I'll explain a fast way to Rainbow-ify your existing (D)HTML design by using a subset of the standard Zen controls.

I thought I would try some of the free modules up on the rainbow site to see what they are like. I tried the Calendar module but soon discovered it was developed for Rainbow 1.1, didn't run on Rainbow 2006 and had major problems (it says beta, but should be alpha as it scrashes your page if you happen to place the module on a page that doesn't require you to be logged in).

What I did until now is update the code so that it would run on 1.6 like it was used to run on 1.1; no enhancements yet.

Here is a screenshot of the calendar running in Rainbow 2006:


Next actions are:

• show all public entries when not logged in
• update edit page to work with zen and current themes
• localize
• conform to Rainbow module standards
• make it look more pretty (like www.30boxes.com)
• add settings