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

1,593 4 7
dcstylexf

dcstylexf

Major
Tham gia
24/03/2015
Bài viết
2,006
Đượ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
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,
Home Screen Installation! Các bác chỉ giúp e lấy đoạn code thông báo thêm vào màn hình ở đâu vậy ạ! bởi Teo77779,
Chèn tin cố định này ở đâu AE bởi dienlanhquanly,
Được quan tâm
Hiện bài viết trên thống kê. bởi maichi111,
Bài viết mới
Hiện bài viết trên thống kê. bởi maichi111,
làm như thế này như thế nào ạ bởi phamnguyen,
Sao profile post của mình k hiện bởi sanhpv,
Hỏi về rank bị dài bởi boyngheo21,
Xenforo modification bởi urkyfight,
Nội Dung Chỉ Hiển Thị Vị Trí Trang categories bởi muabandalat,
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
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
NDK Hướng dẫn Tạo user name Xen 1 nhấp nháy kiểu cầu vồng Template Modifications 16

Chủ đề tương tự


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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

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
pallet Thịnh Phát
Top Bottom