Skip to content

Lawtec

Sections
Personal tools
You are here: Home → Members → antonh's Home → SimpleBits minitabs for Plone (refactored)
Navigation
Log in


Forgot your password?
Licence
Creative Commons License

This work is licensed under a Creative Commons License.
Credits

Plone Powered

Icons by Gnome Project

Get Firefox!

 
Document Actions

SimpleBits minitabs for Plone (refactored)

by antonh — last modified 07-Sep-06 11:48 AM

Sick of the Plone Tabs? Like the look of these "minitabs":http://www.simplebits.com/bits/minitab_shapes.html ? Well then, read on for how you can implement these tabs in Plone...

If you look at the CSS for the minitabs, you'll see they are fairly similar to the .contentViews CSS which creates the content tabs (or alternatively, they are also similar to the global tabs). After swapping the #nav class definition with .contentViews, and a bit of trial and error, here is what I came up with:

I refactored the CSS code, starting from a realisation that Plone already does most of the CSS heavy lifting. All you need to do is get the image to appear at the bottom of the current tabs, and turn the borders off :)
/* Content view tabs */
.contentViews li a { 
        border: none;
	font-size: 10px;
	line-height: 20px;
	padding-bottom: 4px;
	color: #ddd;
}

.contentViews .selected a, .contentViews li a:hover {
	border-bottom: 1px solid &dtml-contentViewBorderColor;;
	background: url(tab_rounded.gif) no-repeat bottom center;
	color: &dtml-contentViewFontColor;;
	}

Note also that you'll need the tab_rounded.gif file from the SimpleBits site. You might also want to change the colour to the match your contentViewBorderColor setting, as I did.
 

This site conforms to the following standards: