Change Online (x) text to pulsing green dot

Plugin Extras
1

Hello,

I made a little modification with Who’s Online Plugin. This will change the Online (x) with a pulsing green dot.

Original
Screenshot 2021-07-17 at 21.59.08

Custom
Jul-17-2021 22-05-29

  1. Change the js.whos_online.title default Online ({{count}}) text in /admin/customize/site_texts to {{count}}
  2. Add css… :arrow_down:

To /admin/customize/themes/

#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;}
}
13 Likes