Custom Widgets

This is a tutorial for how to make a custom widget for your Smart Slider 2.

Arrows

Image Arrows

Step 1:

To make Image Arrows, you have to make two images first. On the first image make an arrow for “previous” and near him, on the same image make one for “previous hover”.
prev-arrow
On the second image you have to do the same for “next”, make one arrow, and an arrow for hovering that image.
next-arrow
Their position is important to be in the middle of their half, because it would be very hard to guess the position for them to look the same on hover.

Step 2:

Now you have to copy them into your plugins folder, the next arrow into the next folder, the previous arrow into the previous folder:
Joomla
\plugins\nextendsliderwidgetarrow\image\image\next\
\plugins\nextendsliderwidgetarrow\image\image\previous\
WordPress
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetarrow\image\image\next\
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetarrow\image\image\previous\

Lets name both of them custom-arrow.png

Step 3:

Now go one folder back, and open style.css:
Joomla
\plugins\nextendsliderwidgetarrow\image\image\style.css
WordPress
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetarrow\image\image\style.css

In my example my custom-arrow.png-s are 72 x 36 pixels, so my numbers in the css file will reflect them.
This is what you need to put into your style.css:

.nextend-image-next-custom-arrow{
    margin-top: -18px; /* 0 - half of height */
}
.nextend-image-next-custom-arrow{
    background-image: url('next/custom-arrow.png');
    width: 36px; /* half of width */
    height: 36px;
}
.nextend-image-next-custom-arrow:HOVER{
    background-image: url('next/custom-arrow.png');
    background-position: 36px 0; /* half of width, 0 */
}
.nextend-image-previous-custom-arrow{
    background-image: url('previous/custom-arrow.png');
    width: 36px; /* half of width */
    height: 36px;
}
.nextend-image-previous-custom-arrow:HOVER{
    background-image: url('previous/custom-arrow.png');
    background-position: 36px 0; /* half of width, 0 */
}

These css codes are for getting the position of your arrows and give them width and height. You can name your image to anything, but use the same name, as I used “custom-arrow” in every place. Now you can see it in your backend, so pick it and use it on your Slider.
arrows

Bullets

Transition Bullets

Step 1:

For transition bullets you have to copy one of the images from bullets folder, rename it and put it back. You can find this directory here:
Joomla
\plugins\nextendsliderwidgetbullet\transition\transition\bullets\
WordPress
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetbullet\transition\transition\bullets\

Let’s name it custom-bullet.png

Step 2:

Now go back one folder:
Joomla
\plugins\nextendsliderwidgetbullet\transition\transition\
WordPress
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetbullet\transition\transition\

open style.css, and put this code in, but make sure, that your files name is the same as what you are using here:

.nextend-bullet-container.nextend-bullet-transition-custom-transition .nextend-bullet{
    width: 22px;
    height: 22px;
     -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    border-radius: 99px;
    margin:0 10px;
}

The code between the curly braces is just an example, you can put any css code in it, and make your custom Transition Bullet. Don’t try to add those kind of css codes, which are available on the backends settings, because you won’t see them, your backend settings will override them. And that’s all, now you have your own custom Transition Bullet.
bullets

Autoplay

Step 1:

If you want to make a new Autoplay button, then you have to make an image with a play button on the top, and a pause button on the bottom.
cream

Step 2:

When you have it, put it in his folder:
Joomla
\plugins\nextendsliderwidgetautoplay\image\image\play\
WordPress
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetautoplay\image\image\play\

Let’s name it custom-autoplay.png

Step 3:

Go back one folder:
Joomla
\plugins\nextendsliderwidgetautoplay\image\image\
WordPress
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetautoplay\image\image\

In my example I use a 40 x 80 pixel image.

and open style.css, put this code in, and make sure, that your files name is the same, as the name you are

using here:

.nextend-autoplay-custom-autoplay {
    background-image: url('play/custom-autoplay.png');
    width: 40px;
    height: 40px; /* half of the image height */
    background-position: 0 40px; /* 0, half of the image height */
}
.nextend-autoplay-custom-autoplay.paused{
    background-position: 0 0;
}

Now you are good to go, your new Autoplay button should be on the backend.

Bar

Gradient Bar

Step 1:

To make a Gradient Bar you have to go to your gradient folder, copy an image, rename it and put it back. You can find your folder here:
Joomla
\plugins\nextendsliderwidgetbar\gradient\gradient\gradient\
WordPress
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetbar\gradient\gradient\gradient\

Let’s call it custom-bar.png

Step 2:

Now go back one folder:
Joomla
\plugins\nextendsliderwidgetbar\gradient\gradient\
WordPress
\wp-content\plugins\nextend-smart-slider2-full\plugins\nextendsliderwidgetbar\gradient\gradient\

and open style.less

Put this code before the last curly brace, and make sure, that you are using the same name in your code, what your file name is:

.nextend-bar.nextend-bar-custom-bar {
    background: #242424;
    /* IE10 Consumer Preview */
    background: -ms-linear-gradient(top, #23337c 0%, #a7d3ff 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top, #23337c 0%, #a7d3ff 100%);
    /* Opera */
    background: -o-linear-gradient(top, #23337c 0%, #a7d3ff 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #23337c), color-stop(1,
#654321));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top, #23337c 0%, #a7d3ff 100%);
    /* W3C Markup, IE10 Release Preview */
    background: linear-gradient(to bottom, #23337c 0%,  #a7d3ff 100%);
    box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.1) inset;
  }
  .nextend-bar.nextend-bar-custom-bar .inner {
    border: 1px solid #23337c;
    width: auto;
  }
  .nextend-element .nextend-bar.nextend-bar-custom-bar h6 {
    padding: 9px 5px 9px 10px;
  }
  .nextend-element .nextend-bar-custom-bar h6,
  .nextend-element .nextend-bar-custom-bar p {
    padding: 9px 5px;
    margin: 0;
    float: left;
    font-size: 12px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    color: white; /* You cannot see this on your frontend, because in the backend there is a font color picker option, which overrides this */
  }

Now you can customize this css code and you should be able to see and pick your custom Gradient Bar. You cannot add css codes, which are options on the backend, because it will override them.
bar