Share code xoay avatar cho johncms

[AdminAdmin is verified member.]

Code sau sẽ giúp wap johncms của bạn xoay avatar giống như VBB , phpp v.v

Cách làm như sau

Thêm đoạn này vào file style.css theme mà bạn mún xoay

.avatar img {
transition: all 15s ease;
-webkit-transition: all 15s ease;
-moz-transition: all 15s ease;
transition-delay: 5s;
-webkit-transition-delay: 5s;
-moz-transition-delay: 5s;
background-color: #FFFFFF;
max-width:143px;
border-radius:5px;
margin:1px 3px 3px 1px;
padding:3px;
border:1px solid #d4d4d4;
box-shadow: 3px 3px 3px #8A8A8A;
transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
}

.avatar img:hover {
transition: all 3s ease;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
position:relative;
}

Tiếp đến mở file index.php trong forum tìm đến

echo '<img src="../files/users/avatar/' . $res['user_id'] . '.png" width="32" height="32" alt="' . $res['from'] . '" />*';

Thay vào đó bằng

echo '<span class="avatar"><img src="../files/users/avatar/' . $res['user_id'] . '.png" width="32" height="32" alt="' . $res['from'] . '" /></span>*';

Tiêp tìm

echo '<img src="../images/empty.png" width="32" height="32" alt="' . $res['from'] . '" />*';

Thay vào code vừa tìm được

echo '<span class="avatar"><img src="../images/empty.png" width="32" height="32" alt="' . $res['from'] . '" /></span>*';

Demo : http://hanhphuc.mobi/

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