Try this Michael:
.mg-image-showcase.tightness .mg-thumbs ul li div {
border-style: none !important;
border-width: 0 !important;
margin-right: 3px !important;
}
Hi Alan,
thanks for the prompt reply.
The margin works but the border line is still there.
At least I am putting the code in the right place.
I also need to move my Image tiles further apart, is this possible.
Regards
Michael
Michael,
I think this will work: in the image show case options you can assign a class to the thumbnail container: Thumbnail Custom Image Container Class. There you can enter a class name such as isc-thumb-class and update the gallery.
Then you can add code to your style sheet like this:
.mg-image-showcase.tightness .mg-thumbs ul li div.isc-thumb-class {
border-style: none !important;
border-width: 0 !important;
}
Yes you can try moving the image tiles father apart. Use margins or padding, whatever works best.
Alan
Hi Alan,
Thanks for the suggestion. I tried it but it doesn’t seem to be working for me.
On the image tiles do you mean setting up another class to do this? I am getting out of my depth here.
Regards
Michael
Did you add a class name to the ‘Thumbnail Custom Image Container Class’, on the Image Showcase options tab? If you did then I would be able to see it in the HTML. And then the CSS should work.
Alan
Hi Alan,
Yes I did add the class.
I removed it all when it didn’t work.
I have put it all back now so you should be able to se it.
Still not working.
Regards
Michael
Yes, the class works. You cannot see it until you add to .mg-image-showcase.tightness .mg-thumbs ul li div.isc-thumb-class these lines:
margin: 0 !important;
padding: 0 !important;
And you can see there are no borders. Now you can modify .mg-thumbs ul li div.isc-thumb-class the way you want.
Alan
Hi Alan,
I have added the code, the thumbnails are spaced as I want them and look perfect but the main picture still shows a border. So I must still be doing something wrong.
The code I added was this:
.mg-image-showcase.tightness .mg-thumbs ul li div.isc-thumb-class {
border-style: none !important;
border-width: 0 !important;
margin-right: 3px !important;
margin: 0 !important;
padding: 0 !important;
}
A link to the page showing how it looks at the moment http://develop.venbros.co.uk/oak-doors/
Regards,
Michael
Michael,
I use firebug to view the HTML and CSS in a page and if I click on the main image I can see that it is identified by
.mg-image-showcase.tightness .showcase-image
and not
.mg-image-showcase.tightness .mg-thumbs ul li div.isc-thumb-class
The CSS for thumbnails will never changed the main image. You have to add something like this:
.mg-image-showcase.tightness .showcase-image {
border-style: none !important;
border-width: 0 !important;
}
But if this loads before the skins style sheet it will be overridden. But you can add custom style sheet in the Advance tab of the gallery.
Alan
Hi Alan,
I can see it’s not going to work this way, and I can live with the borders on some of my site.
One last question, if I choose No border in the options can I then space the thumbnails using css. If so can you give me the code.
Thanks for being so patient
Regards
Michael
With no border try:
.mg-image-showcase.no-border .mg-thumbs ul li a div.isc-thumb-class {
border-style: none !important;
border-width: 0 !important;
margin-right: 3px !important;
margin: 0 !important;
padding: 0 !important;
}
Hi Alan,
Still no joy so I have decided to leave it as it is.
Thanks for your help
Michael
