Theme Class

In the Nivo Slider General Settings, when I add the Theme class name, for example "light", I cannot see the any changes. This is as well in case I add "dark".
In the head I cannot see the link to the light.css.
Can you please advise?
Thank you.

Hi SERMAR,

When you add the "light" to the "theme class name" option in the administration for a given slider, this class is added to the slider. This is used for adding custom styling for a slider, not custom css files. The file is one and is located in the following location: Plugins/SevenSpikes.Nop.Plugins.AnywhereSliders/Themes/{Your_nopCommerce_Theme_Name}/Content/nivo/nivo.css file. In it you can add the custom styles. The style below can be an example of how to use the "theme class" option.

.theme-light .nivoSlider
{
.....
}

As you can see the word "light" which was added in the "Theme class name" textbox is added after a "theme-" prefix. This is done to avoid possible problems with duplicate class names.

Hope that helps!

Thank you for your reply.

I did notice that the style for the slider is at Plugins/SevenSpikes.Nop.Plugins.AnywhereSliders/Themes/DefaultClean/Content/nivo/nivo.css

I have the following in the head:
<link href="/Plugins/SevenSpikes.Nop.Plugins.AnywhereSliders/Themes/DefaultClean/Content/nivo/nivo.css" rel="stylesheet" type="text/css" />

I notice that you also have the Plugins/SevenSpikes.Nop.Plugins.AnywhereSliders/Styles/nivo/light/light.css
that I presumed was the style sheet triggered by adding "light" to the "Theme class name" box.
If it is, how the light.css is added to the head?

In the nivo.css the .nivoSlider is set with the border-radius of 5px.
How can I set different slider styles for different websites (I use nop 3.10)?

Thanks.

Hi sermar,

If you take a look inside the light.css file you will notice that the styles are defined like this .theme-light.So you can use the same approach. You can map a slider to a store, so if you run 2 stores you can create two sliders Slider1 and Slider2. You can set the theme of Slider1 to be store1 and the theme for Slider2 to be store2. Then in the css file you can define the different stylings via these two classes. For example you can change this class definition that adds the border radius:

.nivoSlider {
  position:relative;
  background:#fff url(loading.gif) no-repeat 50% 50%;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
    border-radius: 5px !important;
    overflow: hidden !important;
}

to be like this:

.nivoSlider {
  position:relative;
  background:#fff url(loading.gif) no-repeat 50% 50%;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
    overflow: hidden !important;
}

.theme-store1 .nivoSlider {
  border-radius: 5px !important;
}

.theme-store2 .nivoSlider {
  border-radius: 3px !important;
}

I hope this makes sense!

Best Regards,
Nop-Templates.com Support Team