Đóng khung avatar bằng css

[Eagle8x]

Dạo web 1 vòng kiếm được đoạn code hay thế là chia sẻ anh em ngay kẻo nguội mất.
Cơ bản chỉ dùng cho version nào thay đổi được template.

Bước 1: Vào ACP Template view topic body tìm chỗ AVATAR thêm :

Code:

<span class="avatarcp">{postrow.displayed.POSTER_AVATAR}</span>

Bước 2: Vào ACP Display Colors CSS thêm đoạn code sau:

Code:

span.avatarcp img {
                max-width:110px;
      background-color:beige;
      border:1px solid #FFCC33;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border-radius:5px;
      padding:8px;
      -webkit-transform: rotate(-4deg);
      -moz-transform: rotate(-4deg);
      transform: rotate(-4deg);
      -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
      -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
      box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   }

Code gốc không có max-width, mình thêm vô. Còn bên dưới là các thuộc tính mà các bạn có thể thay đổi được để ra cái khung hoành tráng hơn .

Bạn nào chế ra được khung đẹp thì post lên để mọi người cùng xài nhé

Nhờ phutu và code đã được cải tiến : Khi rê chuột vào thì nó ngay ngắn lại

Code:

span.avatarcp img:hover {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
}

Và để nó hiện trong forum dạng blog thì thêm .blog_comment-avatar img
Cụ thể như sau:

Code:


.blog_comment-avatar img, span.avatar1 img {
   max-width:110px;
   background-color:beige;
   border:1px solid #FFCC33;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   padding:8px;
   -webkit-transform: rotate(-4deg);
   -moz-transform: rotate(-4deg);
   transform: rotate(-4deg);
   -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   box-shadow:2px 2px 10px rgba(0,0,0,0.2)
}
.blog_comment-avatar img:hover, span.avatar1 img:hover{
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   transform: rotate(0deg)}

[lee196]

k hiểu lắm anh ơi....thêm vào ckỗ AVARTA??

Code:

<span class="avatarcp">{...cái gì đó AVATAR}</span>

[Eagle8x]

Vô tới view topic body dùng chức năng search của trình duyệt với từ khóa AVATAR là ra thôi

[dothinh]

