Hiệu ứng đẹp cho avatar Xenforo

PVS · 05/05/2015

Mình xin giới thiệu tới các bạn một cách trang trí cho avatar thành viên xenforo trong threads view khá ấn tượng.

Demo trang mình đã dùng:

Mã:

http://cnm24h.tk/threads/hello-m%E1%BB%8Di-ng%C6%B0%E1%BB%9Di.8/

Bạn thêm code này vào cuối EXTRA.css

Mã:

/*FX effect avatar Body */
.imgholder {

    height: 81px;
    margin: 44px 30px;

}


/* thumbnails style */
.imgholder img{
    position:absolute;
    left:0;
    top:0;
    width:120px;
    height:120px;
    z-index:5;
    border-radius:100px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    opacity:0.3;
    filter: alpha(opacity = 30);
    box-shadow:0 0 5px #000;
    -moz-box-shadow:0 0 5px #000;
    -webkit-box-shadow:0 0 5px #000;
  
    transform: scale(0.5,0.5);
    -ms-transform: scale(0.5,0.5);
    -moz-transform: scale(0.5,0.5);
    -webkit-transform: scale(0.5,0.5);
  
    transition:
        opacity 1s,
        transform 1s ease-in-out 0.3s;
    -moz-transition:
        opacity 1s,
        -moz-transform 1s ease-in-out 0.3s;
    -webkit-transition:
        opacity 1s,
        -webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
    opacity:1;
    filter: alpha(opacity = 100);
    transform: scale(1,1);
    -ms-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
}

.imgholder figcaption{
    position:absolute;
    left:48px;
    top:40%;
    width:185px;
    color:#004E87;
    font-weight:bold;
    text-shadow:-1px -1px 0 #fff;
    z-index:4;
  
    transition:
        top 0.5s ease-out;
    -moz-transition:
        top 0.5s ease-out;
    -webkit-transition:
        top 0.5s ease-out;
}
.imgholder:hover figcaption{
    top:20%;
}
/* decorations style */
.imgholder .circle{
    position:absolute;
    border-radius:100px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
}
.imgholder .outer1{
    top:-8px;
    left:-8px;
    width:120px;
    height:120px;
    z-index:2;
  
    border:8px solid;
    border-color:#DEEBFC;
    box-shadow:0 0 3px #AFD3FF;
    -moz-ox-shadow:0 0 3px #AFD3FF;
    -webkit-box-shadow:0 0 3px #AFD3FF;
  
    background: #ffffff;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
    background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
    background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
    background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
  
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
  
    transition:
        transform 1.8s ease-in-out,
        box-shadow 1s ease-out,
        border-color 1.5s;
    -moz-transition:
        -moz-transform 1.8s ease-in-out,
        -moz-box-shadow 1s ease-out,
        border-color 1.5s;
    -webkit-transition:
        -webkit-transform 1.8s ease-in-out,
        -webkit-box-shadow 1s ease-out,
        border-color 1.5s;
}
.imgholder:hover .outer1{
    border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
    box-shadow:0 0 10px #0285E2;
    -moz-box-shadow:0 0 10px #0285E2;
    -webkit-box-shadow:0 0 10px #0285E2;
    transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
}
              
              
              
.imgholder .outer2{
    top:-18px;
    left:-18px;
    width:136px;
    height:136px;
    z-index:1;
  
    border:10px solid;
    border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
    box-shadow:0 0 20px #8EB9FF;
    -moz-box-shadow:0 0 20px #8EB9FF;
    -webkit-box-shadow:0 0 20px #8EB9FF;
    opacity:0;
    filter: alpha(opacity = 0);
  
    transform: scale(1.3,1.3) rotate(180deg);
    -ms-transform: scale(1.3,1.3) rotate(180deg);
    -moz-transform: scale(1.3,1.3) rotate(180deg);
    -webkit-transform: scale(1.3,1.3) rotate(180deg);
      
    transition:
        opacity 0.5s,
        transform 0.7s ease-out;
    -moz-transition:
        opacity 0.5s,
        -moz-transform 0.7s ease-out;
    -webkit-transition:
        opacity 0.5s,
        -webkit-transform 0.7s ease-out;
}             
                             
.imgholder:hover .outer2{
    opacity:0.9;
    filter: alpha(opacity = 90);
    transform: scale(1,1) rotate(-10deg);
    -ms-transform: scale(1,1) rotate(-10deg);
    -moz-transform: scale(1,1) rotate(-10deg);
    -webkit-transform: scale(1,1) rotate(-10deg);
}

  

