Background color of newsletter

Store Design
1

how do i change color of newsletter popup background in desktop and mobile view

required color code is F2EFDD

store url : https://dms77avniapij879-56680546493.shopifypreview.com

kashifjohn_0-1718192824033.png
kashifjohn_0-1718192824033.png1072Ă—523 543 KB

kashifjohn_0-1718193020991.png
kashifjohn_0-1718193020991.png572Ă—475 42.2 KB

2

@Spac-es

3

Hi @kashifjohn

  1. Go to theme editor

  2. Search “component-newsletter.css”

  3. Paste this code in component-newsletter.css

  4. Save it.

.halo-popup-wrapper .overflow {
    background: #F2EFDD;
}

I hope this will work. If yes, mark my solution as accepted and like it.

Regards,

Team_OSC

4

@kashifjohn - add this css to the very end of your base.css file and check

.halo-popup-wrapper .overflow {background-color: #F2EFDD;}
5

Hello @kashifjohn
Step 1: Go to Shopify Admin ----------------> Online Store ----------->Theme ---------------> Edit code------------> find “base.css” file and go to line number 1024
find this CSS

.background-overlay, .background-overlay1 {
    position: fixed;
    background-color: #232323cc;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    display: block !important;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-long) ease;
}

and Replace with this css.

.background-overlay, .background-overlay1 {
    position: fixed;
    background-color: #F2EFDD;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    display: block !important;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-long) ease;
}

Please let me know
Thanks

6

Hi @kashifjohn

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.halo-popup-wrapper .overflow {
background-color: #F2EFDD;
}

ZestardTech_0-1718194620358.png
ZestardTech_0-1718194620358.png1701Ă—645 172 KB

7

Hi @kashifjohn

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.