zettwerk.ui

by Jörg Kubaile — last modified Mar 17, 2012 06:36 AM

Adding jquery.ui's themeroller to plone 4 for easy theme customization.

Project Description

Introduction

zettwerk.ui integrates jquery.ui's themeroller into Plone 4.1. 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

Usage

With this add-on it is very easy to adapt the look and color scheme of your plone site. After installation, there is a new extension product listed in the plone controlpanel which is called "Zettwerk UI Themer". Use the themes tab to create new themes via themeroller or apply one of the example themes from the themeroller gallery. Note that themeroller is only working in firefox, but the existing themes can be used with all browsers.

Feel free to contact us for feedback.

Technical background and pre 1.0 versions

For versions below 1.0 zettwerk.ui made heavy use of javascript to manipulate the dom and css of the generated output page. This was ok for prototyping but probably not for production. Especially slower browsers shows some kind of flickering, till all manipulations were applied. With version 1.0, the complete concept to do most of the manipulation changed to xsl-transforms, applied via diazo / plone.app.theming. This results in a much better user experience. On the other hand, zettwerk.ui acts now as a skin (while the former one was none).

Installation

Add zettwerk.ui to your buildout eggs:

eggs = ..
       zettwerk.ui

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.1 cause it depends on plone.app.theming. If you want to use zettwerk.ui in Plone 4.0 you can also use version 0.40, which is the last one, (officially) supporting Plone 4.0.x.

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

1.0.3 (2012-03-17)

  • Pinned plone.app.theming to avoid zmi styling
  • Fully removed "not-zmi" styling rules

