Border on the pictures/thumbs

Hi,

I would be happy to help.
To disable the border from the Basic Thumbnail display type, please use this custom CSS rule:

.ngg-gallery-thumbnail {
	border: none !important;
}

Hope this helps ??

Mihai

Hello Mihai

It’s not exactly this because a white band stays to the right and to the left. After some search, the good result for solve the issue is :

.ngg-gallery-thumbnail a {
margin: 0 !important;
}

Now, I search to remove the border on the picture which appears when I clicked on the thumbs

With the tool “Inspect”, I have this line:
<div id=”fancybox-content” style=”border-width: 10px; width: 788px; height: 526px;”>

If I modify directly the line by :
<div id=”fancybox-content” style=”border-width: 0; width: 100%; height: 100%;”>
I remove the border.

SO I tried to add this in Additional CSS:
#fancybox-content div {
border-width: 0px !important;
width: 100% !important;
height: 100% !important;
}

But without effect

I saw also this part in “Style” Part :
element.style {
border-width: 10px;
width: 788px;
height: 526px;
}

Thanks a lot for your help
Rgds
Frederic

• This reply was modified 6 years, 6 months ago by fredericsant.
• This reply was modified 6 years, 6 months ago by fredericsant.

Hi Frederic,

Can you please let me know where ( on which page ) are you using NextGen’s lightbox?
I see that you aren’t using a NextGen gallery on the homepage and the gallery thumbnails don’t trigger NGG’s lightbox.

Mihai

Hello Mihai

Only the homepage doesnt use NextGen’s lightbox.
All others use it.

For example:
https://fredericvoyage.fr/les-plongees/aux-philippines/malapascua/

ThankS
Rgds
Frederic

Hi Frederic,

I am not very sure if a total removing of the fancybox’ background would be possible since I see that the scripts are dynamically calculating the full-size image container size ( width and height ) having in mind the borders, so by removing the border, it’ll just replace it with a margin. Due to this, you can only search for a way that would make the entire container transparent or something like this.

Also, you may just switch to a different lightbox like Shutter that doesn’t have any borders from “Gallery -> Other Options -> LightBox Effects -> What effect would you like to use?”

Hope this helps,
Mihai

Hi Mihai

I tried but only one other have arrows but I have problem with the description on some pictures. I let with the border.

Thanks a lot for your help

Rgds
Frederic

Hi @fredericsant!

We just released a new update for NextGEN Gallery that has some changes in the default thumbnail gallery that will match the changes that you’re looking for by removing the border around the thumbnails. We also have a new default lightbox that will also be closer to what you’re looking for, rather than using fancybox.

Navigate to Dashboard > Updates (or Plugins tab) and run the latest update for NextGEN Gallery.

Navigate to your page where you have the gallery added, remove the gallery and re-insert the gallery and update the page (this should have the gallery adopt the new default settings).

The new lightbox can be set under Gallery > Other Options > Lightbox effects.

Please let us know if these changes work for you ??
-Becky

Hello Becky

Sorry for this late answer. I use the new version of ngg-gallery and reinsert the gallery

But the margin-top is too hight
I tried some modification but the priority stay:
.ngg-galleryoverview {
margin-top: 40px;
margin-bottom: 50px;
-webkit-transition: width 1s,height 1s,background-color 1s,-webkit-transform 1s;
transition: width 1s,height 1s,background-color 1s,transform 1s;
min-height: 100px;
}

Already tested on additionnal CSS without success:
ngg-galleryoverview {
margin-top: 5px;
}

ngg-galleryoverview {
margin-top: 5px !important;
}

Thanks a lot for your help
Frederic

Oups,

I just saw I forgot the .

.ngg-galleryoverview {
margin-top: 5px !important;
}

This is okay