Creating custom skins

Some of the visual aspects of the slider can be customized only by editing the slider's CSS. However, if you need to do CSS edits, it's recommended to create your own custom skin instead of modifying one of the default skins. You can duplicate one of the existing skins and then add your edits to the custom skin.

Let's try to create a custom skin by copying the 'pixel' skin and modifying a few elements. The new skin will be called 'my-custom-skin'. I'm going to start by creating a copy of the 'pixel' directory and naming the directory 'my-custom-skin'. Inside the 'my-custom-skin' folder, I'll change the name of the CSS file to 'my-custom-skin.css' and then open the file. What we'll first need to change inside the my-custom-skin.css file is the header information and the selectors.

As you can see in the example below, in the skin's header I changed the 'Skin Name' to 'My Custom Skin' and the 'Class' to 'my-custom-skin'. I also changed the selector from '.pixel' to '.my-custom-skin'. The selector needs to match the value of the 'Class'.

At this point, the two skins will apply the same styling, so let's start making some modifications. For example, let's change the border color to red and the background color to black.

    Skin Name: My Custom Skin
    Class: my-custom-skin
    Description: Custom skin for Advanced Slider jQuery plugin
    Author: David
.my-custom-skin .slide-wrapper {
    background-color: #000;
    border: 8px solid #FFF;
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;

After adding the new skin, you can include it in the page and then set the 'skin' property to the name of the new skin, 'my-custom-skin'.

<link rel="stylesheet" type="text/css" href="css/advanced-slider-base.css" />
<link rel="stylesheet" type="text/css" href="css/my-custom-skin/my-custom-skin.css" />


Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk