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="http://skin.calameo.com/2.0">
    ...
</root>

Please note the value of the xmlns attribute: https://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 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" />

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>

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.

Download the complete example

<?xml version="1.0"?>
<root xmlns="http://skin.calameo.com/2.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.

For security reasons, Calaméo cannot access files on other websites. In order to load your CSML file and your skin elements, you have to grant Calaméo access to it.

The Access-Control-Allow-Origin header

You need to enable CORS (Cross-Origin Resource Sharing) for your custom skin XML and graphic resources files.

For more information on how to enable CORS, simply follow the steps detailed here: https://enable-cors.org/

The crossdomain.xml file

To authorize Calaméo to load elements on your website, you must place a crossdomain.xml file containing the following text at the root of your domain:

<!DOCTYPE cross-domain-policy SYSTEM "https://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <site-control permitted-cross-domain-policies="all"/>
    <allow-access-from domain="*.calameo.com" />
</cross-domain-policy>

Ex. : If your website is https://www.example.com, place the crossdomain file here https://www.example.com/crossdomain.xml

You can also download the crossdomain.xml file to be placed on your server by clicking here (right click, save as "crossdomain.xml").

This page will tell you how to create Calaméo skins with an image file, using any image editing software (e.g. Adobe Photoshop, the Gimp...).

Accepted formats are: PNG (recommended), JPG and GIF.

A media canvas is one image file on which all of the desired button states or other graphical elements are found. Knowing their positions in the media canvas, you will be able to select them with the Calaméo Skins syntax. Here is a simple canvas example:

How to use it

The CSML code to extract an image is very simple:

<button action="zoom"
    upState="mycanvas#0,0,35,35"
    overState="mycanvas#0,35,35,35"
    disabledState="mycanvas#0,70,35,35">
</button>

Let's have a look at overState="mycanvas#0,0,35,35": mycanvas refers to our media canvas file previously loaded by means of a media tag

The four coordinates are:

• abscissa (x-coordinate): distance between the left side of the canvas and your button
• ordinate (y-coordinate): distance between the top side of the canvas and your button
• width of the button
• height of the button

The CSML language provides many different attributes for positioning.

From the center

From the top

From the bottom

From the left

From the right

Absolute positionning

Scope

These attributes apply to the following statement:

• viewer
• layout
• element
• logo

The CSML language provides many different attributes to define the width and height of an element.

Width

Height

Scope

These attributes apply to the following statement:

• viewer
• layout
• element
• logo

The CSML language provides an easy access to manage element depth.

Depth management

Scope

These attributes apply to the following statement:

• viewer
• layout
• element
• logo

The CSML language provides an easy access to define elements' background.

Scope

These attributes apply to the following statement:

• viewer
• layout
• element
• logo

The tooltip attributes allows you to customize the tooltip behavior.

Modes

Defining a custom tooltip text

To define a tooltip text for an element, simply put it in a CDATA section, between the opening and closing statements.

This allows you to easily translate the viewer tooltips into your own language, if it is not already available on Calaméo.

Example:

<button action="search" upState="myotherskin#btnSearchOn">
      <![CDATA[Look for something? Click here]]>
</button>

You should consider using the UTF-8 character set.

Scope

These attributes apply to the following statement:

• button

The root element represents the viewer content area.

Attributes

The viewer element displays the interactive document itself.

Attributes

The layout element is used to create containers.

Attributes

Children

A layout can contain any of the following elements:

• button
• element
• logo
• slider
• spacer
• pageNumber

A layout must contain at least one child element.

A button is used inside a layout to trigger an action when the user clicks on it.

Attributes

A button element must be placed inside a layout element.

If a state is missing, upState is used instead.

Submenus

You can build submenus by adding other buttons as children elements and by using the submenu action.

The following additional attributes are then available:

This element is used to display any content from a media or library.

Attributes

You can display some basic HTML inside an element by adding a child CDATA node to it:

<element>
	 <![CDATA[Insert HTML code here]]>
</element>

The logo element allows you to customize the position of the logo graphic resource specified in the publication properties.

Attributes

The slider element displays a slider component to change the current page, volume or zoom level.

Attributes

The slider element can contain a button element which will define the draggable slider icon.

The spacer element allows you to add empty spaces between two layout children.

Attributes

A spacer element must be placed inside a layout element.

The pageNumber element may be used for displaying which page of the document is currently being viewed as well as the total number of pages in the document.

The user may also jump to a different page by entering a new page number into the text field and pressing the Enter key.

Attributes

A pageNumber element must be placed inside a layout element.

You can access the Calaméo viewer built-in graphic resources by using the library _ (underscore):

<button action="..." upState="_#gfxButtonTwitterOff">

Before using pictures and 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.

Attributes

Example

<media name="lib" source="https://www.example.com/canvas.png" />

