Categories
active arrowAccount
active arrowGetting Started
active arrowCampaign Builder
active arrowAdvanced Design Customization
active arrowEmail Campaign Customization
active arrowSegment & Targeting
active arrowAnalytics
active arrowShopify
active arrowEmail Marketing and CRM Integrations
active arrowCan I Add Custom CSS to My Popup?
active arrowHow to Change Column Grid Size of Popup by Using Custom CSS
active arrowAdding Custom CSS to Elements
active arrowArranging Close Button Size and Position by Custom CSS
active arrowChanging the Default Padding of The Popup by Using Custom CSS
active arrowDetermining Margins and Resize Popups and Teasers by Using Custom CSS
active arrowChanging Popup Background Colors Individually
active arrowRemoving Drop Shadow from Popups with Custom CSS
active arrowHow to use Custom CSS for Customizing Gamification Elements?

Removing Drop Shadow from Popups with Custom CSS

This guide explains how to eliminate the drop shadow from popup elements on your website by using custom CSS.

Before we start:

  • There should not be any space between page ID and device type.
  • There should be a space between "block" and the previous definitions.
  • If you don’t specify the device type, changes will apply to all.

1. Let’s change our popup’s first step’s backdrop shadow on the desktop only. For this, right-click your popup and copy “data-page-id” and “data-device-type” in the box brackets.

custom css box in the Popupsmart's popup builder
[data-page-id="39d21b4b"][data-device-type="desktop"]

2. Later, write “box-shadow:none” to remove the shadow completely.

[data-page-id="39d21b4b"][data-device-type="desktop"]
{
  box-shadow:none;
}

3. Now, let’s remove the second step’s shadow. For this, click on the second step to see your second step popup; right-click the popup and add data-page-id and data-device-type to Custom CSS.

Success Popup Customization Step in the Popupsmart's popup builder
Pointing data page id and device type in the inspect tool
[data-page-id="818069e2"][data-page-id="818069e2"]

4. Add “box-shadow:none” to a new line and remove the shadow completely from the second step.

custom css example to remove drop shadow

For this kind of change, you can use the code below by changing its page and block id:

[data-page-id="39d21b4b"][data-device-type="desktop"]
{
  box-shadow:none;
}
[data-page-id="818069e2"][data-page-id="818069e2"]
{
  box-shadow:none;
}
💡 Note: Make sure your CSS is correctly formatted. Once you complete all the settings, save and publish the popup. Do not forget to turn the status toggle on to make your popup visible on your website.

Do you have additional questions about how to add custom CSS to your popup? Contact Us!