Tips and Tricks HQ Forum

Support Forum for Tips and Tricks HQ Products

Register or log in - lost password? (Having an issue with the forum login?)

Search the Forum

Tips and Tricks HQ Forum » WP eStore Forum » WP eStore Troubleshooting

How can I reduce gap under thumbnails?

(13 posts) (6 voices)
  • Started 4 months ago by Heather
  • Latest reply from admin
  • Possible Solutions (Related Topics):
    1. eStore fancy 3 thumbnails not displaying properly
    2. Thumbnails will not delete
    3. Thumbnails are showing on product management page inside
    4. Disable thumbnails (Don't want customers to be able to click on a thumbnail)
    5. Thumbnails in Internet Explorer not showing correctly.

Tags:

  • estore
  • nextgen
  • offset
12Next »
  1. 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 150x150. The CSS is "Shadow Effect with Description text" Please can anyone tell me where I can change this? Thanks

    Posted 4 months ago #
  2. admin
    Key Master

    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 #
  3. 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

    Posted 4 months ago #
  4. Peter
    Moderator

    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 #
  5. 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

    Posted 4 months ago #
  6. Ivy
    Administrator

    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 #
  7. Heather
    Member

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

    Thank again, Heather

    Posted 4 months ago #
  8. 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

    Posted 4 months ago #
  9. Peter
    Moderator

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

    Posted 4 months ago #
  10. 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

    Posted 3 months ago #

RSS feed for this topic

12Next »

Reply »

You must log in to post.

Tips and Tricks HQ  | WP Shopping Cart  | WP Affiliate Software  | WordPress Membership Plugin