Tips and Tricks HQ Support

Support site for Tips and Tricks HQ premium products

  • Home
  • Contact Us
  • Documentation
  • Forum Home
    • Forum
    • Forum Search
    • Forum Login
    • Forum Registration

How can I reduce gap under thumbnails?

by

Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore Troubleshooting › How can I reduce gap under thumbnails?

Tagged: estore, nextgen, offset

  • This topic has 12 replies, 6 voices, and was last updated 13 years, 1 month ago by admin.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 30, 2011 at 7:17 pm #5149
    Heather
    Member

    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

    December 31, 2011 at 5:01 am #40171
    admin
    Keymaster

    1. Post a link to the page where you have it.

    2. Which NextGen gallery integration are you using (method 1 or method 2)?

    January 3, 2012 at 7:04 pm #40172
    Heather
    Member

    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

    January 3, 2012 at 9:41 pm #40173
    Peter
    Member

    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.

    January 4, 2012 at 12:41 pm #40174
    Heather
    Member

    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

    January 4, 2012 at 4:18 pm #40175
    Ivy
    Member

    You can use negative numbers such as -20px this will subtract 20px from 0 closing the gap even more if you need to.

    January 4, 2012 at 10:33 pm #40176
    Heather
    Member

    Wow! Thanks Ivy; now it’s perfect with -30 !!

    Thank again, Heather

    January 4, 2012 at 11:47 pm #40177
    Heather
    Member

    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

    January 5, 2012 at 12:00 am #40178
    Peter
    Member

    No worries at all Heather. Glad your display issue was resolved :)

    February 17, 2012 at 7:10 pm #40179
    pascal
    Member

    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

    February 18, 2012 at 12:26 am #40180
    Peter
    Member

    Hi,

    Please send a link to the page and state exactly what you are trying to achieve and we can take a look.

    March 13, 2012 at 4:40 pm #40181
    Handsome007
    Member

    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.

    March 14, 2012 at 5:18 am #40182
    admin
    Keymaster

    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:

    http://www.tipsandtricks-hq.com/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.
Log In

Forum Related

  • Forum Home
  • Forum Search
  • Forum Registration
  • Forum Login

Support Related Forms

  • Contact Us
  • Customer Support
  • Request a Plugin Update
  • Request Fresh Download Links

Useful Links

  • Plugin Upgrade Instructions
  • WP eStore Documentation
  • WP eMember Documentation
  • WP Affiliate Platform Documentation
  • Tips and Tricks HQ Home Page
  • Our Projects

Quick Setup Video Tutorials

  • WP eStore Video Tutorial
  • WP eMember Video Tutorial
  • WP Affiliate Platform Video Tutorial
  • Lightbox Ultimate Video Tutorial

Our Other Plugins

  • WP Express Checkout
  • Stripe Payments Plugin
  • Simple Shopping Cart Plugin
  • Simple Download Monitor

Copyright © 2025 | Tips and Tricks HQ