mediaZEN - Web Album CSS Skin Development Kit

Introduction

This is the mediaZEN web album CSS skin development kit. It contains the necessary documentation and a skeleton skin which you can customize by editing some CSS and JavaScript files and by adding additional image files. These are the only allowed changes, in particular you may not alter the HTML code in any way.

The documentation directory

A web album has two different views:

• The index view displays the thumbnails of all items in the web album.
• The detail view displays the large view of a single item, and optionally additional thumbnails, like on the index page (depending on the publisher’s settings). There are also a variety of navigational elements for navigating through items, adding comments, starting slide shows etc.

The HTML code generated by the web album rendering system presents the album contents in a rich logical structure expressed with div and span elements with lots of id and class attributes, according to modern web design conventions which encourage strict separation of structure and appearance. Your task as skin designer is to write CSS rules for these ids and classes to achieve the visual effect you want. The documentation directory contains the following files which visualize and help you understand these div / span / class / id relationships:

• documentation/mz_index.html An index page of a web album
• documentation/mz_image.html A detail page of an item
• documentation/mz_image_with_index.html A detail page of an item, including the optional thumbnail index

The resources Directory

This directory contains the files which make up the skin and which you have to change to create your skin design. You are free to add or overwrite these files, but you should not delete any of them because they are always loaded and deleting them will cause browser warning messages.

/resources/images/

If you plan to use images for the navigational elements in your design, you should replace these images. If you do not want image navigation links, do not delete these files and instead add an .img_link {display:none;} rule to your CSS file to hide them.

If you use additional images (for example background-images in your css rules) place them in this directory. Refer to them with the notation url(../images/filename.xxx) (note the relative path).

/resources/css/

This directory contains the css files

• common.css is included in both views of a web album
• detail.css is only included in the detail view
• index.css is only included in the index view

detail.css and index.css are always included after common.css so you can override commonly used attributes in the specific css.

/resources/js/

This directory contains the main.js file. It is included in both the detail and index views. The following functions are called automatically by the system. These hooks provide an opportunity for you to use scripting for additional effects in your skin. If you don’t use them, do not simply delete the functions, supply an empty function body instead to prevent browser error messages.

• flab_detail_onload() is the default onload function of the detail view.
• flab_index_onload() is the default onload function of the index view.

You can freely add additional javascript code.

Testing Your Skin

You can use the following three files to test your skin:

• mz_index.html An index page of a webalbum
• mz_image.html A detail view of an item
• mz_image_with_index.html A detail view of an item, including the optional picture index