Plone dynamic rounded tabs

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;
}