Skip to main content

Create a Calaméo skin

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

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="https://skin.calameo.com/3.0">
    ...
</root>
info

Please note the value of the xmlns attribute: https://skin.calameo.com/3.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 from media like PNG, JPEG and GIF files.

For example, to import a media-based canvas:

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

Place the document container​

The <viewer> statement defines how much space is allocated 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" />
info

This element is required.

Create some buttons​

Add a layout container​

First, we need to create a <layout> container. A CSML file can have as many <layout> containers as necessary.

<layout horizontalCenter="0" top="10" alignment="center">
    ....
</layout>
info

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. They have an action and a default state 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.

Once 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: x, y, width, height (separated by commas).

Add a submenu​

Calaméo Skin Markup Language (CSML) allows you to create submenu buttons 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've just created your first Calaméo Skin.

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

  <media name="mediaLib" source="https://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 to make more changes, continue reading for all the available attributes and elements.