.imgholder figcaption {
    color: #004E87;
    font-weight: bold;
    left: 7px;
    position: absolute;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0), -1px -1px 0 #FFFFFF;
    top: 153px;
    transition: top 0.5s ease-out 0s;
    width: 185px;
    z-index: 4;
}

/*FX effect avatar Body */

Thay nội dung message_user_info bằng code sau

Mã:

<xen:require css="message_user_info.css" />

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">  
<div class="messageUserBlock {xen:if $user.isOnline, online}">
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
  <div class="imgholder">
  <div class="outer1 circle"></div>
  <div class="outer2 circle"></div>
  
  <xen:avatar user="$user" size="m" img="true" />
  
  <!-- slot: message_user_info_text -->
  </div>
  </xen:hook>

<xen:if is="!{$isQuickReply}">
   <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
     <h3 class="userText">
       <xen:username user="$user" itemprop="name" rich="true" />
       <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>
       {xen:helper userBanner, $user, 'wrapped'}
       <!-- slot: message_user_info_text -->
     </h3>
   </xen:hook>
    
   <xen:if hascontent="true">
     <div class="extraUserInfo">
       <xen:contentcheck>
       <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
         <xen:if is="@messageShowRegisterDate AND {$user.user_id}">
           <dl class="pairsJustified">
             <dt>{xen:phrase joined}:</dt>
             <dd>{xen:date $user.register_date}</dd>
           </dl>
         </xen:if>
        
         <xen:if is="@messageShowMessageCount AND {$user.user_id}">
           <dl class="pairsJustified">
             <dt>{xen:phrase messages}:</dt>
             <dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
           </dl>
         </xen:if>
        
         <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
           <dl class="pairsJustified">
             <dt>{xen:phrase likes_received}:</dt>
             <dd>{xen:number $user.like_count}</dd>
           </dl>
         </xen:if>
        
         <xen:if is="@messageShowTrophyPoints AND {$user.user_id}">
           <dl class="pairsJustified">
             <dt>{xen:phrase trophy_points}:</dt>
             <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
           </dl>
         </xen:if>
      
         <xen:if is="@messageShowGender AND {$user.gender}">
           <dl class="pairsJustified">
             <dt>{xen:phrase gender}:</dt>
             <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
           </dl>
         </xen:if>
        
         <xen:if is="@messageShowOccupation AND {$user.occupation}">
           <dl class="pairsJustified">
             <dt>{xen:phrase occupation}:</dt>
             <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
           </dl>
         </xen:if>
        
         <xen:if is="@messageShowLocation AND {$user.location}">
           <dl class="pairsJustified">
             <dt>{xen:phrase location}:</dt>
             <dd><a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location, '-'}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
           </dl>
         </xen:if>
      
         <xen:if is="@messageShowHomepage AND {$user.homepage}">
           <dl class="pairsJustified">
             <dt>{xen:phrase home_page}:</dt>
             <dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
           </dl>
         </xen:if>
              
       </xen:hook>      
       <xen:if is="@messageShowCustomFields AND {$user.customFields}">
       <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
      
         <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
           <xen:if is="{$fieldInfo.viewable_message} AND ({$fieldInfo.display_group} != 'contact' OR {$user.allow_view_identities} == 'everyone' OR ({$user.allow_view_identities} == 'members' AND {$visitor.user_id}))">
             <xen:if hascontent="true">
               <dl class="pairsJustified userField_{$fieldId}">
                 <dt>{xen:helper userFieldTitle, $fieldId}:</dt>
                 <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
               </dl>
             </xen:if>
           </xen:if>
         </xen:foreach>
        
       </xen:hook>
       </xen:if>
       </xen:contentcheck>
     </div>
   </xen:if>
    
</xen:if>

   <span class="arrow"><span></span></span>
</div>
</div>

Lưu lại và cảm nhận nhé. Chúc các bạn thành công.

Nguồn: congngheaz.com

PVS · 05/05/2015

ismartcom005 · 05/05/2015

bcat95 nói:
À class bạn khai báo ở message_user_info mà chèn css vô extra nên thấy kì kì

cái đó là css của message_user_info mà @bcat95 , extra chỉ bổ sung thêm cái imgholder thôi

Coolboyhn · 05/05/2015

ismartcom005 nói:
cái đó là css của message_user_info mà @bcat95 , extra chỉ bổ sung thêm cái imgholder thôi

Cho nó luôn vào message_user_info.css cho khỏi lẫn lộn ở extra.css

PVS · 05/05/2015

