Description

File Structure

The Style

• /var/www/z/style/NAME_OF_STYLE/

Metadata and preview image

• /var/www/z/style/NAME_OF_STYLE/metadata.xhtml
• /var/www/z/style/NAME_OF_STYLE/preview.jpg

More information on Zaltana Style Metadata

Style Configuration

• /var/www/z/style/NAME_OF_STYLE/config.xml

This contains some of the variables which are passed in to the style and used for things like turning debug mode on and off.

XSL, CSS and JavaScript Files

• /var/www/z/style/NAME_OF_STYLE/xsl/*.xsl
• /var/www/z/style/NAME_OF_STYLE/css/*.css
• /var/www/z/style/NAME_OF_STYLE/scripts/*.js
• /var/www/z/style/NAME_OF_STYLE/scripts/*.jpg, .gif, .png etc...

Installing a Style

If you wish to make a style visible on the theme selection screen you will need to make sure it has

• metadata.xhtml
• preview.jpg
• style.xsl

Once your style has these files you can run the following command

/usr/share/adm/bin/install_style [style_directory_name]

DO NOT RUN THIS FOR CORE

after running install_style you will need to start and stop resolver.

/usr/sina/etc/init.d/40resolver stop
/usr/sina/etc/init.d/40resolver start

debug mode and file compression

/var/www/z/style/core/bin/compress.pl

this reads through a file (usually html.xsl) and looks for the following comments

<!-- START CONCATENATION /path/to/file -->
<!-- END CONCATENATION -->
<!-- START COMPRESS /path/to/file -->
<!-- END COMPRESS -->

This script extracts file paths from link or script tags between these comments and creates a single large file which may be compressed.

By convention all the compressed or concatonated file names should begin with "c_"

By default most styles have been written to load the individual files when debug mode is enabled. If debug mode is not enabled the compressed file will be loaded.

If everything is going well there will be no noticeable change between when debug mode is enabled. However there is at least one exception at this time. Due to the large number of widgets many styles can include upwards of 20 css files and an additional 20 js files in the html/head element. Older browsers like IE 6 seem unable to deal with loading so many files this way. If you exceed this arbitrary file include limit IE 6 will not load some of the later files to included in the html/head element. Enabling debug mode and loading compressed files reduces the total number of files included and makes this problem disappear.

Idiots guide to making a style

• Look for an existing style which has the closest layout to the one you want.
• Duplicate the directory and give it the name of your new style
• update the metadatfile with the new information
• update the preview.jpg image file
• do a find and replace on the XSL and CSS directories (script if necessary, but it's rare that a style will have it's own unique JavaScript)
• run the style installation script so your style appears on the style selection screen and can be used
• update the images and CSS to match your new design

If there are any significant layout changes it may be necessary to make local copies within the style of inherited XSL files and make any necessary change.

Example

Adam wants to make a new style called "new_style" which looks like "bolton" (although the example shows how to do this mostly on the command line you can use any technique you want).

cd /var/www/z/style/
cp -R bolton/ new_style/

NOTE - At this point it may be necessary to update the permissions on the copied directories e.g. chown -R sina:sina adam_style

The next steps can be doneIn your favourite text editor, or using the command line.

Do a find and replace on all of the CSS and XSL files changing "bolton/" to "new_style/"

Update the details in new_style/metadata.xhtml. The most important things to change is the title, description, dependancies author and d esigner.

Replace new_style/preview.jpg with an image of the current style. Typicaly this image is made by taking a roughly 1024*768px image of the finished style (or mock-up it's being built from and scaling it down and keeping the proportions to a width of 300px.

You are now ready to run the style installation script then start and stop resolver.

Go to the style selection screen (settings/appearance in mydesktop) and you should be able to see you "new_style".

Select "new_style" and go back to the desktop page.

Now that your style is showing up in the browser it should look exactly like the bolton style.

You are now ready to start updating the images and CSS to match the design for the new style.