Change notification to bubble with number

[Carly]

Is it possible to change the notification to a bubble with a number rather than just a dot. I use fairly monochromatic styling so the notification does not stand out enough I am afraid. I would like to try either a black or red bubble with white text for the number. See screenshot.

[Anve S.]

Hi @csotyclan,

Try adding following css in child theme custom css option .

@media screen and (min-width:481px){
#user-messages .count > b,#all-notificatios .pending-count > b {
  background-color: #000;
  border-radius: 16px;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  padding: 0 4px;
  position: absolute;
  right: 14px;
  top: 16px;
}
}

Regards
Anve

[Carly]

@anve that has added the bubble but the original small dot is still visible. Can you please assist with further code to make this look better? (screenshot attached)
Thank you kindly

[Anve S.]

Hi @costyclan,

Please try adding following css in child theme custom css option.

@media screen and (min-width:481px){
.header-notifications #user-messages span.count::before {
  content: "u" !important;
}
.header-notifications .notification-link span:before {
  content: "I"!important;
}

Regards
Anve
}

[Anve S.]

Hi @costyclan ,

Sorry mistyped, add following css .

@media screen and (min-width:481px){
.header-notifications #user-messages span.count::before {
  content: "u" !important;
}
.header-notifications .notification-link span:before {
  content: "I"!important;
}
}

Regards
Anve

[Carly]

thanks @anve

[Anve S.]

Hi @costyclan ,

Glad it worked 🙂

Regards
Anve