Sales notification, custom background-color

Ask the Community Customization
1

I’m looking for CSS for the sales notification background-color. I would like to be have the ability to change each notification background
if I have multiple notifications within one widget.

thank you!

1 Like
3

Hi @Shawn_Martin :wave:

Your request is with our devs! I’ll update you on Monday :wink:

4

Thank you for waiting. @Shawn_Martin!

To change the background of the specific notifications, please follow these steps:

Open the needed notification and choose Code Editor mode in the Message field

image
image322×759 15.9 KB


Paste the custom code to change the background color 
<style>
  [class*='notification__NotificationContainer-sc'] {
    background-color: #1f4497;
  }
</style>

image
image3600×1958 246 KB


Try it out and let me know if it helped :slightly_smiling_face:

1 Like
5

That’s awesome Max! Thank you! What other elements can I add css to in the widget? I would also like to change the button color for sure?

Can you provide that code?

Thanks!

Shawn Martin
FanYourLocal

1 Like
6

@Shawn_Martin Here is the code for changing the background color and text color of the notification time and notification text:

<style>
  [class*="content__Time-sc"] {
    color: red;
    background-color: white;
  }
[class*="content__Message-sc"] {
  background-color: green;
  color: pink;
}
</style>

As for changing the button color, I’ve shared this request with the devs and will update you tomorrow :slightly_smiling_face:

7

Works great…how about the CTA Button?

Are you planning on adding this to the CSS Codes section in the Community? I was surprised to see that there are 0 mentions of this widget for CSS.

Thanks Max!

Shawn Martin
FanYourLocal

1 Like
8

Our devs will come up with a solution for the CTA button, and I’ll share the code tomorrow!

As for the CSS Codes category, the thing is that we had few customization requests for this app. However, we’re going to create this category and add new solutions there in the near future :slightly_smiling_face:

9

Awesome! One more ask….

Do you have CSS Code to change background-color for individual badges on the Store Locator widget?

Thanks do all the help Max!

Shawn Martin
FanYourLocal

10

https://community.elfsight.com/t/change-color-of-each-badge-text-and-background/53861/2?u=sina

11

Thanks for the code Max but unfortunately as you change location the order changes so the color doesn’t of the badge changes to the order based on the current nth child.

Is there a solution for this? I want the color to follow the listing no matter the order.

Thank you,

Shawn Martin
FanYourLocal

1 Like
12

To change the button color in Sales Notification, you should add this code inside the style tag:

[class*='ButtonBase__ButtonContainer-sc'] {
  background-color: red!important;
}

As for the badge color, the CSS code Sina shared above is the only solution for now.

13

Hey Max,

Is there a way to add the css for the badge for each location through the location information code editor? What is the css a badge?

1 Like
14

You’re right, sorry about missing that!

Here is the code:

<style>
  [class*='badge__StyledBadge-sc'] {
	background-color: gold;
	color: black;
}
</style>