Is there any way to center the nivo slider in the image gallery?

7/7/2012 2:27:47 PM

Andrew

Total Posts 59

View Posts

Is there any way to center the nivo slider in the image gallery?

Hi All,

Got it working and it looks great, but I'd like to have it center page. Any ideas?

Thanks,

Andrew

7/7/2012 2:37:20 PM

Andrew

Total Posts 59

View Posts

Re: Is there any way to center the nivo slider in the image gallery?

If I can't do this with the nivo style slider, maybe I can with silverlight? I've also noticed that all of the images display briefly with nivo slider and then they disappear after a second or so which doesn't look great.

Andrew

7/8/2012 12:48:16 PM

Joe Audette

Total Posts 18439

View Posts

Re: Is there any way to center the nivo slider in the image gallery?

Hi Andrew,

You should be able to center it, you may need to think in terms of centering a container div, just google for css centering to find lots of tutorials.

Best to optimize the images to the smallest possible file size for the quality and consider using fewer of them. You may also be able to google and find ways to hide all but one of the images with css until the slider starts like on this thread about a different slider.

Hope that helps,

Joe

7/14/2012 7:47:41 PM

Andrew

Total Posts 59

View Posts

Re: Is there any way to center the nivo slider in the image gallery?

Is there a way to find out what the div is called? I have seen examples but I can't see how to affect the image gallery control or the div that the control sits in? I created a new nivo.css file that added that to the skin folder, and then went in to an instance of the image gallery control to set the "Custom CSS Class" to nivo (it seemed to remember the css file, I assume this is the correct way of doing it).

I've been messing around with the css file (I've tried all sorts of examples) but I can't seem to affect the image gallery in any way.

Thanks,

Andrew

7/15/2012 12:43:35 PM

Joe Audette

Total Posts 18439

View Posts

Re: Is there any way to center the nivo slider in the image gallery?

Hi Andrew,

I guess you are working from the source code repository since we haven't released a version with Nivo in the image gallery yet.

I just experimented here and was able to center it like this:

div.gallerymodule { width: 100%; }
div.slider-wrapper { margin-left:auto; margin-right:auto; }

Hope that helps,

Joe

7/15/2012 1:41:37 PM

Andrew

Total Posts 59

View Posts

Re: Is there any way to center the nivo slider in the image gallery?

Hi Joe,

Thanks very much for looking in to this. Yes I'm working with the latest source code.

Do I need to turn on the Custom CSS Classes option? If I do I can't seem to find it anywhere. I updated my nivo.css file, which is set as the Custom CSS Class of the image gallery that I have on my homepage, with the content of your reply, but it doesn't seem to want to play ball.

div.gallerymodule { width: 100%; }
div.slider-wrapper { margin-left:auto; margin-right:auto; }

I'm using a skin called artisteer31-fullheader.

Thanks,

Andrew

7/16/2012 10:58:32 AM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: Is there any way to center the nivo slider in the image gallery?

Rather than putting your changes into nivo.css, I'd recommend you put your changes into a new CSS file, called for example "myoverrides.css". Add it to the bottom of the style.config file for your skin like this:

<file>myoverrides.css</file>

With your CSS file loading last, you'll be certain that those directives will take precedence over anything that was specified in a previous file.

Also, before you test CSS changes you should go to Administration > Advanced Tools > Design Tools > Cache Tool and click the "reset skin guid" button. That will trigger a reset so all browsers that visit your site will reload the CSS from scratch.

Jamie

7/19/2012 1:19:45 PM

Andrew

Total Posts 59

View Posts

Re: Is there any way to center the nivo slider in the image gallery?

Hi Jamie,

Nivo.css is a new file that I've created, maybe this is where I'm going wrong.

I'll give your suggestions a go.

Thanks

Andrew

7/19/2012 2:11:50 PM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: Is there any way to center the nivo slider in the image gallery?

Ah, my mistake. I thought maybe that was a delivered file. You should be good then, just be sure it's loading at the end of all of the other css files, reset your skin Guid, and you should be golden.

Jamie

8/19/2012 9:50:38 AM

Andrew

Total Posts 59

View Posts

Re: Is there any way to center the nivo slider in the image gallery?

Ok so I updated the style.config file to have the following right at the end (the first part for loading my nivo css file and the second to get the nivo slider feature in the image gallery to display the images correctly):

I then went in to the image gallery control and set the custom css file to be "nivo" and in the nivo.css file I have the following:

div.gallerymodule { width: 100%; }
div.slider-wrapper { margin-left:auto; margin-right:auto; }

It still doesn't want to center the images so I must still be missing something. They appear on the left.

:-S

8/19/2012 11:00:03 AM

Andrew

Total Posts 59

View Posts

Re: Is there any way to center the nivo slider in the image gallery?

Okay so I'm there, finally. A bit of trial and error got me there in the end. One of the main problems was due to browser caching, so I had to make some changes, clear my browser files down and restart the website to see the changes take affect.

1) As suggested, update the style.config file with your custom css file name like so..

2) Create your new css file with the following, and drop it in to skin folder.. same location as your style.config file (I found that 97% was perfect for me)..

div.gallerymodule { width: 97%; }
div.slider-wrapper { margin-left:auto; margin-right:auto; }

3) Clear your browser cache and start up your website.

These steps worked for me. Hopefully they will be of use to somebody else.