Using a media canvas

When using a media canvas, you are not accessing referenced assets like in Flash-based libraries. A media asset is extracted from a defined region of the canvas.

The format is lib#x,y,w,h with:

• x = distance between the left side of the canvas and your button
• y = distance between the top side of the canvas and your button
• w = width of the button
• h = height of the button

For instance:

<media name="lib" source="https://www.example.com/canvas.png" />
<button action="..." upState="lib#0,0,35,35" />

Let's have a look at:

upState="lib#30,30,60,50"

lib refers to our media file previously loaded by means of a media element.

• x = 30
• y = 30
• w = 60
• h = 50

The Calaméo Skin Markup Language (CSML) allows you to completely change the look and feel of all the viewer features using Calaméo Skin Styles (CSS). For example, you can modify the appearance of external links, customize the related publications pop-up and use your own cursor icon.

Make sure to check the "Common attributes" for the features you wish to change.

How to add a Calaméo Skin Stylesheet to your publication

There are currently 2 ways to add Calaméo Skin Styles (CSS) to your publications:

• via an URL parameter
• via a skin

Using an URL parameter

You can specify a styleurl parameter in the HTML embed code that links to your Calaméo Skin Stylesheet (using an absolute URL).

Example:

<iframe src="//v.calameo.com/?bkcode=0000000018a530f2597ee&styleurl=https://mydomain.com/calameo/styles.txt"></iframe>

Don't forget to place a crossdomain.xml file with the correct permissions at the root level of the domain used in your CSS URL.

Using a Calaméo skin

To include a Calaméo Skin Stylesheet in your Calaméo Skin, simply use the tag styles.

You can either place your styles in a CDATA inside the content of the tag like this:

<styles>
common.text.color=0xFF0000
common.text.size=14
</styles>

Or use an external Calaméo Skin Stylesheet specified in a source attribute like this:

<styles source="https://mydomain.com/calameo/styles.txt"></styles>

You can also combine both techniques like this:

<styles source="https://mydomain.com/calameo/styles.txt">
common.text.color=0xFF0000
common.text.size=14
</styles>

Don't forget to place a crossdomain.xml file with the correct permissions at the root level of the domain used in your CSS URL.

These styles define foundations for look and feel of the viewer.

Texts

All the texts in the viewer inherit from this formatting.

Context

These styles define context management configuration for the viewer.

Margins

Minimum screen size to automatically switch to mini mode when no mode is defined

Resize

Zoom

These styles define context management configuration for the viewer.

Margins

Resize

These styles define the look and feel of thumbnail, scroll and publication views in the viewer.

Thumbnails view

These styles define the look and feel of the thumbnails view.

Thumbnail page numbers

Thumbnail drop shadow

Thumbnail highlighter

Thumbnail buttons

Scroll view

These styles define the look and feel of the scroll view.

Drop shadow

Publication view

These styles define the publication (pageflip) view look and feel.

Pages

This parameter defines an icon to show when a page display error occurs.

These styles define the look and feel of all contextual tooltips in the viewer.

Common styles

All the tooltips inherit from these styles.

Background

Border

Drop shadow

Label

Formats the tooltip label.

Inherit from common.text

Transition

Use these styles to configure the tooltip transitions.

Showing the tooltip

Moving the tooltip

Actions

Action tooltips are shown when the user place the cursor over a button.

Inherit from tooltips.common

Background

Inherit from tooltips.common.background

Border

Inherit from tooltips.common.border

Drop shadow

Inherit from tooltips.common.shadow

Label

Formats the label.

Inherit from tooltips.common.text

Page previews

Page preview tooltips are shown when the user places the cursor over an internal link or a button that triggers an page action (see Button actions).

Inherit from tooltips.common

Background

Inherit from tooltips.common.background

Border

Inherit from tooltips.common.border

Drop shadow

Inherit from tooltips.common.shadow

Thumbnail

Formats the page preview thumbnails.

Links

Links tooltips are shown when the user places the cursor over an external link or a button that triggers a URL action (see Button actions).

Inherit from tooltips.common

Background //

Inherit from tooltips.common.background

Border

Inherit from tooltips.common.border

Drop shadow

Inherit from tooltips.common.shadow

Label

Formats the external link label.

Inherit from tooltips.common.text

URL

Formats the external link URL.

Inherit from tooltips.common.text

These styles apply to all the viewer input fields such as pageNumbers or the search query field.

Text format

Inherit from common.text

Border

Background

Disabled format

Inherit from common.text

Placeholder format

Inherit from common.text

Styles that define the cursor's behavior.

Defines the mouse drag-and-drop scrolling.

Clicks

Mousewheel

Inertia

Bounces

These styles define the look and feel of all scroll bars in the viewer.

Horizontal slider

