Skip to content

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

Change the font size (and styles) for the more info box

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:

/* Change the styles for the title */
body .hotspot-info .hotspot-title {
	font-family: sans-serif;
	font-size: 1rem;
}

/* Change the styles for the content */
body .hotspot-info .hotspot-content {
	font-family: sans-serif;
	font-size: 1rem;
}

Adjust the padding of the tooltip

This CSS applies to Draw Attention 1.8 and up and Draw Attention Pro 1.9 and up.

If you’d like more or less space between the content and edge of the tooltip, you can adjust the margins to get the effect you’d like.

To globally adjust the padding for all tooltips on all Draw Attention images on the site, use this CSS:

body .leaflet-rrose-content {
	margin: 14px 20px;
}

To adjust the padding for tooltips on just one Draw Attention image, use this CSS:

#hotspot-{id} .leaflet-rrose-content {
	margin: 5px 5px;
}

Where {id} is replaced with the ID of your Draw Attention image. For example, if the ID is 123, the code would be:

#hotspot-123 .leaflet-rrose-content {
	margin: 5px 5px;
}

Adjusting the width of the tooltip

Caution: Adjusting the size of the tooltip can cause layout issues, especially on devices with smaller screens such as mobile phones and tablets. Please test thoroughly in several different browsers and at several different screen sizes to ensure that the tooltips are visible and working as expected after adjusting the size. If you find that you need more space, we recommend using the lightbox layout rather than the tooltip layout as tooltips are intended to be simple, short, and limited in size.

This CSS applies to Draw Attention 1.8 and up and Draw Attention Pro 1.9 and up.

We recommend using a media query to specify the screen sizes to which your width adjustments will apply to help ensure the tooltips on devices with small screens continue to work as expected. To globally adjust the tooltip width on all tooltips on all Draw Attention images on the site, use this CSS:

@media screen and (min-width:768px) {
	body .leaflet-rrose-content[style] {
		width: 100px !important;
	}
}

Please note that the !important is required to override inline styles that are applied automatically to the tooltip via JavaScript.

To adjust the width for tooltips on just one Draw Attention image, use this CSS:

@media screen and (min-width:768px)
	#hotspot-{id} .leaflet-rrose-content[style] {
		width: 100px !important;
	}
}

Where {id} is replaced with the ID of your Draw Attention image. For example, if the ID is 123, the code would be:

@media screen and (min-width:768px)
	#hotspot-123 .leaflet-rrose-content[style] {
		width: 100px !important;
	}
}

Adjusting the height of the tooltip

Caution: Adjusting the size of the tooltip can cause layout issues, especially on devices with smaller screens such as mobile phones and tablets. Please test thoroughly in several different browsers and at several different screen sizes to ensure that the tooltips are visible and working as expected after adjusting the size. If you find that you need more space, we recommend using the lightbox layout rather than the tooltip layout as tooltips are intended to be simple, short, and limited in size.

This CSS applies to Draw Attention 1.8 and up and Draw Attention Pro 1.9 and up.

We recommend using a media query to specify the screen sizes to which your height adjustments will apply to help ensure the tooltips on devices with small screens continue to work as expected. To globally adjust the tooltip height on all tooltips on all Draw Attention images on the site, use this CSS:

@media screen and (min-width:768px) {
	body .leaflet-rrose-content[style] {
		height: 200px !important;
	}
}

Please note that the !important is required to override inline styles that are applied automatically to the tooltip via JavaScript.

To adjust the height for tooltips on just one Draw Attention image, use this CSS:

@media screen and (min-width:768px)
	#hotspot-{id} .leaflet-rrose-content[style] {
		height: 200px !important;
	}
}

Where {id} is replaced with the ID of your Draw Attention image. For example, if the ID is 123, the code would be:

@media screen and (min-width:768px)
	#hotspot-123 .leaflet-rrose-content[style] {
		height: 200px !important;
	}
}
Scroll To Top