# Change Online (x) text to pulsing green dot

**URL:** <https://meta.discourse.org/t/change-online-x-text-to-pulsing-green-dot/197477>\
**Category:** Extras\
**Tags:** whos-online\
**Created:** [July 17, 2021, 8:17pm UTC](https://meta.discourse.org/t/change-online-x-text-to-pulsing-green-dot/197477 "2021-07-17T20:17:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [July 17, 2021, 8:17pm UTC](https://meta.discourse.org/t/change-online-x-text-to-pulsing-green-dot/197477/1 "2021-07-17T20:17:51Z")

</div>

Hello,

I made a little modification with [Who’s Online Plugin](https://meta.discourse.org/t/whos-online-plugin-discourse-whos-online/52345). This will change the **Online (x)** with a pulsing green dot.

**Original**  
 ![Screenshot 2021-07-17 at 21.59.08](https://global.discourse-cdn.com/meta/original/3X/a/7/a752eb9ae5fa1f651164f8f0e95d7fedfccca957.png)

**Custom**  
 ![Jul-17-2021 22-05-29](https://global.discourse-cdn.com/meta/original/3X/2/f/2f413b7a31fc344cdcecb7a103cdfbe8cdf32f23.gif)

1. Change the **js.whos\_online.title** default `Online ({{count}})` text in `/admin/customize/site_texts` to` {{count}}`
2. Add css… ⬇

To `/admin/customize/themes/`

```plaintext
#whos-online {
  display: inline-flex;
  align-items: center;
  color: var(--primary-high);
  padding: 0.75em 2em 0.75em 1em;
  &.collapsed { 
    a {
      margin-left: 0.35em;
    }
    &:hover a {
      margin-left: 0.35em;
      &:first-of-type {
        margin-left: 0.35em;
      }
    }
  }
  a {
    margin-left: 0.35em;
  }
  span {
    display: inline-flex;
    align-items: center;
    margin-left: 1em;
    margin-right: 0.15em;
    font-weight: 600;
    &:before {
      content: '';
      width: 15px;
      height: 15px;
      margin-left: -1.4em;
      margin-right: 0.5em;
      background-color: #62bd19;
      border-radius: 50%;
      animation: online 1s ease-out;
      -moz-animation: online 1s ease-out;
      -webkit-animation: online 1s ease-out;
      animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
  }
}
@keyframes online {
  0% {transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
@-moz-keyframes online {
  0% {-moz-transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-moz-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@-webkit-keyframes online {
  0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

```