Open

SlideDeck Skins in 3 Easy Steps

With the latest version of SlideDeck (both the JavaScript core and the WordPress plugin) you can now utilize skins! SlideDeck skins allow you to create a custom style for your the SlideDecks on your website utilizing plain old CSS. The SlideDeck WordPress plugin is distributed with some of the top skins from our Skin it to Win It contest and are a great way to customize your WordPress blog’s SlideDecks.

In addition to being built into the SlideDeck WordPress plugin you can also implement SlideDeck skins on your manually implemented SlideDecks in just a few easy steps:

1. Download a skin

Download the files for one of the skins from our contest winners from one of the links below:

2. Add the skin’s CSS file

Add the skin.css file included with the skin that you downloaded in step 1 to the <head> element on your web page.

<link rel="stylesheet" href="skin.css" type="text/css" media="screen">

Please note that the skin CSS files all require the images that come with the skin to be in the same folder as the CSS file by default. If you want to put the images in a separate folder, don’t forget to update the image paths in the skin’s CSS file!

3. Apply the skin’s CSS class to your SlideDeck’s container

As is demonstrated in the example.html file that comes with the skin and the SlideDeck for jQuery distributions, you will need to place your SlideDeck in a containing element. This can be any element you want, but we recommend just using a regular <div> element. You will need to apply a class to this container element that associates the contained SlideDeck with the skin you want it to use. This class is formatted based off of the name of the skin in a “slug” format: skin-skinslug. In the following example you will see how you might implement the Literally skin on a SlideDeck:

<div class="skin-literally">
    <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>

Notice the addition of the <div> element surrounding the <dl> element used by the SlideDeck. This <div> element has a class added to it named skin-literally, which will cause its containing SlideDeck to pickup all the Literally skin’s CSS definitions.

Rolling Your Own Skin

Interested in rolling your own skin for SlideDeck? Check out our 3 Steps to Rolling Your Own Skin guide.