Documentation

Customizing Draw Attention CSS

Draw Attention offers some basic style presets that you can adjust within the plugin edit screen. However, people often want custom styles that wouldn’t make sense to include for everyone. Other times, your theme’s stylesheet or another plugin could be affecting how your DA images appear.

For these cases, you will need to write custom CSS to override existing styles, or create new ones.

Where should I add custom css?

You can add custom css into your child theme’s css file (if you have a child theme). If you don’t have a child theme, or you’re not comfortable with FTP, we recommend using a CSS plugin to add custom styles. There are many options, but here are a couple popular choices:

Tips on editing Draw Attention CSS

How to find the Draw Attention CSS to edit

A familiarity with viewing html/css using the Google Chrome Inspector is helpful (further reading). In Google Chrome browser, right-click on the Draw Attention image or element you want to inspect, and click “inspect element”. This will bring up a panel that shows the html in one section, and the css in the other. As you highlight your cursor over html elements they should be highlighted in the browser. And if you click on an html element in inspector, you should see its css in the other panel.

Make your CSS more specific

Let’s say you want to edit a particular lightbox background that has this html:

<div class="featherlight-content lightbox-17"></div>

While you could edit this by targeting only the class .featherlight-content, be aware that would affect all lightboxes. If you want to make a change for just one element, make sure to include the specific number or id, which in this case is lightbox-17.

So for this example we’ll edit this CSS which came up in the CSS panel in Chrome Inspector:

.featherlight .featherlight-content.lightbox-17 {
background: #c1c1c1;
}

To make sure your custom style overrides this, some people may add an !important tag:

.featherlight .featherlight-content.lightbox-17 {
background: transparent !important;
}

While this works, we recommend only doing that when no other option works. A better route is to add a selector that comes before the one you’re targeting, which makes your rule more specific without using !important. In most cases simply adding the body tag will do the trick, like this:

body .featherlight .featherlight-content.lightbox-17 {
background: transparent;
}

For some specific examples of common customization tasks, please see our Helpful CSS Snippets. If you have a specific question let us know!