Support Help, Documentation & Customization

3 Steps to Rolling Your Own Skin

Got an idea for a skin that you want to use on your website or in the WordPress plugin? No problem! SlideDeck skins are all just standard CSS, so most anything is possible for customizing your SlideDeck to match your website’s design. There are four simple practices to follow for creating your own skin:

1. Create your files

Create a new CSS file for the skin that you want to make. It is a good idea to make a copy of the SlideDeck skin that comes distributed with the SlideDeck JavaScript library and use this as a base to start from. If you are using WordPress, you will also need to create a new folder in the “skins” sub-folder of the SlideDeck WordPress plugin. This folder should be named after your skin in a “slug” format – a single word that uses only letters, numbers and the underscore or hyphen characters. Make sure that the CSS file for your skin is calledskin.css or it will not be recognized by the WordPress plugin.

2. Give your skin a unique CSS class

To make sure that your skin works without interfering with other SlideDeck skins being used on a page, we recommend giving your skin a unique CSS class. You will just add this unique class to a <div> element that surrounds the DL element that is converted into a SlideDeck to identify your skin. When writing CSS styles for your new skin, make sure that you prefix all your skin style definitions with a class like “skin-my-custom-skin” (where “my-custom-skin” is the “slug” formatted name of your skin). For example, the dark skin that comes with the WordPress plugin for Smart SlideDecks has all of its styles prefixed with “.skin-dark”, while the Voyager skin has all of its styles prefixed with “.skin-voyager”, etc.

Example HTML:

<div class="skin-my-custom-skin">
    <dl class="slidedeck">
        <dt>Slide 1</dt>
        <dd>Slide Content</dd>
        <dt>Slide 2</dt>
        <dd>Slide Content</dd>
        <dt>Slide 3</dt>
        <dd>Slide Content</dd>
        <dt>Slide 4</dt>
        <dd>Slide Content</dd>
        <dt>Slide 5</dt>
        <dd>Slide Content</dd>
    </dl>
</div>

Example CSS:

.skin-my-custom-skin dl.slidedeck dd {
    /* My SlideDeck slide styles */
}
.skin-my-custom-skin dl.slidedeck dt {
    /* My SlideDeck spine styles */
}

3. Define your skin meta

Make sure that you describe the skin you have created and get attribution for the creation of this skin. Just place a comment block at the top of the skin’s skin.css file. Here is an example of what this comment might look like:

/*
Skin Name: SlideDeck WordPress Plugin Default
Skin URI: http://www.slidedeck.com/
Skin Type: flexible
Description: The default skin for the SlideDeck WordPress Plugin.
Version: 1.1
Author: digital-telepathy
Author URI: http://www.dtelepathy.com/
Contributors: dtelepathy, ricklee, kynatro
Tags: flexible, white, black, multi-color
*/

• Skin Name: The descriptive name of the skin. In the WordPress plugin, this is what will appear in the skin chooser.
• Skin URI: The URL for the skin. Most often this is the author’s URL.
• Skin Type: The type of the skin. This can be either “fixed”, “flexible”, or “dynamic”. “Dynamic” skins are only used by Smart SlideDecks in the WordPress plugin, whereas “fixed” and “flexible” skins will be available for use with regular SlideDecks. When specifying a skin as “fixed”, you are indicating that the skin only works with a fixed height. You can define the fixed height in pixels in another variable called “Skin Height”. For example, if your SlideDeck skin is meant to work at a height of 432 pixels, you would add another line with “Skin Height: 432″.
• Description: A short description of the SlideDeck skin.
• Version: The version of the skin. With the WordPress plugin this number is automatically appended to the CSS file’s name to help prevent old, cached versions from being loaded.
• Author: The author of the skin.
• Author URI: The author’s website.
• Contributors: The names/usernames of contributors to the creation of this skin.
• Tags: Tags to describe the skin.

Upload your skin for the world to see!

Created a skin for SlideDeck and want it featured with our other skins? Package everything up and submit it with the form below for us to review.