[Plugin: Flickr Gallery] Overriding lightbox CSS

  • mikeprince

    (@mikeprince)


    12 years, 9 months ago

    How can I override the CSS used by the Flickr Gallery plugin?

    As a simple example, I wanted to change the opacity of the overlay. In my theme css I entered

    #floverlay {
    opacity: 0.8;
    }

    but this gets overriden by the plugin css, i.e. plugins/flickr-gallery/flightbox/jquery.flightbox.css?ver=1.5.2

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter mikeprince

    (@mikeprince)

    12 years, 9 months ago

    To answer my own question, it doesn’t seem possible because there is no overall div for Flickr Gallery. I think the divs with ids floverlay and flightbox really need to be surrounded by an overall div id=”flickr-gallery”.

    Thread Starter mikeprince

    (@mikeprince)

    12 years, 9 months ago

    So one small hack later and I have it working.

    At line 152 of wp-content\plugins\flickr-gallery\flightbox\jquery.flightbox.js, change

    $("body").
	append('<div id="floverlay"></div>').
	append('<div id="flightbox"><div id="flightbox-right"><div id="flightbox-next"></div></div><div id="flightbox-left"><div id="flightbox-prev"></div></div></div>');

    to

    $("body").
	append('<div id="flickr-gallery">');
$("#flickr-gallery").
	append('<div id="floverlay"></div>').
	append('<div id="flightbox"><div id="flightbox-right"><div id="flightbox-next"></div></div><div id="flightbox-left"><div id="flightbox-prev"></div></div></div>');

    You can then style the overlay and main lightbox container in your theme’s css by something like
    #flickr-gallery #floverlay {
    opacity: 0.8;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Plugin: Flickr Gallery] Overriding lightbox CSS’ is closed to new replies.

Tags