Title: [Plugin: Flickr Gallery] Overriding lightbox CSS
Last modified: August 20, 2016

---

# [Plugin: Flickr Gallery] Overriding lightbox CSS

 *  [mikeprince](https://wordpress.org/support/users/mikeprince/)
 * (@mikeprince)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/overriding-lightbox-css/)
 * 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](https://wordpress.org/support/users/mikeprince/)
 * (@mikeprince)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/overriding-lightbox-css/#post-2165571)
 * 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](https://wordpress.org/support/users/mikeprince/)
 * (@mikeprince)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/overriding-lightbox-css/#post-2165581)
 * 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.

 * ![](https://s.w.org/plugins/geopattern-icon/flickr-gallery.svg)
 * [Flickr Gallery](https://wordpress.org/plugins/flickr-gallery/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/flickr-gallery/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/flickr-gallery/)
 * [Active Topics](https://wordpress.org/support/plugin/flickr-gallery/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/flickr-gallery/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/flickr-gallery/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [style](https://wordpress.org/support/topic-tag/style/)

 * 2 replies
 * 1 participant
 * Last reply from: [mikeprince](https://wordpress.org/support/users/mikeprince/)
 * Last activity: [14 years, 10 months ago](https://wordpress.org/support/topic/overriding-lightbox-css/#post-2165581)
 * Status: not resolved