How to change the control bar color in Fancybox 3?

Question

I want to change the color of the controls of my Fancybox 3 gallery, as the default is barely readable.

I already loaded a separate Fancybox stylesheet, that allows me to change the color of the background. I can not find a way to change the color of the controls using the same method, though.

Contents of fancybox.css:

.fancybox-bg {
    background: #ccc;
}

.fancybox-is-open .fancybox-bg {
    opacity: 0.4;
}

Answer 1

Use

.fancybox-bg {
    background: #ccc !important;
}

Answer 2

Please use the parent element or class or id to override plugin css. For example

div.fancybox-bg{...} or.class_name.fancybox-bg{...}

Answer 3

You should be more specific about what color you would like to change, but if you refer to buttons in the top right corner, then you can do that by tweaking .fancybox-button class, example:

.fancybox-button {
  background: red;
  color: #fff; /* Tip: This will change icon color */
  padding: 0; /* Tip: Change padding to resize icon */
}

Important: Make sure you add your CSS customization code AFTER including fancybox.css