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. For Draw Attention 1.7 and below or Draw Attention Pro 1.8 and below, 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;
}

For Draw Attention 1.8 and up and Draw Attention Pro 1.9 and up, the CSS is:

body #hotspot-{id} .leaflet-container,
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 .leaflet-container,
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.

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. For Draw Attention 1.7 and below or Draw Attention Pro 1.8 and below, The CSS is:

@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%;
  }
}

For Draw Attention 1.8 and up and Draw Attention Pro 1.9 and up, the CSS is:

@media (min-width: 900px) {
  #hotspot-{id}.layout-left .hotspots-image-container,
  #hotspot-{id}.layout-right .hotspots-image-container {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
  }
  #hotspot-{id}.layout-left .hotspots-placeholder,
  #hotspot-{id}.layout-right .hotspots-placeholder {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-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 {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
  }
  #hotspot-123.layout-left .hotspots-placeholder,
  #hotspot-123.layout-right .hotspots-placeholder {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-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;
}

Change the font style for the more info title

Aside from the color, all the styles for the more info title and text are inherited from your theme. That works in most cases, but depending on your theme and what you’re trying to accomplish, you might want to modify those styles. Here’s how to select the title to be customized with CSS:

body .hotspot-info .hotspot-title {
	font-weight: bold;
}

Hide the tooltips

If you’d prefer to hide the tooltips on the images, you may use the following CSS in Draw Attention (free) 1.8 and up or in Draw Attention Pro 1.9 and up.

body .leaflet-pane.leaflet-tooltip-pane {
	display: none;
}