Creating custom skins

The slider offers you several main skins to choose from, and also a few skins just for the scrollbar. If you want to edit these skins, you can do so from within the Slider PRO -> Skin Editor page.

The CSS files are commented and the selectors are also suggestive, so it should be pretty easy to customize them. Also, you are being provided with the layered PSD (or PNG in some cases) files, so that you're able to modify the size and color of the graphic elements. These PSD files are in 'skins_src'.

If you need to do CSS edits, it's recommended to create your own custom skin instead of modifying the default skins. The skins can be managed from within the "Slider PRO -> Skin Editor" page. The easiest way to get started is by duplicating one of the existing skins and then modifying it.

To create an exact copy of a skin, click the 'Replicate Skin' button and insert some information for the new skin. This will create an exact copy of the original skin, but it will modify the header information and the class selectors according to the values provided by you. 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;

You will be able to select this custom skin when you create or edit a slider.

NOTE: The information of each skin, like name, path and URL, is stored in the database, which results in a better performance of the slider. However, because the information is stored in the database, sometimes it's necessary to 'refresh' that information - for example, if you move the slider installation to a different domain or if you manually create a skin using FTP. In order to refresh the information, all you need to do is click the 'Refresh All Skins' button from the 'Skin Editor' page.

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk