Basics: Create a Calaméo skin using CSML

Creating a Calaméo skin is easy. Follow the steps below to create your very own viewer design.

Create a new CSML canvas
Set up the background
Load libraries & media
Place document container
Create some buttons
The complete skin

Create a new CSML canvas

First, create a new CSML document on your computer using your favorite text editor. Every CSML file starts with the following header:

<?xml version="1.0"?> 
<root
	xmlns="http://skin.calameo.com/1.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://skin.calameo.com/1.0 http://skin.calameo.com/1.0/skin.xsd">

and ends with:

</root>

Set up the background

To define a background color for your skin, you can add the backgroundColor attribute to the root statement, like this:

<root
	xmlns="http://skin.calameo.com/1.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://skin.calameo.com/1.0 http://skin.calameo.com/1.0/skin.xsd"
	backgroundColor="0x666666">

The color codes are based on the hexadecimal RGB color format (notice the "Ox" instead of "#"). To define a background image for your skin, add a symbol, media or source attribute to the root statement.
The optional left, top, right and bottom attributes allow you to set margins for the background color or image.

See the CSML Reference Guide for more information.

Load libraries and media

Before using picture and any other elements, you will need to tell Calaméo where to find them.
Skin elements can be loaded either from Flash SWF libraries or medias like PNG, JPEG and GIF files.

It is done with the following statements:

<library name="flashLib" source="http://www.mydomain.com/calameo/library.swf" />
<media name="bitmapLib" source="http://www.mydomain.com/calameo/library.png" />

The library statement is used to load an SWF file containing multiple graphic elements referenced by an unique ID. You can download the SWF file here.
The media statement is used to load a PNG, JPEG or GIF file, which can be a standalone image or a bitmap canvas. You can download the PNG file here.

See the design guidelines for more information.

Place the document container

The viewer statement define how much space is allowed to the actual publication inside the screen. This statement is required.
This line displays the viewer, with its margins from the sides of the screen:

<viewer left="50" right="50" top="70" bottom="100"></viewer>

See the CSML Reference Guide for more information.

Create some buttons

Add a layout container

First, we need to create a layout container. A CSML file can have as many layout container as you need.

<layout left="170" top="8" right="8" alignment="right" spacer="20" orientation="horizontal"></layout>

the layout element contains one or more buttons. It has the following attributes:

a position defined here as margins in pixels from the left, top and right sides of the viewer,
an alignment for the buttons within the allowed space,
a spacer in pixels, which is the space between the buttons,
and an orientation for button distribution. Here we chose to distribute the buttons horizontally.

See the CSML Reference guide for more information.

Add navigation buttons

We are now ready to add some buttons to our layout container. Let's add some navigation buttons! Insert this inside your layout statement.

<layout left="170" top="8" right="8" alignment="right" orientation="horizontal" spacer="20">
	<button action="previousPage" upState="flashLib#btnPreviousPage"></button>
	<button action="nextPage" upState="flashLib#btnNextPage"></button>
</layout>

These buttons are very simple ones. They have an action, (it display the Table of Contents), and a default state named upState.

The upState attribute references an element within the "flashLib" library, by its unique ID.

Creating a bitmap based button

In some cases, it is much easier to create a bitmap picture (either JPEG, PNG or GIF) containing all the graphic elements for your skin. One you've loaded it using the media statement, you can crop a region and use it for button states for example. Let's use the previously loaded bitmap canvas named "bitmapLib" for our zoom button.

<layout left="170" top="8" right="8" alignment="right" orientation="horizontal" spacer="20">
	<button action="previousPage" upState="flashLib#btnPreviousPage"></button>
	<button action="nextPage" upState="flashLib#btnNextPage"></button>
	<button action="zoom" upState="bitmapLib#85,32,35,35"></button>
</layout>

To define a region to crop, you need to specify a set of coordinates, in this order: y, x, height, width (separated by commas).

Add a submenu

Calaméo Skin Markup Language (CSML) allows you to create buttons submenu using a very simple syntax.

<layout left="170" top="8" right="8" alignment="right" orientation="horizontal" spacer="20">
	<button action="previousPage" upState="flashLib#btnPreviousPage"></button>
	<button action="nextPage" upState="flashLib#btnNextPage"></button>
	<button action="zoom" upState="bitmapLib#85,32,35,35"></button>
	<button action="verticalSubmenu" upState="flashLib#btnSubMenu" spacer="5">
		<button action="book" upState="flashLib#btnBookOn" ></button>
		<button action="diaporama" upState="flashLib#btnSlideOn"></button>
	</button>
</layout>

This last block displays a vertical submenu

The complete skin

Congratulations! You'ave just created your first Calaméo Skin. You can download the complete example right here!

<?xml version="1.0"?> 
<root
	xmlns="http://skin.calameo.com/1.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://skin.calameo.com/1.0 http://skin.calameo.com/1.0/skin.xsd"
	backgroundColor="0x666666">

	<library name="flashLib" source="http://www.mydomain.com/calameo/library.swf" />
	<media name="bitmapLib" source="http://www.mydomain.com/calameo/library.png" />
	<viewer left="50" right="50" top="70" bottom="100"></viewer>
	<layout left="170" top="8" right="8" alignment="right" orientation="horizontal" spacer="20">
        <button action="previousPage" upState="flashLib#btnPreviousPage"></button>
        <button action="nextPage" upState="flashLib#btnNextPage"></button>
        <button action="zoom" upState="bitmapLib#85,32,35,35"></button>
        <button action="verticalSubmenu" upState="flashLib#btnSubMenu" spacer="5">
            <button action="book" upState="flashLib#btnBookOn" ></button>
            <button action="diaporama" upState="flashLib#btnSlideOn"></button>
        </button>
	</layout>

</root>

Try and adapt it to your own use, tweak it to see the effect, and if you want more, consult the CSML reference guide for all the available attributes and elements.