This is a pre-production deployment of Warehouse, however changes made here WILL affect the production instance of PyPI.
Latest Version Dependencies status unknown Test status unknown Test coverage unknown
Project Description


Kupu Tabs enables end user editable like front page tabs in WYSIWYG editors.

This is a generic Javascript/CSS library and can be pluggd in to any WYSIWYG editor. Currently Kupu is supported.

Benefits and use cases

  • Where there is plenty of content on the page, but splitting it up is unsuitable and we do not want the user navigate away from the page
  • Suitable for content where the reading order is not critical
  • No page loads - better user experience
  • Fact pages ( front page)
  • Data sheets
  • Accessibility - if Javascript is not supported renders as a normal page
  • Printability - prints as a normal page


Install via buildout

eggs =
zcml =

Usage - Plone

Open any Kupu editable content.

Write a tab name and choose “Tab” as its style from Kupu style drop down.

All text after Tab until the next Tab section or the end will be placed inside a tab container. Tab’ed text will be placed inside a tab container.

You can choose which tab is open by default with Tab (open by default) style.

There is two example style files: kuputabs.css.dtml for any Plone theme (variable colors) and kuputabs2.css which is more generic one.

Usage - Generic HTML

Create a container DIV for your content. Usually this is #content or similar and already provided your CMS/blog/whatever.

Add class “kuputab-tab-definer” for <h2> elements you want to be tabs. Add class “kuputab-tab-definer-default” for the tab which is open by default.

Include kuputabs.js on your page. Include kuputabs-alternative.css stylesheet or create your own.


Under the hood

When the page is loaded in the view mode, Javascript parses all kuputabs-tab sections and builds a tab container from them. If Javascript is disabled the content will appear under normal Subheading styles.

There is an important distinction with two kind of CSS classes

  • kuputab-tab-definer is h2 element which marks the beginning of the tab
  • all content until the end of kuputab-tab-definer parent element or next kuputab-tab-definer goes to this tab
  • kuputab-tab-definer content is mutated to kuputab-tab-container which is placed at the bottom of kuputab-tab-definer container element

document.designMode attribute is used to determine whether the visitor views the page or is it under WYSIWYG editor.


Mikko Ohtamaa

Twinapex Research, Oulu, Finland - High quality Python hackers for hire


Thanks to our fabulous sponsors.

London School of Marketing.
Release History

Release History


This version

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

Download Files

Download Files

TODO: Brief introduction on what you do with files - including link to relevant help section.

File Name & Checksum SHA256 Checksum Help Version File Type Upload Date
collective.kuputabs-0.1.tar.gz (9.3 kB) Copy SHA256 Checksum SHA256 Source Nov 10, 2008

Supported By

WebFaction WebFaction Technical Writing Elastic Elastic Search Pingdom Pingdom Monitoring Dyn Dyn DNS Sentry Sentry Error Logging CloudAMQP CloudAMQP RabbitMQ Heroku Heroku PaaS Kabu Creative Kabu Creative UX & Design Fastly Fastly CDN DigiCert DigiCert EV Certificate Rackspace Rackspace Cloud Servers DreamHost DreamHost Log Hosting