If you've loaded your custom brand into Zen 5, chances are your toolbar and a few other icons disappeared.

This is because Zen 5 includes a major performance enhancement which replaces almost 50 icon loads with a single "sprite" image.

Custom CSS Changes

If you added custom CSS files to your brand, the following changes may affect you:

  1. The #zen-footer element is now outside the #wrapper element. So if your custom CSS contains any selectors qualified with #wrapper #zen-footer, remove the #wrapper selector, leaving only the #zen-footer.

Automatic Icons Upgrade

Upgrading your Zen 4.0 brand to be compatible with Zen 5.0 is simple: You need to move a subset of files from your brand's images folder to a new one named icons (renaming a couple in the process).

This is a bit tedious, so we're written a script to do it automatically for you. Here's how to do it.

  1. Download this script: convert_brand_to_zen5.sh (Unix)
  2. From a terminal shell, go into your brands top-level directory (where the brand.properties file lives)
  3. Run the script:

    .../convert_brand_to_zen5.sh
    

And that's it.

If you're using Subversion to keep track of your brand, here's handy script to update svn for the changes (you'll have to commit the changes separately): update_svn_for_Zen5.sh

We'll post a Windows version soon...

Manual Icons Upgrade

The following images need to be relocated.

  1. Create a new folder in your brand named icons (at the same level as your images folder)

  2. Move these files from images into icons:

    • add-page-hover.gif
    • add-page.gif
    • check-hover.gif
    • check.gif
    • content-hover.gif
    • content.gif
    • edit-pencil-hover.gif
    • edit-pencil.gif
    • edit-title-hover.gif
    • edit-title.gif
    • expando-hover.gif
    • expando-reverse-hover.gif
    • expando-reverse.gif
    • expando.gif
    • gear-hover.gif
    • gear.gif
    • left-arrow-hover.gif
    • left-arrow.gif
    • master-hover.gif
    • master.gif
    • no-access-hover.gif
    • no-access.gif
    • non-master-hover.gif
    • non-master.gif
    • page-hover.gif
    • page.gif
    • pencil-outline.gif
    • pencil.gif
    • people-hover.gif
    • people.gif
    • right-arrow-hover.gif
    • right-arrow.gif
    • section-hover.png
    • section.png
    • share-hover.gif
    • share.gif
    • star-hover.gif
    • star.gif
    • toolbar-hide.png
    • toolbar-show.png
    • trash-hover.gif
    • trash.gif
    • watch-hover.gif
    • watch.gif
    • wizard-cancel.gif

  3. Move these files from images into icons, and rename them:

    From

    To

    Note

    toolbar-hide-on.png

    toolbar-hide-hover.png

     

    toolbar-show-on.png

    toolbar-show-hover.png

     

    wizard-cancel_hover.gif

    wizard-cancel-hover.gif

    The underline becomes a dash



  4. Delete the following two files from images (they're obsolete):

    • cancel.gif
    • cancel-hover.gif