change overlay opacity, border color, fancybox photo gallery

All Quick 'n Easy Web Builder support issues that are not covered in the forums below.
Post Reply
cellomangler
Posts: 52
Joined: Sun Mar 16, 2014 9:13 am

change overlay opacity, border color, fancybox photo gallery

Post by cellomangler » Tue Jun 24, 2014 1:35 am

To make the overlay opacity darker (or just to change it) and to change the overlay photo border color, edit the following:
In the jquery.fancybox-1.3.0.css
In this first item, the background color is probably over-ridden by the color in the jQuery script below, but I changed it to
my preferred overlay and background color.

#fancybox-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #0C100C;
z-index: 1100;
display: none;
}
This item is the border color of the pop-up larger image:
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #0C100C;
}

In the jquery.fancybox-1.3.0.pack.js, search near the bottom of the code for this string: (but not exactly, because this is my edited version)
OnContentClick:false,overlayShow:true,overlayOpacity:.9,overlayColor:"#0C100C",
All I edited was the overlayOpacity which can be anything from .1 to 1, and the overlayColor.
FYI, hex color charts, converters from rgb and such are all over the web. ei, http://www.w3schools.com/tags/ref_colorpicker.asp


Remember to make a backup of the edited versions - I always include the word edit in the name - because QEWB will create fresh versions when you publish again and if you upload the fresh versions you will erase your edits. But it's simple to upload the edited versions, delete the un-edited, and rename. You get the picture.
Cheers.

Post Reply

Who is online

Users browsing this forum: mexman and 2 guests