- This topic has 12 replies, 6 voices, and was last updated 11 years, 2 months ago by
.
-
Posts
-
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 150×150. The CSS is “Shadow Effect with Description text” Please can anyone tell me where I can change this? Thanks
1. Post a link to the page where you have it.
2. Which NextGen gallery integration are you using (method 1 or method 2)?
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=1209
I’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
Heather
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.
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
Heather
You can use negative numbers such as -20px this will subtract 20px from 0 closing the gap even more if you need to.
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 Heather
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,
Pascal
Hi,
Please send a link to the page and state exactly what you are trying to achieve and we can take a look.
Hi !
I would like to know if a solution was found for this issue.
I would like to change the eStore css file so when I use Nextgen to display only images I won’t have overlaping.
Any recomendations ?
My site is not live right now.
This is not really an issue. It is just a design preference which needs some CSS customization. If you post a link to your page, we will be able to give you some idea as to what CSS you can use. If you watch this video tutorial, you will most likely be able to do the customization yourself:
- You must be logged in to reply to this topic.