Create a Calaméo skin - Calaméo Knowledge Base
Not a Calaméo member yet?
Sign up now! It's FREE!
Get the latest news on Calaméo
Follow us on Facebook
Get Calaméo updates in real-time
Follow us on Twitter

Create a Calaméo skin

From Calaméo Knowledge Base

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

Contents

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"?>

The first element of your custom skin must be a root tag:

<?xml version="1.0"?>
<root xmlns="http://skin.calameo.com/2.0">
    ...
</root>
Please note the value of the xmlns attribute: http://skin.calameo.com/2.0.

Loading a library

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.

For instance, you can import a Flash-based SWF library like this:

<library name="swfLib" source="http://www.example.com/library.swf" />

To import a media-based canvas, you can do:

<media name="mediaLib" source="http://www.example.com/library.png" />

Place the document container

The viewer statement define how much space is allowed to the actual publication inside the screen.

This line displays the viewer, with its margins from the sides of the screen:

<viewer left="50" right="50" top="70" bottom="100" />
This element is required.

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 horizontalCenter="0" top="10" alignment="center">
    ....
</layout>
The layout element contains one or more content elements.

See layout 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 horizontalCenter="0" top="10" alignment="center">

    <button action="previousPage" upState="swfLib#btnPreviousPage" />
    <button action="nextPage" upState="swfLib#btnNextPage" />

</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 "swfLib" 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 "mediaLib" for our zoom button.

<layout horizontalCenter="0" top="10" alignment="center">

    <button action="previousPage" upState="swfLib#btnPreviousPage" />
    <button action="nextPage" upState="swfLib#btnNextPage" />
    <button action="fullscreen" upState="mediaLib#85,32,35,35" />

</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 horizontalCenter="0" top="10" alignment="center">

    <button action="previousPage" upState="swfLib#btnPreviousPage" />
    <button action="nextPage" upState="swfLib#btnNextPage" />
    <button action="fullscreen" upState="mediaLib#85,32,35,35" />
    <button action="submenu" upState="swfLib#btnSubMenu">

        <button action="book" upState="swfLib#btnBookOn" />
        <button action="slide" upState="swfLib#btnSlideOn" />

    </button>

</layout>

This last block displays a vertical submenu

The complete skin

Congratulations! You'ave just created your first Calaméo Skin.

Download the complete example

<?xml version="1.0"?> 
<root xmlns="http://skin.calameo.com/2.0">

	<library name="swfLib" source="http://www.example.com/library.swf" />

	<media name="mediaLib" source="http://www.example.com/library.png" />

	<viewer left="10" right="10" top="60" bottom="10" />

	<layout horizontalCenter="0" top="10" alignment="center">

            <button action="previousPage" upState="swfLib#btnPreviousPage" />
            <button action="nextPage" upState="swfLib#btnNextPage" />
            <button action="fullscreen" upState="mediaLib#85,32,35,35" />
            <button action="submenu" upState="swfLib#btnSubMenu">

                <button action="book" upState="swfLib#btnBookOn" />
                <button action="slide" upState="swfLib#btnSlideOn" />

            </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.