How do I style the notification counter in web component?
How do I style the notification counter in web component?
43 Replies
@rahul
Can you please share screenshot what you want to style?
Notification counter circle is covering the bell
@Pawan Jain How to reduce its size
And also can we change the bell icon in web component? If yes, how to do it?
@Emil ?
@rahul, you just advanced to level 1!
@rahul What notification center are you using?
Is it the new <Inbox /> or the old notification center?
old one
bellButton: {
root: {
dot: {
width: '12px !important',
height: '12px !important'
},
svg: {
width: '20px !important',
height: '20px !important'
}
}
}
I have tried this but didn't work @Emil
What do you want to change? The icon it self? Or just the way it looks?
Currently I want to change the red dot size
I want to make it smaller
Tell me if it helps
No, it didn't work
which component should i use in this?
I think it's the
unseenBadge
Can you share all your notification center design code?I m trying in sandbox
https://codesandbox.io/p/sandbox/novu-web-component-esm-rltcr5?file=%2Findex.js
Tell me how it's going
I have changed the size of the bell icon to 20px
Is it good?
The size has changed but i m not able to change the red dot size
@rahul, you just advanced to level 2!
nc.styles = {
footer: {
root: { display: "none" },
},
bellButton: {
root: {
svg: {
width: "20px !important",
height: "20px !important",
},
},
dot: {
rect: {
fill: "red",
width: "10px",
height: "10px",
x: 6,
y: 2,
},
},
},
};
Did you try?
@Pawan Jain Maybe I'm missing something?
@Emil With this I m able to resize the dot
dot: {
rect: {
fill: "red",
width: "10px",
height: "10px",
x: 6,
y: 2,
},
@Emil Can change the color of dot?
@rahul
Try changing
fill : red to another color@Pawan Jain Something black is their
did you change it to
fill: blackno Its still red
What should I do?
@Pawan Jain @Emil ?
Hey Rahul
Give me some time. I will check out this later today
Okay @Pawan Jain
@Emil @Pawan Jain Can we change the bell icon with any other icon?
Any update on this?
Yes, you can use custom bell
https://v0.x-docs.novu.co/notification-center/client/react/customization#implementing-custom-bell-icon
Can we also do it in web-component? @Pawan Jain @Emil
Unfortunately, it is not possible to change in web component
Can we have fill version of bell icon?
@rahul, you just advanced to level 3!
@Pawan Jain
@rahul
I tried changing fill color, Its working for me
Are you facing any issue?
how can I do it? @Pawan Jain
change the color
fill : "blue"Under which object should I add fill element?
Are you referring to bell icon?
@rahul Was it solved for you? Have you manage to achive your goal?
ya @empe. Thanks
@rahul Can we mark this support post as resolved?
yes