Creating a Skin

A good way to start creating your own custom skin is to have a look at the default skin in the Evo Slider package and see how it's done.

CSS Files and Structure

The 'default.css' is structured, there are labels to help you find the section you need to modify. The file is divided in 7 sections:

1. SLIDER: this section is one of the most importants, it defines the main structure of the slider.
2. TOGGLE ICON: this part contains all stylings for the toggle icon of the accordion mode.
3. DIRECTION NAVIGATION: this part contains all stylings for the directional/arrows control.
4. CONTROL NAVIGATION: this part contains all stylings for the control navigation (bullets, thumbnails, and rotator list).
5. PLAY/PAUSE BUTTON: this part contains all stylings for the play/pause button.
6. CONTENT: this part contains all stylings for the media container (images, videos, and embed object).
7. TEXT DESCRIPTION: this part contains all stylings for the inner and outer text description.

Creating a skin

To create a new skin instead of modifying the default one, follow these steps:

1. Locate the default skins folder that came with your download, it's named 'default' and is located inside the css folder. Duplicate the folder and rename the copy, giving it whatever name you wish, for the purpose of this tutorial name it 'newSkin'.
2. Inside the newSkin folder, locate the 'default.css' file, rename it 'newSkin.css'.
3. Open the 'newSkin.css' file. Replace every class prefix '.default' with '.newSkin'. So for example the selector for the Evo Slider should be changed from
   
   

   .evoslider.default {
                           

   to
   
   

   .evoslider.newSkin {
                           

   Once you've changed every selector save the file.
4. Edit the newly created CSS files to style your new skin.