Adding jquery.ui and themeroller to plone 4 for easy theme customization.
Project description
Introduction
zettwerk.ui integrates jquery.ui and its themeroller into Plone 4. Themeroller is a tool to dynamically customize the jquery.ui css classes. For details about jquery.ui theming and themeroller see http://jqueryui.com/themeroller/.
See it in action: http://www.youtube.com/watch?v=p4_jU-5HUYA
Use-Cases
With this add-on it is very easy to adapt the look and color scheme of your plone site. Based on the new sunburst Theme, introduced in Plone 4 (it has a nice and clean look). You do not have to create a new skin product, if you just want to change some colors suitable to your CI or for building a quick prototype/mock up.
In addition you will get some of the cool jquery.ui widgets (for example the dialog) integrated in Plone.
Also check out zettwerk.fullcalender for integration of a jquery calender add-on into Plone 4 - which will also use the themeroller customizations.
Skins vs Themes
zettwerk.ui is designed to be independet of any particular skin and it is not a skin itself. Once installed, the resources are available for every skin. So it is possible to use zettwerk.ui on top of a custom skin. The only dependencies are the css selectors, which are used to apply the jquery.ui classes. For example: using zettwerk.ui with the classic theme in Plone 4 works, but looks rather bad.
Installation
Add zettwerk.ui to your buildout eggs. After running buildout and starting the instance, you can install Zettwerk UI Themer via portal_quickinstaller to your plone instance. zettwerk.ui requires Plone 4 (tested with beta 4).
Usage
After installation, jquery.ui themes can be applied to some selectable elements of plone. In the plone controlpanel you will find a new extension product listed “Zettwerk UI” which allows you to customize these theme settings. Use the themes tab to create new themes via themeroller or apply one of the example themes from the themeroller galery.
Filesystem dependency
Created themes are downloaded to the servers filesystem. So a directory is needed, to store these files. At the moment, this is located always relative from your INSTANCE_HOME: ../../zettwerk.ui.downloads. In a common buildout environment, that is directly inside your buildout folder.
Deployment and reuse of themes
You can easily move the dowloaded themes from the download folder from one buildout instance to another. So to deploy a theme just copy the folder with the name of your theme from your develop server to your live server. It should be immediatelly available (without restart) - but only if the download folder was already created.
Changelog
0.30 (2011-02-16)
added Spanish translation [macagua]
changed control panel gui and usage of download handling
added translatable strings for control panel javascripts
changed some imports (for Plone 4.1 compatibility)
pep8 cleanups
updated jquery.ui to 1.8.9
0.28 (2011-01-11)
Back to old version numbering schema - to make buildout updates work.
0.2.7 (2011-01-11)
Fixed version numbering
replaced $ with jq to fix gui for authenticated IE users
0.26 (2010-12-15)
updated jquery.ui to 1.8.7 (reinstall via quick-installer required)
changed ui base resource integration to avoid required reinstalls for the upcoming ui updates
0.25 (2010-11-23)
made enableTabs work with <dl class=”enableFormTabbing”> based tabs
0.24 (2010-11-16)
added support for disabled radio- and checkboxes
updated jquery.ui to 1.8.6
tuned edit-bar styling
0.23 (2010-10-21)
removed little extra margin for global tabs
made ui css work for @import stylesheets
0.22 (2010-10-13)
made portlet’s font size smaller
made edit of existing themes work after reinstall or uninstall-install
made edit of existing themes work for themes added via filesystem
0.21 (2010-10-13)
removed console.log call
0.20 (2010-10-10)
customization of existing themes (just give it the same name when downloading)
added new option to enable global font styling
added checkbox styling
added radiobox styling
cleaned up overall forms styling
added forms styling to dialog content
fixed dialog styling
cleaned up navigation-portlet styling
merged enableButtons into enableForms
tuned livesearch result styling
updated jquery-ui to 1.8.5 (reinstall via quick-installer required)
made uninstall remove the controlpanel icon
updated translations
tested with plone 4.0.1
0.14 (2010-09-19)
removed annoying flickering of personal-tools when hovering
0.13
updated jquery-ui to 1.8.4
0.12
fixed css rules suitable for plone 4.0b4
0.11
fixed css rules suitable for plone 4.0b3
added #edit-bar styling
added simple livesearch styling
0.1
First working version
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
