Apply custom CSS to Covet.pics gallery

To apply custom CSS to the Covet.pics gallery, you can follow this guideline.

NOTE: we try our best to keep changes to minimum, but we can't guarantee that gallery HTML code will stay the same. If we change the code, it's possible that any custom CSS you have - will stop working

Covet.pics galleries are enclosed in shadow DOM. To apply custom CSS to shadow DOM, you'll need to write a Javascript code. Here is a an example of custom css that hides sidebar in Covet.pics popup:

<script type="text/javascript">
// triggers when gallery is ready
document.addEventListener('galleryReady:covetPics', function(e) {
  // prepare CSS styles to inject
  const stylesPopup = document.createElement( 'style' )
  stylesPopup.innerHTML = `
    .popup .popup-body {
      display: none;
    }
  `
  // get Covet gallery elements where you want to inject CSS (for eg. covet-pics-widget, covet-pics-popup, covet-pics-upload)
  const popup = document.querySelector("covet-pics-popup");
  
  // now inject CSS code into shadow DOM
  popup.shadowRoot.appendChild(stylesPopup);
});
</script>

How to add CSS to your gallery:

This is a Javascript code that injects the CSS code to your gallery. This piece of Javascript code can be added:
1. directly in the liquid template - next to gallery embed code
2.  in the main theme's Javascript file - themes come with a general Javascript file(s)
3. directly into the Page HTML/CSS - if a gallery is getting embedded to a Page, same as the liquid template, the code can be added directly to the page - next to gallery embed code