Question:

Dear support team,

I purchased a single license for the HTML5 lightbox product. The lightbox is installed in a testing website and working well for the most part. The videos are self hosted.

Using the Chrome developer tools I was able to identify the following html page elements:

#html5-lightbox-overlay
#html5-lightbox-box
#html5-next
#html5-prev
.html5-nav-container

Adding custom CSS rules to these elements in the html document head does not override the default css.

Can you please advise?

Answer:

To change the css property with your own code, you need to add the !important at the end of each css value, for example, to change the background overlay color:

#html5-lightbox-overlay {
    background-color: #ff0000 !important;
}

The !important will override the default css that is setup by the Lightbox script.