Other Tạo bảng thông tin thành viên (Member Card) chuẩn Material Design

1,662 4 7
dcstylexf

dcstylexf

Major
Tham gia
24/03/2015
Bài viết
2,005
Được Like
1,615
Chào các bạn, lâu lắm rồi mình không viết bài gì trên VNXF :D Hôm nay mạn phép share cho anh em cái tut nho nhỏ làm đẹp cho diễn đàn nhé :) Demo trước

dnnAbgv.gif

Nào, giờ tiến hành làm thôi !
Bước 1: Vào template member_card và thay toàn bộ thành
HTML: 
<xen:require css="member_card.css" />

<div class="card memberCard{$user.user_id}">
  <div class="card-face face-2">
    <button class="card-face__back-button cardButton" data-card-back="data-card-back">
        <img src="http://imgh.us/arrow_1.svg" width="19" height="19" draggable="false"/>
    </button>
    <span class="card-face__stats like"><h3><i class="fa fa-heart" aria-hidden="true"></i></h3><p>{xen:number $user.like_count}</p></span>
    <span class="card-face__stats mess"><h3><i class="fa fa-comments" aria-hidden="true"></i></h3><p>{xen:number $user.message_count}</p></span>
    <span class="card-face__stats trophy"><h3><i class="fa fa-trophy" aria-hidden="true"></i></h3><p>{xen:number $user.trophy_points}</p></span>
   
    <a href="{xen:link account/personal-details}" title="Config Account Information"><img class="card-face__settings-button" src="http://imgh.us/cog.svg" width="17" height="17" draggable="false"/></a>
  </div>
  <div class="card-face face-1">
    <button class="card-face__menu-button cardButton" data-card-menu="data-card-menu">
        <img src="http://imgh.us/dots_1.svg" width="5" height="23" draggable="false"/>
    </button>
   
            <xen:if hascontent="true">
            <div class="modControls" style="position: relative;width: 70%;text-align: center;padding-top: 10px;">
                <xen:contentcheck>
                    <xen:if is="{$canEditUser}"><a href="{xen:link members/edit, $user}">{xen:phrase edit}</a> | </xen:if>
                    <xen:if is="{$canCleanSpam}"><a href="{xen:link spam-cleaner, $user}" class="OverlayTrigger">{xen:phrase spam}</a> | </xen:if>
                    <xen:if is="{$canWarn}"><a href="{xen:link members/warn, $user}">{xen:phrase warn}</a> | </xen:if>
                    <xen:if is="{$canBanUsers}">
                        <xen:if is="{$user.is_banned}">
                            <a href="{xen:adminlink banning/users/lift, $user}">{xen:phrase lift_ban}</a>
                        <xen:else />
                            <a href="{xen:adminlink banning/users/add, $user}">{xen:phrase ban}</a></xen:if>
                        </xen:if>
                </xen:contentcheck>
            </div>
        </xen:if>
   
    <div class="card-face__avatar Av{$user.user_id}l">
        <img class="Av{$user.user_id}l" src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" width="110" height="110" draggable="false"/>
    </div>
    <h2 class="card-face__name"><xen:username user="$user" class="NoOverlay" /></h2>
    <span class="card-face__title">{xen:helper userTitle, $user}
        <blockquote class="status">{xen:helper bodytext, $user.status}</blockquote>
    </span>
   
        <xen:if is="{$canViewOnlineStatus}">
            <dl class="pairsInline lastActivity" style="font-size: 11px;margin: 0 30px">
                <dt>{xen:phrase x_was_last_seen, 'username={$user.username}'}:</dt>
                <dd>
                    <xen:if is="{$user.activity} AND {$canViewCurrentActivity}">
                        <xen:if is="{$user.activity.description}">
                            {$user.activity.description}<xen:if is="{$user.activity.itemTitle}"> <em><a href="{$user.activity.itemUrl}" class="concealed">{$user.activity.itemTitle}</a></em></xen:if>,
                        <xen:else />
                            {xen:phrase viewing_unknown_page},
                        </xen:if>
                        <xen:datetime time="{$user.effective_last_activity}" class="muted" />
                    <xen:else />
                        <xen:datetime time="{$user.effective_last_activity}" />
                    </xen:if>
                </dd>
            </dl>
        </xen:if>
   
    <div class="card-face-footer" style="text-align: center;"><div class="row">
        <div class="col col-sm"><a class="OverlayCloser btn btn-danger card-face__social cancel">Cancel</a></div>
        <div class="col col-sm"><a href="{xen:link members, $user}" class="OverlayCloser btn btn-info card-face__social goto">Profile Page</a></div>
    </div></div>
  </div>
</div>

<script>
// Member Card
    $( ".card.memberCard{$user.user_id} .cardButton" ).click(function() {    
           $('.card.memberCard{$user.user_id}').toggleClass('show-menu');
    });
</script>

