Hướng Dẫn làm User Info đẹp

Thảo luận trong 'Tips and Guides' bắt đầu bởi shynn, 30/06/2015.

  1. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Ban đầu
    upload_2015-6-30_17-10-47.png
    Thành quả :D
    [​IMG]

    Đầu tiên cần cài đặt Font Awesome trước.

    Sau đó chúng ta vào Style Properties chỉnh theo như hình dưới
    upload_2015-6-30_17-12-39.png


    upload_2015-6-30_17-13-48.png
    Xong rồi Update Style Properties

    Tiếp theo mở template message_user_info

    Tìm
    Mã:
            
    Thay bằng
    -> Lưu

    Vào template message_user_info.css và thêm
    Mã:
    text-align: center;
    vào các thẻ
    Mã:
    .messageUserBlock a.username
    Mã:
    .messageUserBlock .userTitle


    Mờ template Extra.css thêm vào để làm thành hình tròn

    Mã:
    .messageUserInfo .messageUserBlock .avatar > img { border-radius: 50%; }
    
    .roundStats .fa {
        font-size: 30px;
        line-height: 37px;
        margin-left: -1px;
        margin-top: -1px;
        opacity: 0.25;
    }
    .roundStats .pairsInline {
        border: 1px solid #d5d5d5;
        border-radius: 100%;
        height: 36px;
        width: 36px;
    }
    .messageUserBlock .roundStats .roundTrophy { margin-left: 20px; overflow: hidden; }
    .messageUserBlock .roundStats .roundLike { margin-left: 5px; overflow: hidden; }
    .messageUserBlock .roundStats .roundMessage { margin-left: 20px; margin-top: -10px; overflow: hidden; }
    
    .roundStats .pairsInline > dd {
        color: #000000;
        display: block;
        margin-top: -24px;
        text-align: center;
    }
    .messageUserInfo .extraUserInfo.roundStats {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        float: left;
        margin-left: -24px;
        margin-top: -2px;
        position: absolute;
    }
    .messageUserBlock .extraUserInfo { font-size: 11px; padding: 4px 6px; }
    Giờ thêm tiếp đoạn code này vào Extra.css để thay cái vòng tròn online/offline
    Mã:
    /* PULSING INDICATOR */
    .messageUserBlock div.avatarHolder .onlineMarker {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
        border: medium none !important;
        border-radius: 50% !important;
        display: inline-block;
        height: 16px;
        margin: 81px 0 0 107px;
        width: 16px;
    }
    
    .messageUserBlock div.avatarHolder .onlineMarker:before
    {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        margin: 3px 0 0 3px;
        background: #7fb900;
        border-color: #7fb900;
        border-radius: 50%
    }
    
    .messageUserBlock div.avatarHolder .onlineMarker:after
    {
        content: '';
        position: absolute;
        width: 32px;
        height: 32px;
        margin: -9px 0 0 -9px;
        border: 1px solid #7fb900;
        border-radius: 50%;
        box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
        -webkit-transform: scale(0);
        -webkit-animation: online 2.5s ease-in-out infinite;
        animation: online 2.5s ease-in-out infinite
    }
    
    @-webkit-keyframes online
    {
          0% {opacity: 1;-webkit-transform: scale(0)}
         50% {opacity: .7}
        100% {opacity: 0;-webkit-transform: scale(1)}
    }
    
    @keyframes online
    {
          0% {opacity: 1;transform: scale(0)}
         50% {opacity: .7}
        100% {opacity: 0;transform: scale(1)}
    }
    Update thêm bỏ bớt mấy phần thừa lặp lại ở phía dưới
    [​IMG]
    Bỏ tích những cái nào không cần

    Xong :D

    Nguồn: https://www.xfuniverse.com
     

    Các file đính kèm:

    Last edited by a moderator: 13/02/2016
    tuna, hoccntt, bui hung and 9 others like this.
  2. Mr.Yellow

    Mr.Yellow Thượng Đế

    Tham gia:
    24/06/2015
    Bài viết:
    99
    Đã được thích:
    96
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Tem, quá đẹp còn gì :D:D
     
    shynn thích bài này.
  3. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Áp dụng luôn đi cho nóng ạ :p
     
    THB thích bài này.
  4. Mr.Yellow

    Mr.Yellow Thượng Đế

    Tham gia:
    24/06/2015
    Bài viết:
    99
    Đã được thích:
    96
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Ok để vọc thủ xem sao :))
     
  5. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    cám ơn bạn :)
     
  6. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Không có gì ạ :D
     
  7. Blue

    Blue Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    796
    Đã được thích:
    1,246
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Bà con làm theo thử coi ổn ko nha, ngon báo mình update vào vnxf luôn :v
     
    THB thích bài này.
  8. Chấm

    Chấm Thượng Đế

    Tham gia:
    03/03/2015
    Bài viết:
    180
    Đã được thích:
    133
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Web:
    Thấy nó kì kì @@
    Sao nó dư ra 1 khúc nhỉ
     

    Các file đính kèm:

  9. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Em thấy bình thường mà bác. Đẹp mà :D

    upload_2015-7-1_6-1-25.png
     
    THB thích bài này.
  10. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Có dòng Note của bác thớt bên XFUniverse

    NOTE: Remember, this was done on the default XenForo style. For other styles, I am certain things will need to change, margins, padding, etc.

    Style mặc định là ngon rồi. Còn các style khác chỉnh sửa nữa thì mới đẹp đc
     
    THB and Chấm like this.
  11. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    Đẹp. Thanks bác.
     
  12. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    đã test.
    nó làm khung info rộng hơn. hơi khó nhìn.
    info user.jpg
     
  13. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    mình tìm hiểu và chỉnh lại theo thông số này. các bạn cũng có thể chỉnh theo ý thích của mình.
    nhưng mình thấy các số đó là ok. còn tùy theo styles nha.

    1. làm các bước như trên. nhưng thay thông số như hình nha.
    infouser00.jpg
    infouser01.jpg



    2. cũng làm theo các bước như trên. nhưng thay.
    Mã:
    bằng
    Mã:
    là ok.

    demo;
    infouser02.jpg
     
  14. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,892
    Đã được thích:
    1,449
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    cũng đẹp, cơ mà không hợp với forum mình lắm :D
    Hình như bên mình có ai hỏi rồi thì phải :D
     
    shynn and THB like this.
  15. Chấm

    Chấm Thượng Đế

    Tham gia:
    03/03/2015
    Bài viết:
    180
    Đã được thích:
    133
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Web:
    Nó kì kì anh ơi :(
     

    Các file đính kèm:

    THB thích bài này.
  16. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    sao của e nó kì vậy ta?
    chắc do cái styles.
     
    lecaothien and Chấm like this.
  17. Chấm

    Chấm Thượng Đế

    Tham gia:
    03/03/2015
    Bài viết:
    180
    Đã được thích:
    133
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Web:
    Chắc tại style rồi anh
    Em đang làm trên localhost nên k có DEMO đưa a xem được :(
     
    THB thích bài này.
  18. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,892
    Đã được thích:
    1,449
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    print screen đê :v
     
  19. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Bên bác cũng là em hỏi đó :v :v
     
    THB thích bài này.
  20. daipqvms

    daipqvms Thượng Đế

    Tham gia:
    21/07/2015
    Bài viết:
    49
    Đã được thích:
    18
    Điểm thành tích:
    8
    Giới tính:
    Nam
    mình đã thành công ^^
    1.PNG
     
    THB thích bài này.

Chia sẻ trang này