Quick introduction to skin development

Welcome to a quick introduction to the world of skin development.

This tutorial will teach you how to make changes to an existing jAlbum skin, but you will also learn how to:

install and use a sample skin in the jAlbum application
understand the basics of a jAlbum skin
open the jAlbum skin editor in the jAlbum application
edit a skin with HTML and Cascading Style Sheets (CSS)

At this point you don't need to have any 'coding' knowledge to follow the tutorial. However, if you wish to go further then you will need to have such knowledge or be prepared to learn the basics of several languages.

Install the sample skin

Installing the "SampleOne" skin in the jAlbum application

To get started you will need to install the, very simple, sample skin (called "SampleOne") necessary for this tutorial. Click this link to download the skin and choose to open the file (do not choose to "Save on computer"). This will launch the jAlbum application on your computer. jAlbum will notify you that it will install the skin.

Try it out

Album built with the "SampleOne" skin

Create a new project by dragging a couple of files to the big empty area of the jAlbum application. Select the "SampleOne" skin in the skin picker and then click "Make jAlbum" to create an album. If you preview your newly made album you should get something like this:

Launch the jAlbum Skin editor

Launching the jAlbum Skin editor from the "Tools" menu

Now it is time to see what's under the hood. The files in a skin are editable text files formatted with HTML and CSS. The main files are called index.htt and slide.htt. These are template files for the index and slide pages of an album.

To open up the template files for editing make sure that the "SampleOne" skin is slected in the jAlbum application skin picker, then from the menu select "Tools", "Skin developer" and "Edit skin". This will open up the jAlbum skin editor with the files index.htt and slide.htt ready to be edited.

Note, in other skins more files may be opened, generally all text files in the skin's root folder e.g. .inc, .css, .htt, .js, .properties and so on. For more complex skins some files will not be opened in the editor.

Add a personal album title

Adding a personal title to index pages

First, lets do something basic like adding a personal title to your album. Start with selecting the tab showing index.htt.

Next, find the <body> tag and insert the following text:

<h1>My wonderful wedding album</h1>

This will add a heading to the index page of your album. To save your changes,from the menu select "File" and "Save".

You can make jAlbum pick up the album title that has been entered in the album settings window by typing ${albumTitle} instead of "My wonderful wedding". ${albumTitle} is an example of a jAlbum skin variable. You will learn more about jAlbum skin variables when you create your first skin.

Add some color to your album

Changing background color of index pages

Now it is time to make the album a bit more colorful with the help of CSS. You will add a nice shade of green to both your index and slide pages. Again let's start with selecting the index.htt tab.

Find the <head> tag and on the line below it insert the following text:

<style>
body {
    background:#99ff99;
}
</style>

Save your changes again ("File" and "Save" from the menu). Then select the slide.htt tab and repeat the process above (and don't forget to save when you're done).

Try it out!

Album built with the customized skin

Close the edit skin windows. You should still have your project ready. Click "Make album" and then preview your new album to see what it looks like!

Exploring the entire skin anatomy

Open the skin directory from the "Tools" menu

As you have learned by now a skin consists of HTML like template files, but there is more to a skin. To see all the image files and style files you may open the skin's enclosing folder.

To do this, select "Tools", "Open directories" and "Open skin directory" from the menu. Feel free to explore this directory and edit the files as you see fit.

For a full summary of all the files a skin consists of see the skin organization page.

Done! What's next?

You are all set with your new creation. Now that you know the basics you can either return to the [skins section of the Developer Center] to expand your knowledge even further, or you can choose to learn how to create your very own skin.