có gì đâu mà lẫn lộn ta @@

ismartcom005 · 05/05/2015

PVS nói:
có gì đâu mà lẫn lộn ta @@

ý bác @Coolboyhn là css nào để theo file đó, mốt có gì tìm dễ hơn ko phải lẫn, extra nhiều khi mình thêm nhiều quá

PVS · 05/05/2015

nếu vậy cứ thử thêm vào message_user_info.css, nếu được thì để đó dùng cho khỏe

ndkhoa · 05/05/2015

responsive được không mấy thým

dev.xf · 05/05/2015

Coolboyhn nói:
Cho nó luôn vào message_user_info.css cho khỏi lẫn lộn ở extra.css

PVS nói:
nếu vậy cứ thử thêm vào message_user_info.css, nếu được thì để đó dùng cho khỏe

có thể sty của bạn sẽ dc lượm lặt nhiều thứ từ nơi khác về. sau này chuyển template mà bạn vẫn muốn dùng những cái đấy thì sao nhỉ??? ví dụ khoảng 20 thuộc tính bạn chèn vào 20 template css khác nhau sau này sao bạn tìm lại dc??? so với chỉ cho vào 1 template extra.css sau này cần bỏ sang style nào thì lại copy nó vất sang có nhanh hơn so với copy từng cái ko?
keke
đó là lý do tại sao các thím bên xenforo.com luôn comment trong code là muốn customize cái gì thì nên cho vào trong extra.css
ps thím pvs làm style kiểu gì mà ngộ thế? các thẻ lộn tùng phèo thế kaka

WTF

Coolboyhn · 05/05/2015

dev.xf nói:
có thể sty của bạn sẽ dc lượm lặt nhiều thứ từ nơi khác về. sau này chuyển template mà bạn vẫn muốn dùng những cái đấy thì sao nhỉ??? ví dụ khoảng 20 thuộc tính bạn chèn vào 20 template css khác nhau sau này sao bạn tìm lại dc??? so với chỉ cho vào 1 template extra.css sau này cần bỏ sang style nào thì lại copy nó vất sang có nhanh hơn so với copy từng cái ko?
keke
đó là lý do tại sao các thím bên xenforo.com luôn comment trong code là muốn customize cái gì thì nên cho vào trong extra.css
ps thím pvs làm style kiểu gì mà ngộ thế? các thẻ lộn tùng phèo thế kaka
View attachment 2308

WTF

Đằng nào mà chẳng phải sửa chỗ này nữa???

Thay nội dung message_user_info

Coolboyhn · 05/05/2015

Theo mình cái nào chỉ css thôi thì nhét nó vào extra.css

PVS · 05/05/2015

@dev.xf : cái trang đó style làm chơi chơi mà

)), chủ yếu là để test addon và mấy cái thủ thuật rồi làm demo thôi ^^ hehe

Lê Văn Anh Tín · 22/05/2015

Cảm ơn

Bon · 09/05/2016

Vãi cả nguồn congngheaz. Cái này là hiệu ứng effect do 1 site nước ngoai share. Bên Pháp thì phải . Dân việt nam toàn đi coppy rồi làm của riêng vãi nồi

virutmt · 02/01/2019

Chào cả nhà, Mình có tạo theo hướng dẫn hoặc làm theo hướng dẫn khác
Nhưng sao nó chỉ có phần logo, còn phần bài viết, số lượt like, giới tính ko thấy đâu
Site mình đây: tinmoihn.com

ko thấy phần bôi đỏ, AE chỉ giúp với

PVS · 02/01/2019

Bạn vào Style Properties > Message Elements > tích vào các ô bên dưới nhé.

virutmt · 02/01/2019

PVS nói:
Bạn vào Style Properties > Message Elements > tích vào các ô bên dưới nhé.

đã được. cảm ơn bác

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Hiệu ứng đẹp cho avatar Xenforo

PVS

Super Moderator

PVS

Super Moderator

ismartcom005

MasterSergeant

Coolboyhn

MasterCorporal

PVS

Super Moderator

ismartcom005

MasterSergeant

PVS

Super Moderator

ndkhoa

Corporal

dev.xf

Sergeant

Coolboyhn

MasterCorporal

Coolboyhn

MasterCorporal

PVS

Super Moderator

Lê Văn Anh Tín

Gefreiter

Bon

MasterCorporal

virutmt

MasterCorporal

PVS

Super Moderator

virutmt

MasterCorporal

Dịch vụ XenForo của VNXF

Hướng dẫn sử dụng

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