How can i resize nivoSlider

Hello everyone,

i would like to know how can i resize the nivoslider on default theme, i need to change the css and csthml or have some configuration.

devdecision wrote:

Hi,

You will have to edit width, height in css file.
Please update following file and set values in center-3

..\Presentation\Nop.Web\Themes\DefaultClean\Content\styles.css

.master-wrapper-main .center-3{float:left;width: 510px;min-height:400px;padding:10px;margin:10px;background:#FFF;display:inline;overflow:hidden;border-radius:5px;}

Please vote +1, If it helps you.

Thanks.
Ajay Saksena

Yes it's solve the problem.

Thanks!!

I tried this and it worked. I am glad as well!

ajaysaksena wrote:

This works, but it only re-sizes the slider indirectly. It also affects any other content in the center wrapper (column) like news, featured, and bestsellers on the homepage. If a user wants to use a 3 wrapper layout through out the whole site, a lot more will be affected.

The best way to handle this is to edit the width and height of the actual slider. Edit the nivo-slider.css located in Plugins/Widgets.NivoSlider/Content/nivoslider/. Just edit the width & height in the first section:

.nivoSlider {
  position:relative;
  width:100%;
  height:auto;
  overflow: hidden;
}

Hi,

Thanks for the tips guys I had this issue with nopCommerce 3.50 using the Nivo Slider.  I was able to resize the image thanks to the info this thread but the whole thing was shifted to the left and this was due to the slider div being 100%.

I did the following changes in the nivo-slider.css file (specific to my requirements):


/* modified this class to a fixed width and auto margins to centre the nivo images and slider */
.nivoSlider {
  position:relative;
  width:734px;
  height:auto;
  overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

/* modified the nivoSlider child img selector to be a fixed size to match my images */
.nivo-main-image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
    height: auto;
}


That was it worked well for me, hope this helps someone else.

T

tahirk555 wrote:

Tweaked it to work with a responsive layout:

.nivoSlider {
  position:relative;
    max-width: 734px;
  height:auto;
  overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
    max-width: 734px!important;
    max-height: 450px!important;
}

^^^ Set your max-width and height

This will allow you to use fixed size images but stay responsive (tested with nopCommerce 3.50).

T

I didn't see it specifically mentioned in any of the previous posts, so thought I'll add my solution on here as well.

Ideally I didn't want to change an "base" files for nopCommerce, for fear of future updates overwriting my changes. To this end, I created my own template, using the DefaultClean theme as a base.
Wanting to also change the size of the Nivo Slider, I applied tahirk555's solution, but rather than making the change directly in the nivo-slider.css file, I added the styles to the end of my styles.css file in the template. These overwite the default Nivo Slider styles, allowing me to get the size I want without modifying the default styles.

Update for version 4.20: Add this to the end of style.css in your theme:

.nivoSlider  {
    max-height: 250px;  /*custom height*/
}