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:

// 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);
});