Nivo Slider Review by Günter Schenk

In this review Günter Schenk will investigate the quality and usage of the DMXzone Nivo Slider from DMXzone. He will show you how to create a Nivo Slider driven slideshow in less than 5 minutes.

Customizing the default appearance of a slideshow

Once a slideshow has been inserted, you certainly may want to customize its default look.

Remember the "skins" I mentioned earlier ? Each one of them is driven by two CSS files which have different "responsibilities", and to help you understand which one of them needs to be worked on to accomplish a specific task, I´d first like to explain how this extension will spread its "skins" across the file system of your local site.

1. when inserting the very first slideshow into a document, the DMXZone Nivo Slider extension will create a "Styles" folder which sits in the root directory of your local Dreamweaver site. This folder will contain the CSS file  "nivo-slider.css" and another subdirectory named "nivoSlider", which in turn contains a subdirectory that´s named after the skin you picked out for your slideshow:



2. what happens when applying a different skin to your current slideshow ? If this skin has not yet been applied to another slideshow, a corresponding subdirectory will be created inside the "nivoSlider" folder as well – and as you´ll assumingly be trying out various skins in the course of time, this is what the "nivoSlider" folder might contain:

3. what´s to be found inside each "skin" folder ? Let´s have a look at what "cold" supplies:

Are you willing to subscribe to my statement that each "skin" folder will contain the same components "skinname.css" and a variety of image files which are meant to be used as navigation controls or even more ? I´m glad you are, because I´m right ! ;-)

And now it´s time to provide a rough idea about the purpose of "nivo-slider.css" and, say, "basic.css", which are both accessible from with Dreamweaver:

As mentioned earlier, both files will define how your slideshow looks like, however it´s important to be aware of the following distinction:

nivo-slider.css : is by default meant to let you specify some "global" settings which will be affecting all slideshows of your current Dreamweaver Site and which will basically affect those slideshow components (slices and boxes in the slider, caption styles, control navigation styles etc.) which "add something" to the displayed images.

basic.css :: without going into the details here, let´s just say that each skin-specific CSS file is meant to affect the way how the images themselves are displayed. Effects such as adding CSS-based rounded corners, using a certain image to create a background shadow or having some backward/forward navigation controls appear as image overlay are meant to be added/modified in this kind of file.