Button

Vertical slider

Button

Loading slider for pages

These styles define the look and feel of all links in the publication, including external links, internal links, video and audio links.

Common links styles

All links inherit from these styles

Flash when the link is activated

Up states

Background

Border

Over state

Background

Border

Down state

Background

Border

External links

Up state

Inherit from links.common.up

Background

Border

Over state

Inherit from links.common.over

Background

Border

Down state

Inherit from links.common.down

Background

Border

Internal links

Up state

Inherit from links.common.up

Background

Border

Over state

Inherit from links.common.over

Background

Border

Down state

Inherit from links.common.down

Background

Border

Focus links (Zoom Zone)

Focus opening

Focus closing

Focus background

Up state

Inherit from links.common.up

Background

Border

Over state

Inherit from links.common.over

Background

Border

Down state

Inherit from links.common.down

Background

Border

Publication overlay

Drop shadow

Media link

Audio link

Off state

Video links

Video thumbnail

Transitions

Play button

Up state

Inherit from links.common.up

Background

Border

Over state

Inherit from links.common.over

Background

Border

Down state

Inherit from links.common.down

Background

Border

Shopping links

Play button

Styles that define audio related behaviors.

These styles define the look and feel of the embedded audio player.

Timecode

Inherit from popups.text

Buttons

Play

Pause

Volume

Sliders

Playback

Playback slider button

Volume

Volume slider button

These styles define the look and feel of the embedded video player

Timecode

Inherit from common.text

Background

Transitions

Showing the video player controls

Hiding the video player controls

Fullscreen mode

Background

Notification displayed when the video cannot be loaded

Background

Message

Inherit from common.text

Buttons

Play

Pause

Volume

Fullscreen

Exit fullscreen

Sliders

Playback

Playback slider button

Volume

Volume slider button

These styles define the look and feel of popups, including table of contents, related publications and search.

Lightmode

Popup title format

Formats the popup title.

Inherit from common.text

Content text format

Formats the popup text content.

Inherit from common.text

Menu items

Item icon

Up text format

Formats the up state popup text content.

Inherit from popups.text

Over text format

Formats the over state popup text content.

Inherit from popups.text

Down text format

Formats the down state popup text content.

Inherit from popups.text

Disabled text format

Formats the disabled state popup text content.

Inherit from popups.text

Transitions

Showing the popup

Resizing the popup

Highlighting

Displayed to highlight the popup content element below the cursor. You can specify a resource from a loaded library. If no resource is specified, a rectangle of the element's size will be displayed.

Border

Background

Popup shadow

"No result" snippet

Label

Formats the text displayed by the "No result" snippet.

Inherit from popups.text

"Loading" snippet

Label

Inherit from popups.text

"Load more" snippet

Label

Inherit from popups.text

Close button

The popup close button is displayed when the popup is displayed in "light" mode.

Separator

Line that separates content elements in a popup.

These styles define the look and feel of the table of contents popup.

Items

Label text format

Inherit from popups.text

Page number text format

Inherit from popups.text

Level formats

The table of contents can display up to 6 nested levels of items.

Level 1

Label

Inherit from toc.label

Page number

Inherit from toc.pagenumber

Level 2

Label

Inherit from toc.label

Page number

Inherit from toc.pagenumber

Level 3

Label

Inherit from toc.label

Page number

Inherit from toc.pagenumber

Level 4

Label

Inherit from toc.label

Page number

Inherit from toc.pagenumber

Level 5

Label

Inherit from toc.label

Page number

Inherit from toc.pagenumber

Level 6

Label

Inherit from toc.label

Page number

Inherit from toc.pagenumber

These styles define the look and feel of the related publications popup.

Publication

Thumbnail

Formats the item thumbnails in the related publications popup.

Title

Inherit from popups.text

Description

Inherit from popups.text

These styles define the look and feel of the search popup

Result item

Thumbnail

Page number

Inherit from popups.text

Result snippet

Inherit from popups.text

Highlighting

These styles define the look and feel of the sharing popup.

Share option icons

Item label

Inherit from popups.text

Copy notification

When the user copies the publication's HTML embed code, a notification is displayed in the popup.

Label

Inherit from popups.text

These styles define the look and feel of lightboxes.

Transitions

Showing the lightbox

Border

Background

Lightbox shadow

Close button

The lightbox close button

You can group behaviors together so that they will be triggered simultaneously.

To group behaviors, simply use the + symbol.

Example:

<layout behaviors="fade+sound" ></layout>

Scope

• viewer
• layout
• button
• element
• spacer
• pageNumber

Custom behaviors allow you define the effects added to your publications.

Attributes

Example:

<behavior name="fxhover" fx="hover" tolerance="220" from="20" to="100" on="both" duration="500"/>

Useful resources to work with custom skins.