How to customize the close button

The default close button is styled via a CSS file – there is no dynamic inline CSS. That means you can also use CSS to easily adjust the appearance of the close button.

Style all Popups

Use the following CSS selector to target the close button of all Popups:

/* Style the close button */
#et-boc [data-da-area] .da-close-wrap .da-close
 /* Customize the close button position */
#et-boc [data-da-area] .da-close-wrap

Example

/* Make the "x" icon red */
#et-boc [data-da-area] .da-close-wrap .da-close {
 color: red;
}

/* Move the button to the top/right corner of the screen */
#et-boc [data-da-area] .da-close-wrap {
 width: 100vw;
}

Style individual Popups

All samples above will affect any Popup that’s present on the current page. In some cases, you want to change the close button of a single Popup without changing all the other Popups on your page or website.

This is possible by specifying the Area-ID in the CSS selector:

#et-boc [data-da-area="AREA-ID"] .da-close-wrap .da-close

For example: Your Popup is named #contact-form, then the correct selector is:

#et-boc [data-da-area="contact-form"] .da-close-wrap .da-close {
 color: red;
}

When designing a Popup using Divi Areas Pro, the Area ID is the numeric ID of your Area. That ID is displayed in various places. The best way to find it is via the section Divi Area > Trigger > Custom Triggers.

For example: Your Area ID is 1887, then the correct selector is:

#et-boc [data-da-area="divi-area-1887"] .da-close-wrap .da-close {
 color: red;
}

Where to put that CSS?

Finally, you need to know where to place that CSS exactly. There are several options for this, but we recommend to use Divis “Custom CSS” field:

• In wp-admin > Divi > Theme Options > Custom CSS
  • This applies the custom style to all Popups on your entire website. This is the place we recommend.
• Into your child-themes “style.css”
  • This applies the custom style to all Popups on your entire website.
  • In a single page. Click the “…” and the gear icon to open the “Page Settings” modal. Add the CSS to the Custom CSS field in the Advanced Tab
    • This applies the custom style to all Popups on that individual page.
  • Add a Code-Module on a single page with the CSS
    • This applies the custom style to all Popups on that individual page.
  • Add a Code-Module inside a Theme-Builder layout with the CSS
    • This applies the custom style to any page that uses the layout.
  • Add the CSS into a Code-Module inside an Area
    • More advanced option to style individual Popups.
    • When placing the CSS into a Popup section or Area, you should specify the Area-ID in the selector to avoid conflicts! See the selector “Style individual Popups” above.

Advanced changes

If you want to make more sophisticated changes to the button, you can also use the JS API hook area_close_button to modify the button. But for this tutorial, we will stick to CSS.