BuddyBoss Home – Web Support Forums Themes OneSocial theme Change notification to bubble with number

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Question

    #66377
    @costyclan

    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.

    Answers

    #66412
    @anve

    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

    #66852
    @costyclan

    @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

    #66859
    @anve

    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
    }

    #66861
    @anve

    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

    #66877
    @costyclan

    thanks @anve

    #66878
    @anve

    Hi @costyclan ,

    Glad it worked 🙂

    Regards
    Anve

Viewing 7 posts - 1 through 7 (of 7 total)
  • The question ‘Change notification to bubble with number’ is closed to new replies.