Hi, I think this is somewhere in the style sheet? Basically I have a gap below my thumbnails which I want to reduce as the "add to cart" could mistaken for the photo below (instead of the right photo above!) It is about 3 lines.
I have set up wp-estore with nextgen gallery; I've used method 2 to set up a template; this has a variant box and an add to cart button. My photos are displayed in a gallery of 4 thumbnails across which I have configured in "Options" as 150x150. The CSS is "Shadow Effect with Description text" Please can anyone tell me where I can change this? Thanks
How can I reduce gap under thumbnails?
(13 posts) (6 voices)-
Posted 4 months ago #
-
1. Post a link to the page where you have it.
2. Which NextGen gallery integration are you using (method 1 or method 2)?Posted 4 months ago # -
Hi, sorry for late reply I need to check my settings for email alerts!
I'm using method 2; so I have one product configured on a template in wp eStore.
I've reloaded a temporary test gallery; they show a little better than they did with the current thumbs:
http://nicelyframed.co.uk/?page_id=1209I'd like to reduce the gap between the image thumb and the 'buy now' box if possible. If not no worries as hopefully most people will see the price in overall box is related to the image above and not get confused with the image below!
Appreciate any help
HeatherPosted 4 months ago # -
Hi Heather,
The gap appears to be produced by the NextGen Gallery.In the NextGen Gallery CSS file (ngg_shadow2.css) there is the following code which is responsible for the gap you are seeing:
.ngg-gallery-thumbnail img {
margin: -6px 6px 6px -6px;
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block;
padding:4px;
position:relative;
}
To shorten the gap you can modify the above code to the following:
.ngg-gallery-thumbnail img {
margin: -6px 6px -20px -6px;
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block;
padding:4px;
position:relative;
}
NOTE: I've changed the third parameter in the margin property from 6px to -20px.
I'm not sure if NextGen Gallery includes a custom CSS file (similar to eStore and eMember) but if so you can use that file to enter the above change otherwise take a backup of the original ngg_shadow2.css file and modify it.
Posted 4 months ago # -
Hi Peter
I changed it to 20px which made it bigger so now have it at 0;
.ngg-gallery-thumbnail img {
margin: -6px 6px 0px -6px;
This has reduced the gap from what looked like 3 lines of empty space to 2 lines - much better!Thanks for you help
HeatherPosted 4 months ago # -
You can use negative numbers such as -20px this will subtract 20px from 0 closing the gap even more if you need to.
Posted 4 months ago # -
Wow! Thanks Ivy; now it's perfect with -30 !!
Thank again, Heather
Posted 4 months ago # -
Sorry Peter I didn't read your post properly i.e. number as a negative
Learning curve for me to take care reading & moderating style sheets!!
Thanks HeatherPosted 4 months ago # -
No worries at all Heather. Glad your display issue was resolved :)
Posted 4 months ago # -
Hello there,
I have the same problem. Changing the margin helps a bit but it also changes the settings of thumnails shown in non-Estore galleries. I would like to have the product option right below the thumbnail. When changing that using the offset (-88) then the pictures in the normal gallery overlap massively.
Is there a way to seperate offset between eStored galleries and non eStored galleries?
Kind regards,
PascalPosted 3 months ago #
Reply »
You must log in to post.