Bước 2: Vào template member_card.css thay toàn bộ thành
Mã: 
.card {
  background-color: #FFF;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 405px;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-shadow: 0px 5px 43px rgba(0, 0, 0, 0.18);
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
@media screen and (min-width: 30em) {
  .card {
    width: 290px;
    height: 405px;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto;
  }
  .card:hover {
    cursor: pointer;
  }
}
.card-face {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.card-face__bullet {
  background-color: #f44336;
  color: #FFF;
  display: block;
  padding: 4px 0;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  box-sizing: border-box;
  line-height: 1.2;
  text-align: center;
  font-size: 12px;
  position: absolute;
  top: 10px;
  right: 0;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.27);
  -webkit-animation: bullet 500ms;
          animation: bullet 500ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  font-weight: bold;
}
.card-face.face-1 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.show-menu .card-face.face-1 {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.card-face.face-2 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.show-menu .card-face.face-2 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.card-face__menu-button {
  position: absolute;
  top: 10px;
  right: 5px;
  background: transparent;
  border: none;
  outline: none;
  padding: 5px 15px;
  -webkit-transform: translateX(150%);
          transform: translateX(150%);
  -webkit-animation: menu 2s;
          animation: menu 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.card-face__menu-button img {
  pointer-events: none;
}
.card-face__back-button {
  position: absolute;
  top: 10px;
  left: 0px;
  background: transparent;
  border: none;
  outline: none;
  padding: 5px 15px;
}
.card-face__back-button img {
  pointer-events: none;
}
.card-face__settings-button {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px;
}
.card-face__avatar {
  display: block;
  width: 110px;
  height: 110px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  -webkit-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
  opacity: 0;
  -webkit-animation: avatar 1.5s;
          animation: avatar 1.5s;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.card-face__avatar img {
  border-radius: 50%;
}
.card-face__name {
  font-size: 24px;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 0 20px;
  text-align: center;
  width: 100%;
  color: #263238;
  -webkit-animation: fadedown 1s;
          animation: fadedown 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.card-face__title {
  font-size: 15px;
  color: #90a4ae;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
  font-weight: 300;
  -webkit-animation: fadedown 1s;
          animation: fadedown 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.card-face__title .status {
    font-size: 70%;
    font-style: italic;
    color: #222;
    font-weight: bold;
    overflow: hidden;
        text-overflow: ellipsis;
}
.card-face__title:after {
  content: "";
  background-color: #E3EBEE;
  width: 70px;
  height: 1px;
  margin: 20px auto 0 auto;
  display: block;
}
.card-face-footer {
  left: 0;
  right: 0;
  position: absolute;
  text-align: center;
  bottom: 20px;
}
.card-face__social {
  -webkit-animation: socials 1.5s;
          animation: socials 1.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  color: #fff !important;
}
.card-face__social.cancel {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.card-face__social.goto {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.card-face__stats {
    display: block;
    margin: 10px 0;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    color: #fff;
    text-align: center;
}
.card-face__stats.like {
    background-color: #e67e7e;
}
.card-face__stats.mess {
    background-color: #7ee6b6;
}
.card-face__stats.trophy {
    background-color: #8e7ee6;
}
.card-face__stats h3 {
    white-space: nowrap;
    line-height: 60px;
    font-size: 2rem;
}

.show-menu .card-face__stats {
  -webkit-animation: stats 1s;
          animation: stats 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.card-face__stats:nth-of-type(1) {
  -webkit-animation-delay: 0;
          animation-delay: 0;
}
.card-face__stats:nth-of-type(2) {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.card-face__stats:nth-of-type(3) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
@-webkit-keyframes avatar {
  from {
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
}
@keyframes avatar {
  from {
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
}
@-webkit-keyframes menu {
  from {
    -webkit-transform: translateX(150%);
            transform: translateX(150%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes menu {
  from {
    -webkit-transform: translateX(150%);
            transform: translateX(150%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes fadedown {
  from {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadedown {
  from {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes socials {
  from {
    -webkit-transform: translateY(300%);
            transform: translateY(300%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes socials {
  from {
    -webkit-transform: translateY(300%);
            transform: translateY(300%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes stats {
  from {
    -webkit-transform: translateX(300%);
            transform: translateX(300%);
  }
  to {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes stats {
  from {
    -webkit-transform: translateX(300%);
            transform: translateX(300%);
  }
  to {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes bullet {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes bullet {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

Vậy là xong, chúc bạn thành công!
 
Bài viết liên quan
Xin hỏi làm sao đưa tất cả tin ghim ra ngoài trang chủ XF2 bởi muabandalat,
Mong các AE giúp đỡ em tạo Custom thread fields bởi nguyendinhnham,
Hiện bài viết trên thống kê. bởi maichi111,
em cần tìm thanh kéo chuột bởi Kendy,
Make collapsible sub-forums of a forum with no parent in forum list - Tạo sub-forum thu gọn của diễn đàn không có parent trong forum list XenForo 2 bởi PVS,
Lỗi lưu thông tin bởi imissziu,
Bài viết mới
Trường "url" bị thiếu (nằm trong "author") bởi muabandalat,
Xin hỏi làm sao đưa tất cả tin ghim ra ngoài trang chủ XF2 bởi muabandalat,
Addon Donations by Siropu 1.5.1 bởi redbull,
cấu trúc Diễn đàn -Trường "comment" bị thiếu googleconsole bởi muabandalat,
Cần hỗ trợ sửa giao diện có phí bởi dichvutele,
Mong các AE giúp đỡ em tạo Custom thread fields bởi nguyendinhnham,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
N Help Mong các AE giúp đỡ em tạo Custom thread fields Template Modifications 9
PVS Other 2x Make collapsible sub-forums of a forum with no parent in forum list - Tạo sub-forum thu gọn của diễn đàn không có parent trong forum list XenForo 2 Template Modifications 0
snacker12 Other Xin cách tạo responsive cho xenporta cho code sau Template Modifications 0
Pajee Other Vấn đề tạo table Template Modifications 2
FDDSFWET Other AI Giúp Mình Tạo Menu như thế này trên xenforo1.5.12 với Template Modifications 0

Chủ đề tương tự


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

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

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Hoặc gửi Liên hệ

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom