Skins

Skins are a combination of Javascript Options, CSS and an SVG/PNG sprite. To use a skin the only option required is the skin option. Options of the selected skin are then applied as a starting point. Additional options will overwrite what's defined on the skin:

skin: 'fresco', ui: 'inside'

It is highly recommended to place all custom Javascript and CSS in separate files included below the Fresco files. This will allow upgrading without losing any custom skins. Here's an example:

<script type='text/javascript' src='/js/fresco/fresco.js'></script>
<link rel="stylesheet" type="text/css" href="/css/fresco/fresco.css"/>

<script type='text/javascript' src='/js/fresco/fresco-custom-skins.js'></script>
<link rel="stylesheet" type="text/css" href="/css/fresco/fresco-custom-skins.css"/>

<script type='text/javascript'>
  // make a custom skin the new default (pro only)
  Fresco.setDefaultSkin('custom');
</script>

Creating skins

A custom skin requires Javascript, CSS and sprite images. Let's start with the Javascript.

Javascript

Newly created skins will inherit their options from a base skin defined in Fresco.skins. Because of this inheritance the only Options that have to be defined are those different from the base skin. A custom skin is created by extending the Fresco.Skins object, here's how it could be defined:

$.extend(Fresco.Skins, {
  'custom' : {
    ui: 'inside'
  }
});

After the skin has been created it can be applied using the skin option:

<a href="image.jpg" class="fresco" data-fresco-options="skin: 'custom'">Custom skin</a>

When using groups the best way to apply the skin is using the data-fresco-group-options:

<a href="image1.jpg"
    class="fresco"
    data-fresco-group="example"
    data-fresco-group-options="skin: 'custom'">Same</a>
<a href="image2.jpg"
    class="fresco"
    data-fresco-group="example">Skin</a>

CSS

Once the Javascript for a skin is in place a skin will need CSS and sprites for styling. To help with styling Fresco adds the name of the skin to certain classnames:

.fr-window-skin-SKINNAME
.fr-overlay-skin-SKINNAME
.fr-spinner-skin-SKINNAME

It is recommended to copy the fresco skin defined in fresco.css as a starting point for new skins. To do this copy all the definitions of the fresco skin into to a separate css file.

This means all definitions starting with .fr-window-fresco, .fr-overlay-fresco and .fr-spinner-fresco. Rename those to match your new skin. For example, if your skin is named custom the CSS rules would start with:

.fr-window-skin-custom
.fr-overlay-skin-custom
.fr-spinner-skin-custom

Changing the default skin Pro only

To avoid having to set the skin option all the time the default skin can be changed using Fresco.setDefaultSkin(). It should be called after the file that defines custom skins, for example:

<script type='text/javascript' src='/js/fresco/fresco.js'></script>
<link rel="stylesheet" type="text/css" href="/css/fresco/fresco.css"/>

<script type='text/javascript' src='/js/fresco/fresco-custom-skins.js'></script>
<link rel="stylesheet" type="text/css" href="/css/fresco/fresco-custom-skins.css"/>

<script type='text/javascript'>
  // make a custom skin the new default
  Fresco.setDefaultSkin('custom');
</script>