WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: NextGEN Gallery] NextGen Gallery image shadow issue

[Resolved] [Plugin: NextGEN Gallery] NextGen Gallery image shadow issue

  • 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/

Viewing 14 replies - 1 through 14 (of 14 total)
  • I’ve still not got anywhere with this. Can anyone help please?

    Mukesh Panchal
    Participant

    @mukesh27

    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.

    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. 🙂

    Mukesh Panchal
    Participant

    @mukesh27

    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

    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.

    Mukesh Panchal
    Participant

    @mukesh27

    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;
    }

    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. 🙂

    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;

    Mukesh Panchal
    Participant

    @mukesh27

    if u put this code then u got the result .

    What code?

    Mukesh Panchal
    Participant

    @mukesh27

    u got solution or not for your issue

    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.

    deborahbabin
    Member

    @deborahbabin

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

    deborahbabin
    Member

    @deborahbabin

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Resolved] [Plugin: NextGEN Gallery] NextGen Gallery image shadow issue’ is closed to new replies.