Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy
click để tìm bản mới hơn
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
Lưu lại là xong.
Chúc các bạn thành công.
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é.
Mã:
/* 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
Bài viết liên quan
Bài viết mới