Portal Tabs

Portal Tabs

/********************************************************************/







/* portal tabs */







#portal-globalnav { /* this is the container for the tabs themselves */



margin:0px 0em 0em;



padding:18px 16em 0px; /* gets the top lofted up above buttons for */



                       /* gradiant to show */



text-align:center;  /* centers the tabs */



background-color: #CAE4F1; /* setting the background area behind the */



                           /* tabs as light blue */



}











/* tabs at rest , but not selected */



#portal-globalnav li a {



background-color: white; /* white button */



color: black; /* with black text */



font-weight:bold; /* bold text */



font-size:140%;  /* make text a it larger to stand out more */



text-transform:capitalize;  /* give text title case for effect */



border-top:3px solid #0588BC; /* to put shadow like effect behind */



                              /* top of tabs */



border-right:2px solid black; /* to put shadow like effect behind */



                              /* right side of tabs */



}







/* tab hover over with mouse */



#portal-globalnav li a:hover {



text-transform:capitalize;/* give text title case for effect */



background-color: #FFFF66;  /* light yellow appears behind text */



                            /* when hovering over tab */



border-top:3px solid #0588BC; /* to put shadow like effect behind */



                              /* top of tabs */



border-right:2px solid black; /* to put shadow like effect behind */



                              /* right side of tabs */



}







/* tab selected after a click */



#portal-globalnav li.selected a {



background-color: #00578A;  /* dark blue , so it matches left */



                            /* column and other areas */



border-bottom:0px solid #0588BC; /* zero it to get rid of the line */



                                 /*  under the selected tab */



color: white; /* text is white */



text-transform:capitalize; /* text in title case */



border-top:3px solid #0588BC; /* to put shadow like effect behind */



                              /* top of tabs  */



border-right:2px solid black; /* to put shadow like effect behind */



                              /* right side of tabs  */



}







/* end of tabs */







/********************************************************************/

The following is what the tabs should look like:

You should see following changes:

• Tabs are centered
• There is a light blue colored bar behind the tabs, spanning across the whole screen. It is set to extend above the tabs themselves, to give an attractive visual affect.
• The selected tab is in the site's dark blue color, fusing with the personaltools and breadcrumbs, and the text is white.
• A tab at rest is white with black text.
• A tab you hover over lights up in a yellow color.
• The text size and tabs have been larger to give more emphasis.

Final word on tabs

That is all we are going to do with tabs in this lesson. They now should look just like our design sketch.

If you need to add hyper-links or other non-standard things to one of the tabs, or if you do not want the tabs just to automatically be assigned the value of the published folders and smart folders in the home folder, then you will have to experiment with two things. I only mention them here, as they are more advanced and outside the scope of this lesson:

• In Plone, site setup,  navigation settings, there is a box that is checked on by default, allowing tabs to be automatically generated. If you un-check this you will then have total control of the tabs, meaning that you will have to manually set them up.
• To manually set up the tabs, go to the ZMI, Portal_Actions. You can look at how the other tabs are configured. Note that this are of the ZMI controls more than just the tabs.