0

I'm using Awesome Flickr Gallery, a plugin to show Flickr galleries on a website; it uses "Swipebox" to display single pictures on a lightbox.

The lightbox display two bars, on to and bottom of the screen, di display information and provide navigation controls. I'm trying to customize those bars to match the site fonts and colors, but without success.

By inspecting the relevant items with Chrome, I get that these elements are <div id="swipebox-top-bar" class="visible-bars"> and <div id="swipebox-bottom-bar" class="visible-bars">

This is my custom code:

#swipebox-top-bar, #swipebox-bottom-bar {
    font-family: Montserrat,Helvetica,Arial,sans-serif !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 1px #000 !important;
    background: #A01921 !important;
    opacity: .80 !important;
}

I've tried various combinations, not only the shown #swipebox-bottom-bar, #swipebox-top-bar, but also div#swipebox-bottom-bar, div#swipebox-top-bar, div#swipebox-bottom-bar.visible-bars, div#swipebox-top-bar.visible-bars, visible-bars, but nothing seem to work.

How can I successfully customize these elements?

Improve this question
2
  • I tried modifying the demo site of the said plugin and tried to apply your css and it seems your CSS targeting is right: prntscr.com/gvil8r . Do you work on localhost? if not maybe the site you are working on has cache.
    – The Last Omen
    Commented Oct 10, 2017 at 8:21
  • Well, I solved it: the plugin had an "advanced settings" page where you can put custom CSS; for some reasons,at least on this installation, only code inserted here works, while if loaded from somewhere else it does not seem to be processed.
    – Sekhemty
    Commented Oct 10, 2017 at 9:09

1 Answer 1

Reset to default
0

I wish I could ask these questions via a comment but I need 50 reputation to do so...

But anyhow, have you inspected the elements after applying the CSS to see if it's actually being loaded in and applied? Secondly, have you checked whether they are being overwritten by existing CSS if it is indeed applied?

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.