cái này hay ghê ah` nha

[lee196]

Vô tới view topic body dùng chức năng search của trình duyệt với từ khóa AVATAR là ra thôi

Hix hix ...nhưg mà làm j có

Code:

<style>.ytb-1{background: transparent  url(http://i24.servimg.com/u/f24/16/04/03/80/zoomin10.gif) no-repeat;height: 32px; width: 32px;}.ytb-2{background: transparent  url(http://i24.servimg.com/u/f24/16/04/03/80/zoomou11.gif) no-repeat;height: 32px; width: 32px;}.bytbv{width: 640px; height: 390px;}</style><script type="text/javascript">$(function(){
$('<div id="bvvi" class="ytb-1"></div>').insertBefore('.postbody embed:eq(0)');$('#bvvi').click(function() {$(this).toggleClass('ytb-2');$('.postbody embed').toggleClass('bytbv');});
});</script>
<script type="text/javascript">
//<![CDATA[
var postno = 0 multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
  _atc.cwait = 0;
  $('.addthis_button').mouseup(function(){
      if ($('#at15s').css('display') == 'block') {
        addthis_close();
        addthis_close();
      }
  });
});
//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
  <tr>
      <td align="left" valign="middle" nowrap="nowrap">
        <span class="nav">
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
        <!-- END switch_user_authreply -->
        </span>
      </td>
     
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
        <span class="gensmall bold">
            <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
            |
            <script type="text/javascript">
            //<![CDATA[
            insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
        </span>
      </td>
  </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr align="right">
      <td class="catHead" colspan="3" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint"> </td>
              <td align="center" nowrap="nowrap" class="t-title"><h1 class="cattitle"> <!-- google_ad_section_start -->{TOPIC_TITLE}<!-- google_ad_section_end --></h1></td>
              <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
            </tr>
        </table>
      </td>
  </tr>

<center><table class="forumline" width="98%" border="0" cellspacing="0" cellpadding="0"></table></center><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="padding: 1px"></div> </td></tr>
<tr><td style="padding: 0px; background-color: #ffffff;">

  <tr>
      <td class="alt1" colspan="2" align="right" valign="top"><span class="smallfont">{PAGINATION}</span></td>
  </tr></table>
<!-- BEGIN postrow -->

  <!-- BEGIN displayed -->
<div align="center">
  <div class="page" style="width:940px; text-align:left">
      <div style="padding:0px 0px 0px 0px" align="left">

  <div id="edit126211" style="padding:0px 0px 6px 0px">
  <!-- this is not the last post shown on the page -->



<table class="tborder" id="post126211" cellpadding="6" cellspacing="0" border="0" width="100%" align="center" >
<tr>
  <td class="toppostbit" >
      <div class="normal" style="float:right">
       
        <strong><a href="{postrow.displayed.POST_URL}"><b>#{postrow.displayed.COUNT_POSTS}</b></a></a></strong>
       
       
       
       
       
      </div>

      <div class="normal">
        <!-- status icon and date -->
       
       
            <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}
       
       
        <!-- / status icon and date -->
      </div>
  </td>
</tr>
<tr>
  <td class="alt3" style="padding:0px">
      <!-- user info -->
      <table cellpadding="0" cellspacing="6" border="0" width="100%">
      <tr>

      <!--  avatar -->
       
        <td valign="bottom">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/topleftconner.gif" width="18" height="2" /></td>
              <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/top.gif" style="background-repeat:repeat-x"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/top.gif"/></td>
              <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/toprightconner-1.gif" width="4" height="2" /></td>
              </tr>
              <tr>
              <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/left.gif" style="background-position:right; background-repeat:repeat-y" valign="bottom" align="right"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/left.gif" /></td>
              <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/box.gif" style="padding: 4px 4px 4px 4px"> {postrow.displayed.POSTER_AVATAR}</td>
              <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/right.gif" style="background-position:left; background-repeat:repeat-y"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/right.gif" /></td>
              </tr>
              <tr>
              <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottomleftconnergif.gif" width="18" height="6" /></td>
              <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottom.gif" style="background-repeat:repeat-x"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottom.gif"/></td>
              <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottomrightconnergif.gif" width="4" height="6" /></td>
              </tr>
            </table>
        </td>       
       
       
      <!-- / avatar --> 
        <td width="100%" align="left">
       
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <!--  blash --> 
           
            <tr>
              <td colspan="3">
             
                  <table border="0" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                    <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/topleftconner.gif" width="18" height="2" /></td>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/top.gif" style="background-repeat:repeat-x"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/top.gif" width="205" height="2" /></td>
                    <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/toprightconner-1.gif" width="4" height="2" /></td>
                    </tr>
                    <tr>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/left.gif" style="background-position:right; background-repeat:repeat-y" valign="bottom" align="right"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/arrow-1.gif" /></td>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/box.gif" style="padding: 10px 10px 10px 10px" width="100%"><center><font face="Comic Sans MS" color="blue">{postrow.displayed.POSTER_FROM}</font></center></td>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/right.gif" style="background-position:left; background-repeat:repeat-y"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/right.gif"/></td>
                    </tr>
                    <tr>
                    <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottomleftconnergif.gif" width="18" height="6" /></td>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottom.gif" style="background-repeat:repeat-x"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottom.gif" width="205" height="6" /></td>
                    <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottomrightconnergif.gif" width="4" height="6" /></td>
                    </tr>
                  </table>             
             
             
              </td>
              </tr>
           
            <!-- / blash --> 
              <tr>
              <td>
              <!--  username -->
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                    <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/topleftconner.gif" width="18" height="2" /></td>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/top.gif" style="background-repeat:repeat-x"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/top.gif" /></td>
                    <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/toprightconner-1.gif" width="4" height="2" /></td>
                    </tr>
                    <tr>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/left.gif" style="background-position:right; background-repeat:repeat-y" valign="bottom"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/arrow-1.gif" width="18" height="35" /></td>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/box.gif" nowrap="nowrap" style="padding: 10px 10px 10px 10px">
                        <div id="postmenu_126211">
                        <a name="{postrow.displayed.U_POST_ID}"></a><b>{postrow.displayed.POSTER_NAME}<div style="background:
url(http://i62.servimg.com/u/f62/14/52/40/23/user_o11.gif); height:
15px; width: 38px; border:
0px;display:inline-block;">{postrow.displayed.ONLINE_IMG}</div></b>
                       
     
       

                          <script type="text/javascript"> vbmenu_register("postmenu_126211", true); </script>
                         
                        </div>

                    </div><b><font color="red">  <div class="smallfont">{postrow.displayed.POSTER_RANK}</div></font>
                        <div class="smallfont" align="right">{postrow.displayed.RANK_IMAGE}</b>
                      <div class="fmlevel" align="left">
<span style="font-size:11px;font-family:Tahoma;font-weight:normal; display: none;">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span></div>
                                                                                                     
                   
                    </td>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/right.gif" style="background-position:left; background-repeat:repeat-y"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/right.gif" width="4" height="97" /></td>
                    </tr>
                    <tr>
                    <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottomleftconnergif.gif" width="18" height="6" /></td>
                    <td background="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottom.gif" style="background-repeat:repeat-x"><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottom.gif" /></td>
                    <td><img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/bottomrightconnergif.gif" width="4" height="6" /></td>
                    </tr>
                  </table>
              <!-- / username -->
              </td>
              <td width="100%"> </td>
              <td valign="top" nowrap="nowrap">
              <!-- / info -->
                          <div>

  <!-- BEGIN profile_field --><font size="1" face="Comic Sans Ms">
                    <b>{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</font>
         
 <!-- END profile_field -->
         
           
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.WWW_IMG}

{postrow.displayed.AIM_IMG} {postrow.displayed.YIM_IMG} {postrow.displayed.MSN_IMG} {postrow.displayed.SKYPE_IMG}

        </span>

</div>
              <!-- / info -->
             
              </td>
              </tr>
            </table>

           
        </td>
      </tr>
           
      </table>
      <!-- / user info -->

  </td>
</tr>
<tr>
 
  <td class="alt1" id="td_post_126211">
     
  <!-- message, attachments, sig -->

     

     
        <!-- icon and title -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <td background="http://i22.servimg.com/u/f22/15/52/69/03/luu10.gif" valign="top" colspan="2">


<span class="smallfont"><img src="http://r22.imgfast.net/users/2211/12/43/96/album/post_n10.gif" alt="{postrow.displayed.L_MINI_POST_ALT}"

title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: <b>{postrow.displayed.POST_SUBJECT}</b></span></td>
           
        </table>
        <hr size="1" style="color:#FFFFFF; background-color:#FFFFFF" />
        <!-- / icon and title -->
     

      <!-- message -->
      <div>

                    <div class="postbody"><dl>{postrow.displayed.MESSAGE}</div>
<div class="clear"></div>
<!-- BEGIN switch_attachments -->
<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd>
<!-- BEGIN switch_post_attachments -->
<dl class="file">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

<!-- BEGIN switch_dl_att -->
<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
<!-- END switch_dl_att -->

<!-- BEGIN switch_no_dl_att -->
{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT}
<!-- END switch_no_dl_att -->
</dt>

<!-- BEGIN switch_no_comment -->
<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
</dd>
<!-- END switch_no_comment -->

<!-- BEGIN switch_no_dl_att -->
<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</em>
</dd>
<!-- END switch_no_dl_att -->

<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
</dl>
<!-- END switch_post_attachments -->
</dd>
</dl>
<!-- END switch_attachments -->
<div class="clear"></div>
      <!-- / message -->

     

     
     

     
      <!-- sig -->
      <div>
<img src="http://i737.photobucket.com/albums/xx20/KhUnNiE0608/View%20topic/sign.gif" />
           


<div style="margin: 0px; padding: 5px; overflow: auto; max-height: 200px; max-width: 100%;">
            {postrow.displayed.SIGNATURE}
                    </div></div>
        </div>
      <!-- / sig -->
      <span class="smallfont"><fieldset><legend><span style=width:100;height:30;text-align:center;color:black;filter:glow(color=##56CDE0)><b>Tài sản</b></span></a> </strong></span></legend> <table cellspacing="1" cellpadding="0" border="0" onclick="if(this.getElementsByTagName('td')[1].style.display == 'none'){ this.getElementsByTagName('td')[1].style.display = '';this.getElementsByTagName('td')[2].style.display = 'none'; }else{ this.getElementsByTagName('td')[1].style.display = 'none';this.getElementsByTagName('td')[2].style.display = '';}" style="cursor: pointer;"><tr><td><span class="genmed"></td></tr><tr><td class="smallfont" style="display: '';">Xem tài sản của <strong>{postrow.displayed.POSTER_NAME}</strong></td><td style="display: none;">  <span class="postdetails poster-profile"><span style="white-space:nowrap;"><span style="color:#0593FF;"></span></span>
             
<font color=white>{postrow.displayed.POSTER_RPG}</font>

</span>  </td></tr></table></fieldset></span>

     

     

      <!-- controls -->
<div align="left" width="100%">
<!-- BEGIN switch_vote_active -->   


 
<b><font color=red>Số lần được cảm ơn :</font></b> <b><font color=#000000>{postrow.displayed.switch_vote_active.L_VOTE_TITLE}</font></b>


  <!-- END switch_vote_active --></div>
        </div>
 
 
      <div align="right" width="100%">
<!-- BEGIN switch_vote_active -->   
<!-- BEGIN switch_vote -->
                            <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="http://i248.photobucket.com/albums/gg170/robot_boy18/001_18.png" title="Cảm ơn vì bài viết hay" alt="Cảm ơn vì bài viết hay" /></a></div>
                            <!-- END switch_vote -->
 <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"><img src="http://i248.photobucket.com/albums/gg170/robot_boy18/001_19.png" title="Bài viết không tốt" alt="Bài viết không tốt" /></a></div>
                    <!-- END switch_vote -->

 



  <!-- END switch_vote_active -->

        {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG}  {postrow.displayed.EDIT_IMG}  {postrow.displayed.DELETE_IMG}  {postrow.displayed.IP_IMG}  {postrow.displayed.REPORT_IMG}</div>
     
     
       
       
       
       
       
       
           
       
       
        <!-- / controls -->


  </td>
</tr>
</table>



 
     
  </div>
</div>


  <!-- END displayed -->
  <!-- BEGIN hidden -->
<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
  </tr></table>

  <!-- END hidden -->
  <!-- END postrow -->

  <!-- BEGIN no_post -->
<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr align="center">
      <td colspan="2" height="28">
        <span class="smallfont">{no_post.L_NO_POST}</span>
      </td>
  </tr></table>
  <!-- END no_post -->
 

<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr align="right">
      <td class="tfoot" colspan="2" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint"> </td>
              <td align="center" nowrap="nowrap" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
              <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
        </table>
      </td>
  </tr>
</table>

<table class="forumline noprint" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
  </tr>
  <!-- BEGIN switch_user_logged_in -->
  <!-- BEGIN watchtopic -->
  <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
  </tr>
  <!-- END watchtopic -->
  <!-- END switch_user_logged_in -->
    <TR>
          <TD Width = "20%"  Align = "left" Valign = "top" bgcolor = "#FFFFFF"></TD>
          <TD Width = "80%"  Align = "left" Valign = "top" bgcolor = "#FFFFFF">
<div style=" overflow:hidden; width:100%; height:170px;">
<font face = "Times New Roman" size = "4" color = "#000080"><B>Xem tiếp các bài mới nhất:</B></font>
<script src="http://feeds.feedburner.com/weAre9d?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/weAre9d"></a><br/>Powered by FeedBurner</p> </noscript></div>
<font face = "Times New Roman" size = "4" color = "#000080"><B>Trả lời nhanh:</B> </font>
          </TD>
    </TR>
</br>
<center>
        <img src="http://i913.photobucket.com/albums/ac332/battuvuong/baivongforum/anhso-10.jpg"></center>
</div></font></center>
<tr bgcolor="#FFFFFF">
 <center>
        </center>
</div><div align="center">
    <td  colspan="2" align="center" style="padding:0px" width="100%>
   

 <!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
      {QUICK_REPLY_FORM}

      <!-- END switch_user_logged_in -->
  </td>
</tr>
 
 
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
        <td class="tfoot" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a

class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="smallfont"><a

href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>


</table>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>

<td align="left" valign="middle" nowrap="nowrap">
        <span class="nav">
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
        <!-- END switch_user_authreply -->
        </span>
      </td>

     
      <!-- BEGIN viewtopic_bottom -->
      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
      <!-- END viewtopic_bottom -->
      <!-- BEGIN moderation_panel -->
      <td align="center">
        <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
        <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
  </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap">
{S_TOPIC_ADMIN}

        <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />
            <input type="hidden" name="sid" value="{S_SID}" />
            <span class="gen">{L_MOD_TOOLS}
{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
        </form>
      </td>
  </tr>
</table>
<!-- END viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"><tr><td class="genmed" width="25%"><br><br><br><br><fieldset><font face="tahoma"><b>Quyền của bạn</b><a href="#top" style="float: right;"><img src="http://i62.servimg.com/u/f62/14/52/40/23/top11.gif" alt="Về Đầu Trang" /></a><hr></font><!-- BEGIN show_permissions --><span class="smallfont">{S_AUTH_LIST}</span></td><!-- END show_permissions --></fieldset></td><td align="right" valign="top" nowrap="nowrap" width="100%"></td></tr></table>


<script type="text/javascript">
<!--
function exec_refresh()
{
  myvar = myvar + ' .';
  var timerID = setTimeout('exec_refresh();', 20);
  if (timeout > 0)
  {
      timeout -= 1;
  }
  else
  {
      clearTimeout(timerID);
      window.status = '';
  window.location.reload();
 
  }
}

var myvar = '';
var timeout = 50;
//-->
</script>
<iframe name="thanks" height="0" width="0" frameborder="0"></iframe>
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->


Anh xem hộ em đi:(

[baivong]

Code:

<span class="avatarcp">{...cái gì đó AVATAR}</span>

HOT

[dothinh]

Code:

http://www.lethanhton.tk/t885-topic

Đã áp dụng thử, tuyệt lắm

[mkkpro199x]

rất hay .. thank bạn rất nhiều

[Sét]

lee196
đây bạn.

Code:

<span class="avatarcp">{postrow.displayed.POSTER_AVATAR}</span>

[anhchienxdd2]

Sao Em cũng làm thế nhưng Avatar nó không động động như Chinh phục nhỉ?

[maiquang]

phpBB3 có làm được ko?

[nguyenhieu2303]

bạn vô Vào ACP > Template > view topic body tìm thẻ {postrow.displayed.POSTER_AVATAR}
thay bằng:
<span style="margin-left:30px" class="avatarcp">{postrow.displayed.POSTER_AVATAR}</span>
rồi cái CSS ở trên.
trong đó style="margin-left:30px" là khoảng cách từ lề trái vào đến avatar

[phutu01]

của cp rê chuột vào
nó lại ngay hình lại thêm gì thế

a được rồi

Code:

span.avatarcp:hover img {
                    max-width:110px;
      background-color:beige;
      border:1px solid #FFCC33;
      -moz-border-radius:1px;
      -webkit-border-radius:5px;
      border-radius:5px;
      padding:2px;
      -webkit-transform: rotate(-4\1deg);
      -moz-transform: rotate(-1deg);
      transform: rotate(-1deg);
      -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
      -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
      box-shadow:2px 2px 10px rgba(0,0,0,0.2);
    }

[Tuấn]

Anh Ea chỉ cách cho hình nó ngay lại giống đi

[phutu01]

Anh Ea chỉ cách cho hình nó ngay lại giống đi

chèn thêm cái này vào css

Code:

span.avatarcp:hover img {
                    max-width:110px;
      background-color:beige;
      border:1px solid #FFCC33;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border-radius:5px;
      padding:2px;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
      -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
      -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
      box-shadow:2px 2px 10px rgba(0,0,0,0.2);
    }

[Tuấn]

Ý mình là khi đưa chuột vào thì nó thẳng lại chứ không phải như vậy

[Việt]

thêm vào css

Code:

span.avatarcp img:hover {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
}

[Tuấn]

Làm được rồi, Thank nhiều. Vote rồi đó

[quangtrung_it]

Hay lắm.

[lee196]

hic sao k được:(

[Eagle8x]

Đã cập nhật thêm các chi tiết từ các bạn bên dưới để code hoàn thiện hơn

[Khách v]

đẹp ghê. thanks mọi người

Code:

http://c1pro.123.st/t241-topic#723

[lee196]

Thêm

Code:

<span class="avatarcp">{postrow.displayed.POSTER_AVATAR}</span>

Vào sau Avatar ạ???nói khó hiểu qá

[Sét]

ây da....bạn vào viewtopic rồi kiếm cái code:

Code:

{postrow.displayed.POSTER_AVATAR}

và thay nó bằng:

Code:

<span class="avatarcp">{postrow.displayed.POSTER_AVATAR}</span>

...thiệt là

[quangtrung_it]

hay thật

[Sấm]

hay thật

Không spam nhé. Ở trên tớ đã thấy cậu bình luận rồi

[truonghuy89]

Cái này IE 9 mới hiện, dưới nó ra hình vuông

[[D]ark[R]aven]

Look so cool =] ! Thay viền bằng khung tem được ko mọi người ?

[lee196]

Vẫn chưa làm được:(

[Joslong]

Kaka

Và để nó hiện trong forum dạng blog thì thêm .blog_comment-avatar img
Cụ thể như sau:

Code:


.blog_comment-avatar img, span.avatar1 img {
   max-width:110px;
   background-color:beige;
   border:1px solid #FFCC33;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   padding:8px;
   -webkit-transform: rotate(-4deg);
   -moz-transform: rotate(-4deg);
   transform: rotate(-4deg);
   -moz-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   -webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.2);
   box-shadow:2px 2px 10px rgba(0,0,0,0.2)
}
.blog_comment-avatar img:hover, span.avatar1 img:hover{
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   transform: rotate(0deg)}

sao mình không thêm bước trên mà nó vẫn hoạt động rất bình thường , bước này phải chăng là thừa???????????? hay còn tác dụng gì khác

[Sponsored content]