@TheRadioStar You'll need to make a few modifications to the css that describes the Fancybox image gallery. These changes will affect all such image galleries across your site.
To get to your site's css code, in the Site Editor, click Theme then click the "Edit HTML/CSS" button at the bottom of the left-hand sidebar. This will take you to the Code Editor. The site's css code is housed in the right-hand pane.
Image Gallery Background Overlay
At the top of the css code pane, click the magnifying glass icon and enter the search term fancybox-overlay and hit enter. This will take you to the code block you see below. Typically, image galleries will place a semi-transparent background overlay behind a pop-up image to focus attention on the enlarged image while letting you know that you haven't actually left the gallery page. In the code below, the background overlay color attribute for your gallery pop up images is set to white with 90% opacity (or 10% transparency). To change the background opacity to fully opaque, change the "0.90" (highlighted in red) to "1.0". Now, while you're here, if you'd like to tinker with the background overlay color, you can change the RGB levels. Currently, you see R=255, G=255, B=255 in the rgba attribute. 255 is the highest color level for a color component. If, for example, you changed the first 255 in the rgba attribute to, say, 200, you'd be reducing the amount of red in the overall background color which would result in an overall pale blue-green color. For your site, I think you want to stick with the white background to match the black-and-white minimalism of the overall site but it's worthwhile for you to know what those other numbers in the rgba attribute are.
.fancybox-overlay {
background: rgba(255,255,255,0.9);
}Image Gallery Previous/Next Arrow and Close Placement
Moving the arrow navigators is a little more tricky because of your white background overlay. You'll have to change the color of navigation arrows from white to black in both the default and hover states because when you move these arrows off the image and on to the background, they'll disappear if they remain in the default white color.
First, we'll change the color of the arrows from white to black in both the default and hover states. Click the magnifying glass and enter the search term fancybox-close:before and hit enter and you'll arrive at the two code blocks below. The color of the previous, next, and close ("x") buttons are all white. In the first code block, you'll see the color attribute is set to #ffffff (this is white), highlighted in red below. Change this to black: change "#ffffff" to "#000000". In the second code block is the hover state for these buttons and you'll need to also change the color attribute to black. In this case, there's an opacity hover effect provided by the rgba attribute that we'll keep so we'll just change the color itself from white to black and leave the opacity setting as is. Highlighted in green below is the hover state color (white with a little transparency) indicated by rgba(255,255,255,0.8). Change each 255 to 0, that is, rgba(0,0,0,0.8).
.fancybox-close:before, .fancybox-next span:before, .fancybox-prev span:before {
color: #ffffff!important;
font-family: 'Birdseye', sans-serif;
font-size: 25px;
font-weight: 400;
line-height: 0.75em;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
}
.fancybox-close:hover:before, .fancybox-next:hover span:before, .fancybox-prev:hover span:before {
color: rgba(255,255,255,0.8) !important;
}Okay, now we'll move the previous/next and close indicators off the image and on to the background. Click the magnifying glass icon again and enter the search term fancybox-prev span:before and you'll arrive at the following three code blocks. Change the left position of the "previous" arrow from "left: -10px;" (highlighted in red below) to "left: -60px;" Change the right position of the "next" arrow from "right: -10px;" (highlighted in green below) to "right: -60px;" Change the position of the close ("x") button from "top: 20px" (highlighted in pink below) to "top: 0px;" and "right: 20px;" (highlighted in orange below) to "right: -40px".
.fancybox-prev span:before {
position: relative;
left: -10px;
content: '\3008';
}
.fancybox-next span:before {
position: relative;
right: -10px;
content: '\3009';
}
.fancybox-close {
top: 20px;
right: 20px;
}