1.0.2 (2012-03-12)

  • Fixed related Items and categorisation (#4)

1.0.1 (2011-10-21)

  • Fixed manage portlet links (#3)
  • Fixed setuphandler execution

1.0 (2011-06-23)

  • re-added radio box styling
  • tuned rules.xml to not style zmi pages
  • Add french translation [toutpt]
  • Updated spanish translation [macagua]

1.0rc1 (2011-06-12)

  • Major rewrite to apply manipulations via plone.app.theming/diazo
  • removed "settings" panel.

0.40 (2011-05-28)

  • removed own jquery.ui integration and use collective.js.jqueryui (reinstall via quickinstall required!)
  • collective.js.jqueryui's sunburst theme integrated with special resource handling
  • re-added validation of theme name characters
  • made the font size of the default start theme a little smaller
  • udpated pot file and german translations
  • sorting of theme names

0.34 (2011-05-17)

  • IE7 Fix for global tabs

0.33 (2011-05-06)

  • do not show the "enable cookie" status message, it it is not visible

0.32 (2011-04-30)

  • Show Uninstall in Title of profile to not confuse plone-admins ;-) [jensens]
  • handle BadZipfile exceptions
  • updated jquery.ui to 1.8.12

0.31 (2011-03-07)

  • added tests
  • added selenium tests
  • updated jquery.ui to 1.8.10
  • tested on plone 4.0.x and 4.1.x

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

Self-Certification

[X] Internationalized

[X] Unit tests

[X] End-user documentation

[X] Internal documentation (documentation, interfaces, etc.)

[X] Existed and maintained for at least 6 months

[X] Installs and uninstalls cleanly

[X] Code structure follows best practice

Current Release
zettwerk.ui 1.0.3

Released Mar 17, 2012 — tested with Plone 4.1

Pinned plone.app.theming
More about this release…

Download file Get zettwerk.ui for all platforms
zettwerk.ui-1.0.3.tar.gz
If you are using Plone 3.2 or higher, you probably want to install this product with buildout. See our tutorial on installing add-on products with buildout for more information.

All Releases

Version Released Description Compatibility Licenses Status
1.0rc1 Jun 14, 2011 More about this release… GPL release-candidate
1.0.3 Mar 17, 2012 Pinned plone.app.theming More about this release…
Plone 4.1
 GPL final
1.0.2 Mar 12, 2012 Fixed related items issue (#4) More about this release…
Plone 4.1
 GPL final
1.0.1 Oct 21, 2011 see changelog More about this release…
Plone 4.1
 GPL final
1.0 Jun 23, 2011 see changelog More about this release…
Plone 4.1
 GPL final
0.40 May 28, 2011 see changelog More about this release…
Plone 4
 GPL final
0.34 May 17, 2011 see changelog More about this release…
Plone 4
 GPL final
0.33 May 06, 2011 see changelog. More about this release…
Plone 4
 GPL final
0.32 Apr 30, 2011 see changelog More about this release…
Plone 4
 GPL final
0.31 Mar 07, 2011 see changelog. More about this release…
Plone 4
 GPL final
0.30 Feb 16, 2011 - 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 More about this release…
Plone 4
 GPL final
0.28 Jan 11, 2011 More about this release… GPL final
0.26 Dec 15, 2010 More about this release… GPL final
0.25 Nov 23, 2010 More about this release… GPL final
0.24 Nov 16, 2010 More about this release… GPL final
0.23 Oct 21, 2010 More about this release… GPL final
0.22 Oct 13, 2010 More about this release… GPL final
0.21 Oct 11, 2010 More about this release… GPL final
0.20 Oct 10, 2010 More about this release… GPL final
0.2.7 Jan 11, 2011 More about this release… GPL final
0.14 Sep 19, 2010 More about this release… GPL final

Comments (11)

Ida Ebkes Dec 18, 2010 03:22 PM
This product rocks totally AND doesn't cause any trouble, thanks a lot for that one :)
-ida
Tom Smith Mar 18, 2011 11:53 AM
This product totally breaks the maps in collective.geo
Jörg Kubaile Mar 22, 2011 09:11 AM
first: please use the issue tracker to report bugs! second: what means "totally brokes" - I just found one issue with the "coordinates" tab. Please be more precise! third: you can avoid this issue be disabling "activate tabs". The main problem is IMHO caused by collective.geo. I will add a ticket to their issue tracker for this.
Tom Smith Mar 22, 2011 10:12 AM
first: don't tell people what to do.
second: you are right, it probably is collective.geo that brokes it but I wasn't apportioning blame I was just quickly flagging it up.
third: good for you
fourth: whilst I'm here... the Actions / Manage document actions menus display a bit odd. Could you put them in the issue tracker too
Etienne Desgagn May 20, 2011 09:34 PM
Is it me or it seems that the product don't integrate very well with IE (at least ie8)... When navigating I saw the old sunburst theme flipping during 1 second before the appearance of the Jquery UI theme... In FF and Chrome it look great...
Jörg Kubaile May 21, 2011 05:40 AM
No, thats a general problem, probably caused by the slow js engine of IE. But it should be ok, if you run your instance as a service (not in foreground) when the plone's css and js debug modes are disabled.
Doug W Oct 24, 2011 12:11 AM
Just got it up and working with Plone 4.1
However I am running into an issue with the theme selection. When I go to download a theme it says changes successful. However I can look into the zettwerk.ui.download and it is empty. Are there some kind of permissions I am missing? I tried to download a theme from the jroller ui and scp it up. Extracted it and named it. I see the theme now inside the zettwerk control panel however when I hit save nothing seems to happen. Any Ideas?
Doug W Oct 25, 2011 12:49 AM
Never mind, looks like during the setup and creating of zettwerk.ui folders didn't get assigned the correct permissions. I corrected the user permission to be added to the plone user of zettwerk.ui restarted zope and voila all is well.
unset Nov 11, 2011 07:22 AM
Could you please describe your changes more exactly? I ran into the same problem. All Unix permissions seem ok to me as the unix user "plone" has rwx Permissions. Is there a "zettwerk.ui" user concept inside of plone?
Doug W Nov 12, 2011 03:11 AM
I believe what I changed was I changed the owner to plone group and plone user and that seemed to have worked. However now I am wondering if the themes will ever be accessible from the zope management console. The ui tool does not set everything and some options are only accessible from the actual css file. It would be great if this was accessible from the zope interface other using nano / vim to change the css is annoying.
unset Nov 15, 2011 10:35 PM
AARGH - after 1 day of trying and repeated reinstalling in all modes: The theme name must be all lowercase and alphabet charakters only!!