plone.org front page like tabs user editable
Kupu Tabs enables end user editable plone.org like front page tabs in WYSIWYG editors.
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 (http://plone.org front 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
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.
Thanks to our fabulous sponsors.
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.