Creating a Custom Template

In the previous post we discussed what are Cyclone Slider templates. If you haven’t read it yet, check out Introduction to Templates.

Here is what our slider will look after this tutorial:

Screenshot of default2 template
Screenshot of default2 template

So to put it in perspective, our objectives are:

  1. Move the pager (those clickable dots) into the bottom and center them.
  2. Change the appearance of the previous and next buttons.
  3. Remove the images folders. We will be using pure CSS for the buttons and pager.

Let’s get started!

  1. First, copy the entire “default” folder template found in wp-content/plugins/cyclone-slider-2/templates/ and place it inside your currently active theme. In this tutorial we are going to use twentythirteen theme. So we create a cycloneslider folder inside the twentythirteen folder.
  2. Next we place the default folder inside the cycloneslider folder. Since we are going to create our own template, we need to give it a unique name. I will name mine “default2”. Your directory structure should now look like this:

    Folder structure: twentythirteen - cycloneslider - default2
    Folder structure: twentythirteen – cycloneslider – default2
  3. Open up style.css in default2/style.css.
  4. Change the line /*** Template Default ***/ with /*** Template Default2 ***/
  5. Change all instances of .cycloneslider-template-default with .cycloneslider-template-default2. You can easily do this by doing a search and replace operation with any decent text editor.
  6. Save style.css. Your css should look something like this:

    Portion of my CSS
    Portion of my CSS
  7. Now open up slider.php.
  8. Find class="cycloneslider cycloneslider-template-default" and change the cycloneslider-template-default part to cycloneslider-template-default2
  9. Save slider.php
  10. Next open up script.js and change .cycloneslider-template-default to .cycloneslider-template-default2
  11. Once your done save script.js. What we have done so far is renamed all instances of “default” to “default2” to reflect that this is a new template. If you view your slider now, it will still have the same appearance as the “default” template.
  12. Now let’s move the pager to the bottom. Open again your style.css.
  13. At the beginning of the styles, find:
        .cycloneslider-template-default2{
            position:relative;
        }
    

    add a margin bottom of about 30px. That should hold the space for our pager:

    .cycloneslider-template-default2{
            position:relative;
            margin-bottom: 30px;
        }
    
  14. Next replace this code
    .cycloneslider-template-default2 .cycloneslider-pager{
        position:absolute;
        z-index:200;
        top:20px;
        right:20px;
    }
    .cycloneslider-template-default2 .cycloneslider-pager span {
        background: url(images/sprite-nav.png) no-repeat scroll 0 0 transparent;
        display: block;
        float: left;
        font-size: 0;
        width: 10px;
        height: 10px;
        line-height: 0;
        margin-right: 6px;
        text-indent: -99999px;
    }
    .cycloneslider-template-default2 .cycloneslider-pager span.cycle-pager-active {
        background-position: left bottom;
    }

    with this one

    .cycloneslider-template-default2 .cycloneslider-pager{
        position:absolute;
        z-index:200;
        bottom:-22px;
        left:0;
        width: 100%;
        height: 12px;
        text-align: center;
    }
    .cycloneslider-template-default2 .cycloneslider-pager span {
        background: #333;
        display: inline-block;
        font-size: 0;
        width: 12px;
        height: 12px;
        line-height: 0;
        margin: 0 3px;
        text-indent: -99999px;
        border-radius: 6px;
        vertical-align: top;
    }
    .ie7 .cycloneslider-template-default2 .cycloneslider-pager span{
    	zoom: 1;/* IE 7 inline-block */
    	*display: inline;/* IE 7 inline-block */
    }
    .cycloneslider-template-default2 .cycloneslider-pager span.cycle-pager-active {
        background-color: #ccc;
    }

    What this does is to move the pager to the bottom and use pure CSS for the pager buttons instead of image.

  15. We are done with our first objective. Now we will change the prev and next buttons.
  16. On your style.css replace this:
    .cycloneslider-template-default2 .cycloneslider-prev,
    .cycloneslider-template-default2 .cycloneslider-next{
        display:none;
        position:absolute;
        top:50%;
        margin-top:-22px;
        z-index:102;
        width:26px;
        height:44px;
        text-indent:-99999px;
        background: url(images/sprite-arrows.png) no-repeat;
    }
    .cycloneslider-template-default2 .cycloneslider-prev{
        left:10px;
        background-position:0 0;
    }
    .cycloneslider-template-default2 .cycloneslider-next{
        right:10px;
        background-position:-29px 0;
    }

    with this:

    .cycloneslider-template-default2 .cycloneslider-prev,
    .cycloneslider-template-default2 .cycloneslider-next{
        position:absolute;
        top:50%;
        margin-top:-20px;
        z-index:102;
        width:24px;
        height:24px;
        background: #fefefe;
        opacity: 0;
        border-radius: 40px;
    }
    .cycloneslider-template-default2 .arrow{
        width: 0;
        height: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -6px;
    }
    .cycloneslider-template-default2 .cycloneslider-prev{
        left:10px;
    }
    .cycloneslider-template-default2 .cycloneslider-prev .arrow{
    	border-top: 6px solid transparent;
    	border-bottom: 6px solid transparent;
    	border-right: 6px solid #333;
        margin-left: -4px;
    }
    .cycloneslider-template-default2 .cycloneslider-next{
        right:10px;
    }
    .cycloneslider-template-default2 .cycloneslider-next .arrow{
    	border-top: 6px solid transparent;
    	border-bottom: 6px solid transparent;
    	border-left: 6px solid #333;
        margin-left: -2px;
    }
  17. Save style.css. Your slider should look like this:
    Our prev next buttons changed
    Our prev next buttons changed
  18. Oops. Looks like the prev next buttons are messed up with texts. To fix this, open slider.php.
  19. Replace this:
        <div class="cycloneslider-prev">Prev</div>
        <div class="cycloneslider-next">Next</div>

    with

        <div class="cycloneslider-prev">
            <div class="arrow"></div>
        </div>
        <div class="cycloneslider-next">
            <div class="arrow"></div>
        </div>
  20. Save slider.php. Your slideshow should look like this now:
    Prev next fixed
    Prev next fixed
  21. For some final touches, let’s lighten up the caption background. Replace this in style.css:
    .cycloneslider-template-default2 .cycloneslider-caption{
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        z-index:99;
        background: url(images/bg-caption.png);
        color:#fff;
    }

    with this:

    .cycloneslider-template-default2 .cycloneslider-caption{
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        z-index:99;
        background: #333;
        color:#fff;
        opacity: 0.7;
    }
  22. Finally delete the entire images folder in default2.

Congratulations! You now have your new template. Check out the default2 template in action.