• Resolved primaveranz

    (@primaveranz)


    Hi, I am using a Weaver II child theme which has a styles.css file with a couple of other entries which work fine. Now I want to replace the grey border around the NGG images which appears after clicking on an NGG tag cloud widget with a white border.
    You can see the borders appear (in the sidebar images) by going here:- http://www.punc.co.nz/punclets-dotteries/njawe-photo-cards/ and clicking on one of the tag cloud filters on the right.
    I see they are inheriting this from “widgets.css”. I tried putting the following css into the child theme:-
    .ngg-widget img {
    border: 2px solid #FFFFFF;
    }
    This did not override the original. So I put it into the Gallery/ Other Options/ Styles/ Customisation options box. No luck either. Finally I tried in the Weaver II/ Advanced Options /custom CSS rules – again no luck. Do I have to recreate the widgets.css file hierarchy in my child theme and override it there? Thanks.

    https://wordpress.org/plugins/nextgen-gallery/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter primaveranz

    (@primaveranz)

    I forgot to say that NGG is up to date.

    Plugin Contributor photocrati

    (@photocrati)

    @primaveranz – The CSS element you need to work with is this one … .ngg-gallery-thumbnail img {} … although I suspect you should be more specific so your custom style does not clash with other instances of NextGEN Gallery thumbnails.

    Thanks!

    – Cais.

    Thread Starter primaveranz

    (@primaveranz)

    Thanks for the quick reply.
    I just quickly tried putting
    .ngg-gallery-thumbnail img {
    border: 2px solid #FFFFFF;
    }
    into the “other options” CSS but it didn’t make any difference.
    According to Chrome, widgets.css is overriding the value in nggallery.css. So if I temporarily disable the widgets.css attribute in firefox it picks up the correct setting from nggallery.css. Also in Chrome if I use “inspect element” I see the classes “ngg-widget entry-content” wrapping around a class on the element called “shutterset_b(some long number)” and then the “img” tag is wrapped inside that. I don’t see any reference to “ngg-gallery-thumbnail”.

    Thread Starter primaveranz

    (@primaveranz)

    Sorry, I forgot to “backtick” the reference to the <a 😉

    Thread Starter primaveranz

    (@primaveranz)

    Still unable to figure this out.

    nppbc

    (@nppbc)

    Try adding important. Here is an example:

    .ngg-gallery-thumbnail img {border: 2px !important;}

    scrambler

    (@scrambler)

    Are you speaking of the grey border that shows up when you hover over the image, or one that is there all the time ?

    Because on IE, your images have no grey border in their normal state, I only see one on hover.

    I also see your rule
    .ngg-gallery-thumbnail img {border: 2px solid #FFFFFF !important;}

    It is active and doing its job. It is overriding the initial nextgen rule
    .ngg-gallery-thumbnail img {border:1px solid #A9A9A9;….}

    and if I remove your rule, the thin grey border comes back. If this is the border you are trying to hide, and it is not hidden when you look at it, you may have a cache issue, check on another computer and another browser.

    You can also use your browser developer tools, click on one of the images and look at all the rules being applied to see if you see both the original grey border rule and your white one.
    If you do see both check which one is overriding witch.
    If you don’t see both then you likely have a local cache issue, because I do.

    Thread Starter primaveranz

    (@primaveranz)

    Thanks for the reply scrambler. Yes I added that code after trying what nppbc suggested above. However it doesn’t actually do what I need so I will remove it. The grey borders I wanted gone, were the ones which appeared whenever I clicked on one of the filters in the tag cloud in the right sidebar. They still did this with that code added.

    The code that fixed the problem is:-
    .ngg-widget img {border: 2px solid #FFFFFF !important;}

    However it does nag me a bit that I have to use !important when I thought the NGG “other options” CSS styles would override all other NGG style settings anyway? No matter, I have a solution so will put it down to “one of those things”. Thanks again!

    I’m dealing with the similar issue – my aim is to supress the borders of the (not really thumbnail?) images – the borders of these in the nextgen sidebar widget.
    Locted here:
    http://www.keramikforum.info/
    When I put this

    .ngg-widget img {
        border: 0px;
        margin: 0px;
        padding: 1px;
    }

    in the
    /wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/widget/static/widgets.css
    file, it works as I want.
    But placed in the child-theme css, it stays without impact
    (The advantage would in evidence be that updates of ngg wouldn’t override the class-tag every time.)
    Neather
    .ngg-gallery-thumbnail img {border: 4px solid #ab1278 !important;}
    or
    .ngg-gallery img {border: 4px solid #ab1278 !important;}
    have any effect (this is just code to verify its impact).
    The fire-bug output for the element is that there is a class-element provided by style.css within the child-theme called “.ngg-gallery img”,
    but it is empty within its brackets. Overriding it manually by firebug has the required effect.
    Is there a way to achieve the modification of the widget-displayed images via the child-theme?

    Plugin Contributor photocrati

    (@photocrati)

    @milanforwp – As this topic was over five months old it would likely have been much better to start your own topic to address what you are trying to customize.

    As it is, it appears you have sorted out the issue at hand … if not, please start a new topic.

    Thanks!

    – Cais.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Gallery Other Options not overriding?’ is closed to new replies.