WordPress.org

1. mikeprince
   Member
   Posted 11 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

2. mikeprince
   Member
   Posted 11 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".

3. mikeprince
   Member
   Posted 11 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;
   }

Reply

You must log in to post.