Hướng dẫn tạo ribbon cho title và status ở bài viết

Discussion in 'Xenforo Articles' started by thnam8x, 14/5/11.

  1. thnam8x

    • Xenforo Việt Nam

    Member Since:
    20/4/11
    Message Count:
    147
    "Thích" đã nhận:
    231
    Điểm nhận Cup:
    43
    Giới tính:
    Nam
    Vào ACP >> Appearance >> Styles >> style bạn đang dùng >> Templates:
    -- thêm đoạn CSS dưới đây vào Template: EXTRA.css:

    Code:
    .ribbon { font-size: 12px; font-weight: bold; margin: -5px -5px -2px; text-align: center; }
    .ribbon li
    {
        border-radius: 3px; -webkit-border-radius:  3px; -moz-border-radius:  3px; -khtml-border-radius:  3px;
        border-top-right-radius: 0px; -webkit-border-top-right-radius:  0px; -moz-border-radius-topright:  0px; -khtml-border-top-right-radius:  0px;
        border-top-left-radius: 0px; -webkit-border-top-left-radius:  0px; -moz-border-radius-topleft:  0px; -khtml-border-top-left-radius:  0px;
        box-shadow: 0px 1px 3px rgba(0,0,0, 0.25); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25); -moz-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25); -khtml-box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
        padding: 1px;
        position: relative;
        margin-bottom: 5px;
    }
    .ribbon li:last-child { margin-bottom: 0px; }
    .ribbon li div { position: absolute; top: -4px; width: 4px; height: 4px; }
    .ribbon li .right { border-top-right-radius: 3px; -webkit-border-top-right-radius:  3px; -moz-border-radius-topright:  3px; -khtml-border-top-right-radius:  3px; right: -1px; }
    .ribbon li .left { border-top-left-radius: 3px; -webkit-border-top-left-radius:  3px; -moz-border-radius-topleft:  3px; -khtml-border-top-left-radius:  3px; left: -1px; }
    
    .ribbonNormal
    {
        background: rgb(153, 129, 100) url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        border: 1px solid rgb(153, 129, 100);
        color: rgb(252, 252, 255);
    }
    .ribbonNormal div { background-color: rgb(153, 129, 100);  }
    
    .ribbonPremium
    {
        background: #e68c17 url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        border: 1px solid #e68c17;
        color: #7F4E0E;
    }
    .ribbonPremium div { background-color: #e68c17; }
    
    .ribbonStaff
    {
        background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        border: 1px solid @primaryLight;
        color: @contentBackground;
    }
    .ribbonStaff div { background-color: #718E0F; }
    .ribbonStaffU
    {
        background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #D07DA8;
        border: 1px solid #C76497;
        color: #9A2E66;
    }
    .ribbonStaffU div { background-color: #C76497; }
    >> Save
    -- Vào template message_user_info:
    Thay đoạn code sau:

    Code:
    <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}</xen:contentcheck></em></xen:if>
                <!-- slot: message_user_info_text -->
            </h3>
        </xen:hook>
    Bằng đoạn code sau:

    Code:
     <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" />
                <!-- slot: message_user_info_text -->
            </h3>
            <xen:if hascontent="true">
                <ul class="ribbon">
                    <xen:contentcheck>
                        <li class="ribbonStaff">
                            <div class="left"></div>
                            <div class="right"></div>
                            {xen:helper userTitle, $user}
                        </li>
                    </xen:contentcheck>
                </ul>
            </xen:if>
        </xen:hook>
        <br />
        <xen:if hascontent="true">
            <xen:contentcheck>
                <xen:if is="{$message.status}">
                    <ul class="ribbon">
                        <li class="ribbonNormal">
                            <div class="left"></div>
                            <div class="right"></div>
                            <marquee>{$message.status}</marquee>
                        </li>
                    </ul>
                </xen:if>
            </xen:contentcheck>
        </xen:if>    
    1.png 2.png 1.png
  2. procombow

    • New Member

    Member Since:
    10/10/11
    Message Count:
    4
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Giới tính:
    Nam
    hình như bạn đưa code thiếu , mình làm theo rồi nhưng chỉ có đến cái khung dưới chứ " con sóng xanh " của bạn thôi ,
    không có Member since trở đi . Dù sao cũng thanks . Bạn vui lòng xem lại nhá
  3. Milano

    • Member

    • Ô la la ... Ô lê lê
    Member Since:
    29/4/11
    Message Count:
    98
    "Thích" đã nhận:
    77
    Điểm nhận Cup:
    18
    Giới tính:
    Nam
    Kô thiếu đâu, cái đấy nó ở Appearance ~> Style Property ~> Message Elements ~> Settings
    lehoainam167 and nam_cdsphb like this.
  4. procombow

    • New Member

    Member Since:
    10/10/11
    Message Count:
    4
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Giới tính:
    Nam
    mình làm được rồi bạn ạ , thanks bạn nhìu nha
  5. Milano

    • Member

    • Ô la la ... Ô lê lê
    Member Since:
    29/4/11
    Message Count:
    98
    "Thích" đã nhận:
    77
    Điểm nhận Cup:
    18
    Giới tính:
    Nam
    Thanks thì bấm thích ý ;))
  6. kinz.jung

    • New Member

    Member Since:
    13/7/11
    Message Count:
    5
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Giới tính:
    Nữ
    [IMG]

    Sau khi làm theo mình bị thế này :-s Không biết có cách nào để khắc phục không vậy?
  7. m.kha_tc

    • Member

    • NUKK
    Member Since:
    14/6/11
    Message Count:
    73
    "Thích" đã nhận:
    13
    Điểm nhận Cup:
    8
    Giới tính:
    Nam
    ban doi skin defauilt
  8. stefan-te

    • New Member

    Member Since:
    18/11/11
    Message Count:
    1
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Giới tính:
    Nam
    Thanks!
  9. YangKore

    • Member

    Member Since:
    26/4/11
    Message Count:
    96
    "Thích" đã nhận:
    26
    Điểm nhận Cup:
    18
    Giới tính:
    Nam
    Muốn đổi màu ribbon thì làm sao bạn
  10. YangKore

    • Member

    Member Since:
    26/4/11
    Message Count:
    96
    "Thích" đã nhận:
    26
    Điểm nhận Cup:
    18
    Giới tính:
    Nam
    Cho cái avata xuống dưới sao bạn :D
  11. iShyn

    • New Member

    Member Since:
    11/1/12
    Message Count:
    12
    "Thích" đã nhận:
    3
    Điểm nhận Cup:
    3
    Giới tính:
    Nam
  12. zuvbb

    • New Member

    Member Since:
    10/2/12
    Message Count:
    2
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Giới tính:
    Nam
  13. anhtien9x

    • New Member

    • hack to learn... don't learn to hack
    Member Since:
    7/1/12
    Message Count:
    13
    "Thích" đã nhận:
    1
    Điểm nhận Cup:
    3
    Giới tính:
    Nam
  14. nam_cdsphb

    • New Member

    Member Since:
    2/3/12
    Message Count:
    4
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Thank bạn
  15. iShyn

    • New Member

    Member Since:
    11/1/12
    Message Count:
    12
    "Thích" đã nhận:
    3
    Điểm nhận Cup:
    3
    Giới tính:
    Nam
    Có bác nào đưa ribbon xuống dưới avatar đc k?
  16. kh0c

    • Member

    Member Since:
    29/3/12
    Message Count:
    52
    "Thích" đã nhận:
    4
    Điểm nhận Cup:
    8
    Giới tính:
    Nam
    làm sao đổi màu giống của bạn nhỉ
  17. saveyourtime1990

    • New Member

    • Buồn phiền vì nhiều tiền....
    Member Since:
    27/3/12
    Message Count:
    6
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Giới tính:
    Nam
    Hình như là thiếu mất mầy tấm hình thì phải....?
  18. hungba193

    • Member

    • làm mãi không xong @@!
    Member Since:
    29/3/12
    Message Count:
    71
    "Thích" đã nhận:
    6
    Điểm nhận Cup:
    8
    Giới tính:
    Nam
    cụ th
    cụ thể hơn chút được ko bạn, mình vấn chưa làm dc @@!
  19. chuchuottui1987

    • New Member

    • Đang thuộc hội FA
    Member Since:
    29/3/12
    Message Count:
    7
    "Thích" đã nhận:
    0
    Điểm nhận Cup:
    1
    Giới tính:
    Nam
    Nghề nghiệp:
    Đào khoáng
    Đến từ:
    Sao Hỏa
    mình cũng ko hiêu khúc này, mình ko sài theme defaut, ko nhìn thây thanh màu xanh và màu nâu dâu het
  20. KainJinez

    • Member

    • Am mít tơ Lonely :(
    Member Since:
    19/3/12
    Message Count:
    138
    "Thích" đã nhận:
    21
    Điểm nhận Cup:
    18
    Giới tính:
    Nam
    Để ribon xuống dưới
    Mình làm thế này. Anh em so sánh code tìm hiểu nhé
    PHP:
    <xen:require css="message_user_info.css" />
     
    <
    div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">   
    <
    div class="messageUserBlock">
     
    <
    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}</xen:contentcheck></em></xen:if>
                <!-- 
    slotmessage_user_info_text -->
            </
    h3>
        </
    xen:hook
    </
    xen:if>
     
        <
    xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <
    div class="avatarHolder">
                <
    span class="helper"></span>
                <
    xen:avatar user="$user" size="m" />
                <!-- 
    slotmessage_user_info_avatar -->
            </
    div>
        </
    xen:hook>
     
    <
    xen:if is="!{$isQuickReply}">       
            <
    xen:if hascontent="true">
                <
    ul class="ribbon">
                    <
    xen:contentcheck>
                        <
    li class="ribbonStaff">
                            <
    div class="left"></div>
                            <
    div class="right"></div>
                            {
    xen:helper userTitle$user}
                        </
    li>
                    </
    xen:contentcheck>
                </
    ul>
            </
    xen:if>
        <
    br />
        <
    xen:if hascontent="true">
            <
    xen:contentcheck>
                <
    xen:if is="{$message.status}">
                    <
    ul class="ribbon">
                        <
    li class="ribbonNormal">
                            <
    div class="left"></div>
                            <
    div class="right"></div>
                            <
    marquee>{$message.status}</marquee>
                        </
    li>
                    </
    ul>
                </
    xen:if>
            </
    xen:contentcheck>
        </
    xen:if>   
     
     
     
     
        <
    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">
                        <
    dl class="pairsInline">
                            <
    dt>{xen:phrase member_since}:</dt>
                            <
    dd>{xen:date $user.register_date}</dd>
                        </
    dl>
                    </
    xen:if>
                   
                    <
    xen:if is="@messageShowMessageCount">
                        <
    dl class="pairsInline">
                            <
    dt>{xen:phrase message_count}:</dt>
                            <
    dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed">{xen:number $user.message_count}</a></dd>
                        </
    dl>
                    </
    xen:if>
                   
                    <
    xen:if is="@messageShowTotalLikes">
                        <
    dl class="pairsInline">
                            <
    dt>{xen:phrase likes_received}:</dt>
                            <
    dd>{xen:number $user.like_count}</dd>
                        </
    dl>
                    </
    xen:if>
                   
                    <
    xen:if is="@messageShowTrophyPoints">
                        <
    dl class="pairsInline">
                            <
    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="pairsInline">
                            <
    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="pairsInline">
                            <
    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="pairsInline">
                            <
    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="pairsInline">
                            <
    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}">
                            <
    xen:if hascontent="true">
                                <
    dl class="pairsInline 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>
    Mình sử dụng Style Novus

    Attached Files:

    • 3.JPG
      3.JPG
      File size:
      57.8 KB
      Views:
      68

Share This Page

Users found this page by searching for:

  1. ribbon xenforo

    ,
  2. video huong dan tao ribbon

    ,
  3. online status xenforo

    ,
  4. user extra info xenforo,
  5. ribbons xenforo,
  6. ribbon trong xenforo,
  7. extraUserInfo vietxf,
  8. ribbon xenforo vietxf,
  9. hướng dẫn tạo ribbon xenforo,
  10. giới hạn số bài viết khi like xenforo