Hướng dẫn Thay đổi chỉ thị On-Offline thành dạng tròn

[PVS]

Thay đổi chỉ thị On-Offline thành dạng tròn

Bài viết này sẽ hướng dẫn các bạn thay đổi chỉ thị hiển thị online/offline của thành viên trong diễn đàn. Thay đổi từ dạng default sang dạng hình tròn nhé.

​

Cách làm: chèn đoạn code sau vào template Extra.css

/* 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)}
}

Lưu lại là xong.

Chúc các bạn thành công.

Nguồn: xfteam.net​