Documentation

Helpful CSS Snippets

Make the background of the image area transparent

You’ll need to know the ID of your image. This is the same ID that you use to embed the image with the shortcode. The CSS is:

body #hotspot-{id} .hotspots-image-container {
	background: transparent;
}

Where you have to replace {id} with the ID of your image. For example, if your image id is 123, the CSS would be:

body #hotspot-123 .hotspots-image-container {
	background: transparent;
}

Change the width of the lightbox

If you’re using the lightbox layout, you might want to make the lightbox smaller or larger. Here is the CSS you can use to change the width of the lightbox:

body .featherlight .featherlight-content {
	max-width: 50%;
}

Where the max-width is the maximum size you’d like the lightbox to be. Keep in mind that our plugin is responsive, so you might want to use media queries to set a larger percentage size on smaller screens like this:

body .featherlight .featherlight-content {
max-width: 90%;
}
@media screen and (min-width:600px) {
	body .featherlight .featherlight-content {
	max-width: 75%;
	}
}
@media screen and (min-width:980px) {
	body .featherlight .featherlight-content {
	max-width: 50%;
	}
}

Change the width of the more info area in left or right layout

Depending on your theme and your content, you might want to adjust the width of the more info area if you’re using the left or the right layout. Here’s how to adjust that. Keep in mind that our plugin is responsive, so you’ll want to be sure to include a media query:

@media (min-width: 900px) {
  #hotspot-{id}.layout-left .hotspots-image-container,
  #hotspot-{id}.layout-right .hotspots-image-container {
    width: 50%;
  }
}

Where {id} is the ID of your image (the same ID you use to embed the shortcode). For example if your ID was 123, the code would be:

@media (min-width: 900px) {
  #hotspot-123.layout-left .hotspots-image-container,
  #hotspot-123.layout-right .hotspots-image-container {
    width: 50%;
  }
}

Add rounded corners to the lightbox

To add rounded corners to all Draw Attention lightboxes:

body .featherlight .featherlight-content {
	border-radius: 10px;
}

To add rounded corners to the lightboxes for a specific image, you’ll need to include the image ID in the CSS selector like this:

body .featherlight .featherlight-content.lightbox-{id} {
	border-radius: 10px;
}

Where {id} is the ID of your image (the same ID you use to embed the shortcode). For example if your ID was 123, the code would be:

body .featherlight .featherlight-content.lightbox-123 {
	border-radius: 10px;
}