Themes

IDS uses HTML template sets called "themes." This allows you and, optionally, your visitors, to change the look of your site on the fly. It is not difficult to create your own themes.

Each theme is contained in its own directory in the IDS "themes" directory. A theme directory has the following structure:

• [Theme Name]
  • images
    • image files used by this theme Ð background images, album icons, etc.
  • styles.css - cascading stylesheet
  • templates
    • album.html - album view
    • home.html - top level (albums and news)
    • image.html - image view (Shutterfly disabled)
    • imageSF.html - image view (Shutterfly enabled)
    • postcomment.html - used by postcomment.cgi
    • search.html - search results
    • viewcomments.html - used by commentviewer.cgi

Make a copy of one of the standard IDS theme directories to act as a template. Your work will be easier if you choose a theme that is similar in appearance to the theme you are creating. The name of the directory will be used by IDS as the theme's name.

The template files are standard HTML files. The <!-- xxxxxxx -- > tags (HTML comments) and ||xxxxxxxx|| tags are replaced with content by IDS, so they should not be modified. For best results, I recommend editing them by hand, but you may be able to use a graphical HTML editor. (Template files should not be renamed.)

Use only relative URL's in your templates. Note that URL's should be relative to the CGI that uses them, not to the template file itself. For most of the templates, URL's should be relative to the IDS directory, for the templates "postcomment.html" and "viewcomments.html", they should be relative to the "postcomment" directory. This is especially important when you create links to your stylesheet or image tags. Look at the included templates for examples.

Your theme will look its best on most browsers if you avoid proprietary tags and stick with the guidelines proposed by the World Wide Web Consortium (W3C). XHTML 1.0 is W3C's recommendation for the latest version of HTML. Don't worry, free tools like HTML Tidy make it easy to adhere to the standard.

I appreciate it if your theme includes a link to the IDS website, but I don't require it.

Modify the contents of "styles.css" if necessary. It is wise to test to make sure that your theme still looks decent on browsers that don't support stylesheets.

The "images" directory can contain whatever image files you want. Let me know if you would like a custom IDS logo graphic that matches your theme's colorscheme. If your theme design includes a custom album icon, note the following:

• IDS looks in the theme's "images" directory for an image called "albumbackground.png" to use as the background image for custom album icons.
• IDS looks in the theme's "images" directory for an image called "albumicon.png" to use as the generic album icon.
• If it does not find these images, it falls back to the similarly named images in the "site-images" directory.
• Your "albumbackground" and "albumicon" images must be in PNG format. Furthermore, they must use 8-bit or lower color depth (256 colors or fewer) and be 75 x 100 pixels in size. You may use transparency if you wish.
• IDS composites an image over the "albumbackground" image to make a custom album icon. I suggest using one of the provided images as a template- the position and dimensions of the composite area are clear.

If you create a new theme, please send it to me so that I can include it with the next version of IDS. I'm also willing to help create your theme if you have a good idea but no time to implement it.