Big Cartel Theme Support

How do I change the colour of the modal or popup page overlay?

How do I change the colour of the modal or popup page overlay?

Modal zoom is an option for the product page image zoom type and can also be used with your own custom content, including loading video and web pages - refer to How do I use the popup image viewer with custom content?

When the image zoom modal is active, the current web page behind the modal window is hidden with an overlay. The colour of this overlay is black by default. To change the colour of this overlay, add the following custom CSS to your custom style coding area - see Where do I add custom style code?:

/* Set the colour of the modal zoom overlay */
#cboxOverlay {
	background-color: #ffffff;
}

In the above we have used the hex value for white #ffffff You can use any valid colour value - see CSS-colour tutorial. For example, to make the overlay semi-transparent we use an rgba value:

/* Set the colour of the modal zoom overlay */
#cboxOverlay {
	background-color: rgba(87, 248, 255, 0.8);
}

Additionally, if you wish to change the background of the modal zoom image area (this is relevant if you have images that include transparent regions) you can add further CSS to your custom style coding area as follows:

/* Set the colour of the modal zoom image background */
#cboxContent {
	background-color: #ffffff;
}

Click the Done and Save buttons to apply your changes.

The popup modal is used for the special menu items x-sp-search and x-sp-modal — see How do I edit my navigation menus in my Big Cartel admin? — and the popup shortcode — see Shortcodes - Popup links and windows.

When the image zoom modal is active, the current web page behind the modal window is hidden with an overlay. The colour of this overlay is 50% transparent black by default, i.e. rgba(0, 0, 0, 0.5) To change the colour of this overlay, add the following custom CSS to your custom style coding area - see Where do I add custom style code?:

/* Set the colour of the popup modal overlay */
.modal {
	background-color: #ffffff;
}

In the above we have used the hex value for white #ffffff You can use any valid colour value - see CSS-colour tutorial. For example, to make the overlay semi-transparent we use an rgba value:

/* Set the colour of the popup modal overlay */
.modal {
	background-color: rgba(87, 248, 255, 0.8);
}

Click the Done and Save buttons to apply your changes.

AarcadeHow do I change the colour of the modal or popup page overlay?