Change Lightbox CSS properties with own code


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:


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

Can you please advise?


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.