WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] NextGen Gallery image shadow issue (15 posts)

  1. rasins
    Member
    Posted 1 year ago #

    Hi,

    I'm using the NextGen Gallery plugin on a site and I'm trying to customise the styles on the larger images. If you click a thumbnail on this site you'll know what I mean - http://lyndamiller.co.uk/?page_id=19.

    I've managed to put a white curved border around the larger images and I've managed to get a white background on the bit below the images that allow you to navigate from one image to the next, (the bit with the arrows), but I'm getting an odd shadow between the two. Any ideas of how I resolve this issue? I've got a feeling I'm going to need to add an extra <div>/div> in there.

    Many thanks in advance.

    http://wordpress.org/extend/plugins/nextgen-gallery/

  2. rasins
    Member
    Posted 1 year ago #

    I've still not got anywhere with this. Can anyone help please?

  3. mukesh panchal
    Member
    Posted 1 year ago #

    wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0

    change the code in line no:142

    .ngg-gallery-thumbnail img {
        background-color: #FFFFFF;
        border: 0 solid #A9A9A9;
        display: block;
        margin: 4px 0 4px 5px;
        padding: 4px;
        position: relative;
    }

    your problem is solve.
    check it.

  4. rasins
    Member
    Posted 1 year ago #

    Thanks Muskesh27. I don't really understand what the code will do though, except take the border off. I've tried it and it appears to have not changed anything. To recap, it's the shadowing that is causing me a problem. Thanks for taking the time to comment though. Much appreciated. :)

  5. mukesh panchal
    Member
    Posted 1 year ago #

    wp-content/plugins/nextgen-gallery/css/nggallery.css

    line no:151

    .ngg-gallery-thumbnail img {
    background-color: #FFFFFF;
    border: 0 none;
    display: block;
    margin: 4px 0 4px 5px;
    position: relative;
    }

    change this code.

    thanks
    Mukesh

  6. rasins
    Member
    Posted 1 year ago #

    This is actually changing the border around the thumbnail images which is not what the problem is. If you click on one of the thumbnail images you'll see how it brings up an enlarged version of that image. This enlarged image has a white border around it with a shadow, however the shadow is crossing over at the bottom between the enlarged image and the navigation for the image. I want to get rid of this shadow that is in-between there.

  7. mukesh panchal
    Member
    Posted 1 year ago #

    wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.4

    line no:81

    img#shTopImg {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: #FFFFFF #FFFFFF -moz-use-text-color;
        border-style: solid solid none;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-width: 10px 0 medium;
        box-shadow: 0 0 10px 0 #888888;
    }

    wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.4

    line no:82

    div#shTitle {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-color: -moz-use-text-color #FFFFFF #FFFFFF;
        border-right: 3px solid #FFFFFF;
        border-style: none solid solid;
        border-width: medium 3px 2px;
        box-shadow: 0 0 10px #888888;
    }
  8. rasins
    Member
    Posted 1 year ago #

    The code you have provided took away the rounded white border from the top, left and right. It left the shadows on all sides and added a grey border at the top. I'm going to have a tinker with the code you have provided because I feel like I'm close. Many many thanks for taking the time to help. Much appreciated. :)

  9. rasins
    Member
    Posted 1 year ago #

    I think I've found a work around for this. Not really happy with the shadowing at the very bottom of the enlarged image as there isn't much, but it'll do. Thanks very much for your help. :)

    img#shTopImg {
    border: 10px solid #fff;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom: none;
    box-shadow: 0 -2px 10px 0 #e3e6e4;
    background-color:#fff;
    }

    div#shTitle {
    border: 14px solid #fff;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-top: 5px solid #fff;
    box-shadow: 0 0 10px #e3e6e4;
    background-color:#fff;

  10. mukesh panchal
    Member
    Posted 1 year ago #

    if u put this code then u got the result .

  11. rasins
    Member
    Posted 1 year ago #

    What code?

  12. mukesh panchal
    Member
    Posted 1 year ago #

    u got solution or not for your issue

  13. rasins
    Member
    Posted 1 year ago #

    Yes, my issue is resolved with the code I used above, but the shadowing is a little off. There is more shadowing on the top than the left, right and bottom that's all.

  14. deborahbabin
    Member
    Posted 1 year ago #

    I DO want to remove the white border around the enlarge image.

  15. deborahbabin
    Member
    Posted 1 year ago #

    I tried the recommended code change above but the border is still there.
    I would accept a black one, but really prefer NO border.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic