dvize creative melbourne australia

commercial folio | community projects | contact dvize | about dvize | playground | useful

Plone Resources

This page contains Plone resources coded by dvize for the Plone Community, www.plone.org
These resources are free to use, edit and reproduce.

These tabs will resize dynamically, allowing different sized words. it is based on the CSS sliding doors technique

                     

Customise and then upload the 3 images below to your plone site. You can put them anywhere as you can refrence them in the style sheet.

            

Then add the following CSS to " ploneCustom.css". Don't forget to change the URL that references your images in the styles.

/* TABS */

ul#portal-globalnav li {
float: left;
margin: 0;
background-image: url(http://your-plone-site/nav-right.gif);
background-repeat: no-repeat;
background-position: right top;
margin-right: 6px;
padding-top: 4px;
height: 24px;
}

ul#portal-globalnav a {
background-image: url(http://your-plone-site/nav-left.gif);
background-position: 0px 0px;
background-repeat: no-repeat;
padding-right: 8px;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 18px;
margin: 0px;
font-weight: bold;
color: #FFFFFF;
border-color: none;
border-width: none;
border-style: none;
font-size: 13px;
}

#portal-globalnav li a:hover {
background-color: transparent;
border-color: none;
border-bottom-color: none;
color: #015f43;
}

#portal-globalnav li.selected a {
background-color: #DFEADF;
border: none;
border-bottom: none;
color: #015f43;
background-image: url(http://your-plone-site/nav-active.gif);
background-position: 0px 0px;
background-repeat: no-repeat;
padding-right: 8px;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 6px;
margin: 0px;
}