1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Round Avatar / Round Stats

Change Your Postbit Display

  1. Sheldon

    Sheldon Well-Known Member

    Sheldon submitted a new resource:

    Round Avatar / Round Stats - Change Your Postbit Display

    Read more about this resource...
     
    Dan likes this.
  2. Sheldon

    Sheldon Well-Known Member

    EXTRA.CSS

    Code:
    .messageUserInfo .messageUserBlock .avatar > img { border-radius: 50%; }
    
    .roundStats .fa {
      font-size: 30px;
      line-height: 37px;
      margin-left: -1px;
      margin-top: -1px;
      opacity: 0.25;
    }
    .roundStats .pairsInline {
      border: 1px solid #d5d5d5;
      border-radius: 100%;
      height: 36px;
      width: 36px;
    }
    .messageUserBlock .roundStats .roundTrophy { margin-left: 20px; overflow: hidden; }
    .messageUserBlock .roundStats .roundLike { margin-left: 5px; overflow: hidden; }
    .messageUserBlock .roundStats .roundMessage { margin-left: 20px; margin-top: -10px; overflow: hidden; }
    
    .roundStats .pairsInline > dd {
      color: #000000;
      display: block;
      margin-top: -24px;
      text-align: center;
    }
    .messageUserInfo .extraUserInfo.roundStats {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
      float: left;
      margin-left: -24px;
      margin-top: -2px;
      position: absolute;
    }
    .messageUserBlock .extraUserInfo { font-size: 11px; padding: 4px 6px; }
    

    Online Indicator CSS Changes:
    Code:
    /* PULSING INDICATOR */
    .messageUserBlock div.avatarHolder .onlineMarker {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
      border: medium none !important;
      border-radius: 50% !important;
      display: inline-block;
      height: 16px;
      margin: 81px 0 0 107px;
      width: 16px;
    }
     
    .messageUserBlock div.avatarHolder .onlineMarker:before
    {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      margin: 3px 0 0 3px;
      background: #7fb900;
      border-color: #7fb900;
      border-radius: 50%
    }
    
    .messageUserBlock div.avatarHolder .onlineMarker:after
    {
      content: '';
      position: absolute;
      width: 32px;
      height: 32px;
      margin: -9px 0 0 -9px;
      border: 1px solid #7fb900;
      border-radius: 50%;
      box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
      -webkit-transform: scale(0);
      -webkit-animation: online 2.5s ease-in-out infinite;
      animation: online 2.5s ease-in-out infinite
    }
    
    @-webkit-keyframes online
    {
      0% {opacity: 1;-webkit-transform: scale(0)}
      50% {opacity: .7}
      100% {opacity: 0;-webkit-transform: scale(1)}
    }
    
    @keyframes online
    {
      0% {opacity: 1;transform: scale(0)}
      50% {opacity: .7}
      100% {opacity: 0;transform: scale(1)}
    }
    
     
    bousaid likes this.
  3. The Forum Heroes

    The Forum Heroes Well-Known Member

    Thanks for sharing this again! Could you include how to do it to the right side as well, like how xenAdmin use to have.
     
    oO5 Dynasty likes this.
  4. oO5 Dynasty

    oO5 Dynasty Active Member

    I totally agree, because when he had it on both left and right i was like yoooooo thats the **** lol.
     
    The Forum Heroes likes this.
  5. oO5 Dynasty

    oO5 Dynasty Active Member

    Thanks for sharing and i cant wait to put this on my board. Thank you
     
  6. Sami Jalal

    Sami Jalal Well-Known Member

    Very nice modification :)
     
  7. very nice modification - does anyone know if it works on 1.5?
     
  8. oO5 Dynasty

    oO5 Dynasty Active Member

    i am still using it
     
    maszd likes this.
  9. Will this run smoothly on most styles?
    The note at the bottom specified the xenforo defult style.
     
  10. Magpie Mafia

    Magpie Mafia New Member

    I have this added to my new forum - unfortunately we have a dark theme and so the icons are not actually showing up. Anyone have any tips for this on how to fix it?
     
  11. TsinJu

    TsinJu Well-Known Member

    Anyone using this with the Core Style from @pixelExit.com. Everything is fine except the Avatar itself is still a Square.
     
    Last edited: Nov 21, 2016

Share This Page