Bubble Colors. Can they be changed?

Support
#1

Hello!

When someone subscribes to one of my newsletters/ updates, a bubble similar to this appears:

When someone successfully adds a product to the cart, this appears:

Finally, when someone is checking out with their purchases, the following bubbles appear:

I’m wondering where I can change the settings for these colors? Blue and green don’t match my brand, so I’m hoping I can change them to a lighter shade of red. Or last resort, just plain white is okay.

Thank you very much!
-Nadia

#2

Hi Nadia,

Please try the code below in the Global CSS:


.x-alert-info {
    background-color: #d9edf7;
    border-color: #b3d1ef;
    color: #3a87ad;
}

.x-alert-success, .wpcf7-mail-sent-ok {
    background-color: #dff0d8;
    border-color: #c1dea8;
    color: #468847;
}

The .x-alert-info block control the colors for the blue bubble message and the x-alert-success and wpcf7-mail-sent-ok block is for the green bubble.

Kindly check the color values accordingly in the code.

Here are some related links for further reading:

Hope this helps.

#3

The code was a success! Worked perfectly :slight_smile:
Thanks so much for your help!!

#4

Sorry to bother you again, one last question!

If I’m in my “All products” tab and I add any item to the cart without going into the product itself, a window like this pops up.

Is there any way to change the green color to red so it can match my brand colors?

Thank you again for your time!

#5

Hello Nadia,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.x-cart-notification-icon.added {
    background-color: #9d251e !important;
}

Thanks.

#6

Thank you so much! It looks perfect now! I appreciate your help! :slight_smile:

#7

You are most welcome!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.