Question Nhờ các bác chỉ làm nút chữ ký giống vxf

Thảo luận trong 'Troubleshoot & Other Questions' bắt đầu bởi Chodongxoai.vn, 6/3/15.

  1. Chodongxoai.vn

    Chodongxoai.vn Member

    Bài viết:
    236
    Likes :
    41
    Em thấy nút chữ ký của vxf đơn giản và đẹp em muốn làm kiểu như vậy, bác nào làm rồi hay có share cho em với, chân thành cảm ơn..!

    upload_2015-3-6_0-21-10
     
    chansudoi thích bài này.
    Đang tải...
  2. VXF

    VXF Be like no other .. Staff Member

    Bài viết:
    1,277
    Likes :
    2,175
    Bạn thêm đoạn sau vào EXTRA.css nhé
    Mã:
    .message .signature:before
    {
        content: "Chữ ký";
        width: 100px;
        text-align: center;
        color: @primaryMedium;
        font-size: 15px;
        font-family: Roboto;
        font-weight: 500;
        height: 30px;
        line-height: 20px;
        padding: 5px;
        background-color: @contentBackground;
        box-sizing: border-box;
        position: absolute;
        top: -15px;
        left: 50%;
        margin-left: -50px;
        border: 1px solid @primaryLighterStill;
        border-radius: 2px;
    }
     
    chansudoi, dev.xf and Chodongxoai.vn like this.
  3. Chodongxoai.vn

    Chodongxoai.vn Member

    Bài viết:
    236
    Likes :
    41
    Tks bác nhé.
     
  4. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    sao nó không hiển thị anh nhỉ. hay phải chèn trong .message .signature
     
  5. Chodongxoai.vn

    Chodongxoai.vn Member

    Bài viết:
    236
    Likes :
    41
    Mình làm ok mà
     
  6. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    chẳng hiểu nữa. mình làm nó không hiện. mà đúng code vậy rùi. khi tối thấy bạn post mình làm vậy nhưng k hiện nên mình không post cho bạn luôn. đau cả đầu vì code xenforo
     
  7. Gacon

    Gacon Member

    Bài viết:
    335
    Likes :
    160
    vào temp .message thêm code của vxf vào bên dưới code chữ ký mặc định đi :)
     
    Last edited: 6/3/15
  8. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    mà mình có dùng style mặc định đâu mà xóa mặc định trong .message , mình dùng style mua bên brivium
     
  9. Gacon

    Gacon Member

    Bài viết:
    335
    Likes :
    160
    ý mình là cái code chữ ký trong temp message.css đó!
     
  10. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    bạn hướng dẫn chi tiết được chứ
     
  11. Gacon

    Gacon Member

    Bài viết:
    335
    Likes :
    160
    Bạn vào Temp Message.csss tìm:
    Mã:
        .message .signature {
        border-top: 1px solid #6cb2e4;
        font-size: 9pt;
        margin-top: 15px;
        opacity: 0.5;
        padding: 20px 0 0;
        position: relative;
    }
    
    Thêm code này vào bên dưới:
    Mã:
    .message .signature:hover {
        opacity: 1;
    }
    
       
    .message .signature:before {
        background-color: #ffffff;
        border: 1px solid #65a5d1;
        border-radius: 0px;
        box-sizing: border-box;
        color: #0f61a1;
        content: "Chữ ký";
        font-family: Arial;
        font-size: 15px;
        font-weight: bold;
        height: 30px;
        left: 50%;
        line-height: 20px;
        margin-left: -50px;
        padding: 5px;
        position: absolute;
        text-align: center;
        top: -15px;
        width: 100px;
    }
     
  12. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    mình cũng thử như cách bạn nói trước đó nhưng nó sẽ xuất hiện dưới menu trên breadcrumb, thui chắc có lẻ mình k cần nữa, code đầu đầu quá nên có thể bỏ đi bạn, style mệt mỏi thật
     
  13. Gacon

    Gacon Member

    Bài viết:
    335
    Likes :
    160
    Mình nhầm,,, không phải xóa mà là thêm vào bên dưới nó :) web của mình thêm vào extra nó k hiện nên làm vậy!
     
  14. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    mình nghỉ đủ thứ rùi, mình thêm dưới nó có hiện, nhưng nó k nằm trong mục chữ ký mà chữ chữ ký nó nằm dưới head một tí ấy, :D nản thật. thui k cố gắng nữa
     
  15. Gacon

    Gacon Member

    Bài viết:
    335
    Likes :
    160
    hihi...bạn copy nguyên code message.css lên đây xem! lúc trước mình cũng bị vậy phải chỉnh một hồi mới đc :)
     
  16. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    Mã:
    <xen:edithint template="message_user_info.css" />
    
    .messageList
    {
        @property "messageList";
        text-align: justify;
        @property "/messageList";
    }
    
    .messageList .message
    {
        @property "message";
        padding-top: 20px;
        padding-bottom: 30px;
        border-top: 1px solid @primaryLightest;
        @property "/message";
    }
    
    {xen:helper clearfix, '.messageList .message'}
    
    /*** Message block ***/
    
    .message .messageInfo
    {
        @property "messageInfo";
        color: @contentText;
        background-color: transparent;
        padding: 0;
        margin-left: 150px;
        border-bottom: 1px none black;
        @property "/messageInfo";
        zoom: 1;
    }
    
        .message .newIndicator
        {
            @property "messageNewIndicator";
            font-size: 11px;
            color: @textCtrlBackground;
            background-color: @secondaryMedium;
            padding: 1px 5px;
            margin: -5px -5px 5px 5px;
            border-radius: 3px;
            display: block;
            float: right;
            position: relative;
            box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
            /*border: 1px solid @primaryLight;*/
            @property "/messageNewIndicator";
           
            margin-right: -{xen:calc '@content.padding-right + 0'}px;
        }
       
            .message .newIndicator span
            {
                @property "messageNewIndicatorInner";
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                /*background-color: @primaryLight;*/
    width: 5px;
                height: 4px;
                @property "/messageNewIndicatorInner";
            }
    
        .message .messageContent
        {
            @property "messageContent";
            padding-bottom: 2px;
            min-height: 100px;
            overflow: hidden;
            *zoom: 1;
            @property "/messageContent";
        }
       
        .message .messageTextEndMarker
        {
            /*height: 0;
            font-size: 0;
            overflow; hidden;*/
        }
       
        .message .editDate
        {
            text-align: right;
            margin-top: 5px;
            font-size: 11px;
            color: @mutedTextColor;
        }
    
        .message .signature
        {
            @property "messageSignature";
            font-size: 9pt;
            color: @mutedTextColor;
            padding: 5px 0 0;
            margin-top: 5px;
            border-top: 1px dashed rgb(224, 69, 71);
            @property "/messageSignature";
        }
    
        .message .messageMeta
        {
            @property "messageMeta";
            font-size: 10pt;
            padding: 15px 5px 5px;
            margin: -5px;
            overflow: hidden;
            zoom: 1;
            @property "/messageMeta";
        }
    
            .message .privateControls
            {
                @property "messagePrivateControls";
                float: left;
                @property "/messagePrivateControls";
            }
    
            .message .publicControls
            {
                @property "messagePublicControls";
                float: right;
                @property "/messagePublicControls";
            }
           
                .message .privateControls .item
                {
                    margin-right: 10px;
                    float: left;
                    color: rgb(224, 69, 71);
                }
    
                .message .privateControls .item .fa
                {
                    color: rgb(224, 69, 71);
                }
               
                    .message .privateControls .item:last-child
                    {
                        margin-right: 0;
                    }
    
                .message .publicControls .item
                {
                    margin-left: 10px;
                    float: left;
                    color: rgb(224, 69, 71) ;   
                }
               
                .message .publicControls .item.postNumber,
                .message .publicControls .item .fa
                {
                    color: @secondaryMedium;
                }
       
                    .message .messageMeta .control
                    {
                        @property "messageMetaControl";
                        text-decoration: none;
                        background-color: rgb(29, 194, 128);
                        padding: 6px;
                        @property "/messageMetaControl";
                    }
                   
                        .message .messageMeta .control:focus
                        {
                            @property "messageMetaControlFocus";
    
                            @property "/messageMetaControlFocus";
                        }
                   
                        .message .messageMeta .control:hover
                        {
                            @property "messageMetaControlHover";
    
                            @property "/messageMetaControlHover";
                        }
                   
                        .message .messageMeta .control:active
                        {
                            @property "messageMetaControlActive";
    
                            @property "/messageMetaControlActive";
                        }
        /*** multiquote +/- ***/
               
        .message .publicControls .MultiQuoteControl
        {
            padding-left: 4px;
            padding-right: 4px;
            border-radius: 2px;
            margin-left: 6px;
            margin-right: -4px;
        }
       
       
        .message .publicControls .MultiQuoteControl.active
        {
            background-color: @primaryLighterStill;
        }
       
        <xen:include template="message_notices.css" />
       
        .message .likesSummary
        {
            @property "messageLikesSummary";
            padding: 5px;
            margin-top: 10px;
            border: 1px solid @primaryLighterStill;
            border-radius: 5px;
            @property "/messageLikesSummary";
        }
       
        .message .messageText > *:first-child
        {
            margin-top: 0;
        }
    
    /* inline moderation changes */
    
    .InlineModChecked .messageUserBlock,
    .InlineModChecked .messageInfo,
    .InlineModChecked .messageNotices,
    .InlineModChecked .bbCodeBlock .type,
    .InlineModChecked .bbCodeBlock blockquote,
    .InlineModChecked .attachedFiles .attachedFilesHeader,
    .InlineModChecked .attachedFiles .attachmentList
    {
        @property "inlineModChecked";
        background-color: @inlineMod;
        @property "/inlineModChecked";
    }
    
    .InlineModChecked .messageUserBlock div.avatarHolder,
    .InlineModChecked .messageUserBlock .extraUserInfo
    {
        background: transparent;
    }
    
    .InlineModChecked .messageUserBlock .arrow span
    {
        border-left-color: @inlineMod;
    }
    
    /* message list */
    
    .messageList .newMessagesNotice
    {
        margin: 10px auto;
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid @primaryLighter;
        background: @primaryLighterStill url(@imagePath/xenforo/gradients/category-23px-light.png) repeat-x top;
        font-size: 11px;
    }
    
    /* deleted / ignored message placeholder */
    
    .messageList .message.placeholder
    {
    }
    
    .messageList .placeholder .placeholderContent
    {   
        overflow: hidden; zoom: 1;
        color: rgb(224, 69, 71);
        font-size: 11px;
    }
    
        .messageList .placeholder a.avatar
        {
            float: left;
            display: block;
        }
       
            .messageList .placeholder a.avatar img
            {
                display: block;
                width: 32px;
                height: 32px;
            }
           
        .messageList .placeholder .privateControls
        {
            margin-top: -5px;
        }
       
    
    /* messages remaining link */
    
    .postsRemaining a,
    a.postsRemaining
    {
        font-size: 11px;
        color: @mutedTextColor;
    }
    
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        .Responsive .message .newIndicator
        {
            margin-right: 0;
            border-top-right-radius: @messageNewIndicator.border-top-left-radius;
        }
       
            .Responsive .message .newIndicator span
            {
                display: none;
            }
    }
    
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .Responsive .message .messageInfo
        {
            margin-left: 0;
            padding: 0 10px;
        }
    
        .Responsive .message .messageContent
        {
            min-height: 0;
        }   
    
        .Responsive .message .newIndicator
        {
            margin-right: -5px;
            margin-top: -16px;
        }
    
        .Responsive .message .postNumber,
        .Responsive .message .authorEnd
        {
            display: none;
        }
       
        .Responsive .message .signature
        {
            display: none;
        }
       
        .Responsive .messageList .placeholder a.avatar
        {
            margin-right: 10px;
        }
    }
    </xen:if>
    đây bạn nè.
     
  17. Gacon

    Gacon Member

    Bài viết:
    335
    Likes :
    160
    Ok...rồi đấy! bạn add vào thử đi :)

    Mã:
    <xen:edithint template="message_user_info.css" />
    
    .messageList
    {
        @property "messageList";
        text-align: justify;
        @property "/messageList";
    }
    
    .messageList .message
    {
        @property "message";
        padding-top: 20px;
        padding-bottom: 30px;
        border-top: 1px solid @primaryLightest;
        @property "/message";
    }
    
    {xen:helper clearfix, '.messageList .message'}
    
    /*** Message block ***/
    
    .message .messageInfo
    {
        @property "messageInfo";
        color: @contentText;
        background-color: transparent;
        padding: 0;
        margin-left: 150px;
        border-bottom: 1px none black;
        @property "/messageInfo";
        zoom: 1;
    }
    
        .message .newIndicator
        {
            @property "messageNewIndicator";
            font-size: 11px;
            color: @textCtrlBackground;
            background-color: @secondaryMedium;
            padding: 1px 5px;
            margin: -5px -5px 5px 5px;
            border-radius: 3px;
            display: block;
            float: right;
            position: relative;
            box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
            /*border: 1px solid @primaryLight;*/
            @property "/messageNewIndicator";
          
            margin-right: -{xen:calc '@content.padding-right + 0'}px;
        }
      
            .message .newIndicator span
            {
                @property "messageNewIndicatorInner";
                border-top-right-radius: 3px;
                position: absolute;
                top: -4px;
                right: -1px;
                /*background-color: @primaryLight;*/
    width: 5px;
                height: 4px;
                @property "/messageNewIndicatorInner";
            }
    
        .message .messageContent
        {
            @property "messageContent";
            padding-bottom: 2px;
            min-height: 100px;
            overflow: hidden;
            *zoom: 1;
            @property "/messageContent";
        }
      
        .message .messageTextEndMarker
        {
            /*height: 0;
            font-size: 0;
            overflow; hidden;*/
        }
      
        .message .editDate
        {
            text-align: right;
            margin-top: 5px;
            font-size: 11px;
            color: @mutedTextColor;
        }
    
        .message .signature {
        border-top: 1px solid #6cb2e4;
        font-size: 9pt;
        margin-top: 15px;
        opacity: 0.5;
        padding: 20px 0 0;
        position: relative;
    }
    .message .signature:hover {
        opacity: 1;
    }
    
       
    .message .signature:before {
        background-color: #ffffff;
        border: 1px solid #65a5d1;
        border-radius: 0px;
        box-sizing: border-box;
        color: #0f61a1;
        content: "Chữ ký";
        font-family: Arial;
        font-size: 15px;
        font-weight: bold;
        height: 30px;
        left: 50%;
        line-height: 20px;
        margin-left: -50px;
        padding: 5px;
        position: absolute;
        text-align: center;
        top: -15px;
        width: 100px;
    }
    
        .message .messageMeta
        {
            @property "messageMeta";
            font-size: 10pt;
            padding: 15px 5px 5px;
            margin: -5px;
            overflow: hidden;
            zoom: 1;
            @property "/messageMeta";
        }
    
            .message .privateControls
            {
                @property "messagePrivateControls";
                float: left;
                @property "/messagePrivateControls";
            }
    
            .message .publicControls
            {
                @property "messagePublicControls";
                float: right;
                @property "/messagePublicControls";
            }
          
                .message .privateControls .item
                {
                    margin-right: 10px;
                    float: left;
                    color: rgb(224, 69, 71);
                }
    
                .message .privateControls .item .fa
                {
                    color: rgb(224, 69, 71);
                }
              
                    .message .privateControls .item:last-child
                    {
                        margin-right: 0;
                    }
    
                .message .publicControls .item
                {
                    margin-left: 10px;
                    float: left;
                    color: rgb(224, 69, 71) ;  
                }
              
                .message .publicControls .item.postNumber,
                .message .publicControls .item .fa
                {
                    color: @secondaryMedium;
                }
      
                    .message .messageMeta .control
                    {
                        @property "messageMetaControl";
                        text-decoration: none;
                        background-color: rgb(29, 194, 128);
                        padding: 6px;
                        @property "/messageMetaControl";
                    }
                  
                        .message .messageMeta .control:focus
                        {
                            @property "messageMetaControlFocus";
    
                            @property "/messageMetaControlFocus";
                        }
                  
                        .message .messageMeta .control:hover
                        {
                            @property "messageMetaControlHover";
    
                            @property "/messageMetaControlHover";
                        }
                  
                        .message .messageMeta .control:active
                        {
                            @property "messageMetaControlActive";
    
                            @property "/messageMetaControlActive";
                        }
        /*** multiquote +/- ***/
              
        .message .publicControls .MultiQuoteControl
        {
            padding-left: 4px;
            padding-right: 4px;
            border-radius: 2px;
            margin-left: 6px;
            margin-right: -4px;
        }
      
      
        .message .publicControls .MultiQuoteControl.active
        {
            background-color: @primaryLighterStill;
        }
      
        <xen:include template="message_notices.css" />
      
        .message .likesSummary
        {
            @property "messageLikesSummary";
            padding: 5px;
            margin-top: 10px;
            border: 1px solid @primaryLighterStill;
            border-radius: 5px;
            @property "/messageLikesSummary";
        }
      
        .message .messageText > *:first-child
        {
            margin-top: 0;
        }
    
    /* inline moderation changes */
    
    .InlineModChecked .messageUserBlock,
    .InlineModChecked .messageInfo,
    .InlineModChecked .messageNotices,
    .InlineModChecked .bbCodeBlock .type,
    .InlineModChecked .bbCodeBlock blockquote,
    .InlineModChecked .attachedFiles .attachedFilesHeader,
    .InlineModChecked .attachedFiles .attachmentList
    {
        @property "inlineModChecked";
        background-color: @inlineMod;
        @property "/inlineModChecked";
    }
    
    .InlineModChecked .messageUserBlock div.avatarHolder,
    .InlineModChecked .messageUserBlock .extraUserInfo
    {
        background: transparent;
    }
    
    .InlineModChecked .messageUserBlock .arrow span
    {
        border-left-color: @inlineMod;
    }
    
    /* message list */
    
    .messageList .newMessagesNotice
    {
        margin: 10px auto;
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid @primaryLighter;
        background: @primaryLighterStill url(@imagePath/xenforo/gradients/category-23px-light.png) repeat-x top;
        font-size: 11px;
    }
    
    /* deleted / ignored message placeholder */
    
    .messageList .message.placeholder
    {
    }
    
    .messageList .placeholder .placeholderContent
    {  
        overflow: hidden; zoom: 1;
        color: rgb(224, 69, 71);
        font-size: 11px;
    }
    
        .messageList .placeholder a.avatar
        {
            float: left;
            display: block;
        }
      
            .messageList .placeholder a.avatar img
            {
                display: block;
                width: 32px;
                height: 32px;
            }
          
        .messageList .placeholder .privateControls
        {
            margin-top: -5px;
        }
      
    
    /* messages remaining link */
    
    .postsRemaining a,
    a.postsRemaining
    {
        font-size: 11px;
        color: @mutedTextColor;
    }
    
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        .Responsive .message .newIndicator
        {
            margin-right: 0;
            border-top-right-radius: @messageNewIndicator.border-top-left-radius;
        }
      
            .Responsive .message .newIndicator span
            {
                display: none;
            }
    }
    
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .Responsive .message .messageInfo
        {
            margin-left: 0;
            padding: 0 10px;
        }
    
        .Responsive .message .messageContent
        {
            min-height: 0;
        }  
    
        .Responsive .message .newIndicator
        {
            margin-right: -5px;
            margin-top: -16px;
        }
    
        .Responsive .message .postNumber,
        .Responsive .message .authorEnd
        {
            display: none;
        }
      
        .Responsive .message .signature
        {
            display: none;
        }
      
        .Responsive .messageList .placeholder a.avatar
        {
            margin-right: 10px;
        }
    }
    </xen:if>
     
  18. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    va
    Vẫn hông được. Bạn đừng cố gắng nữa. cám ơn bạn đã giúp đỡ nha, để mặc định style cũng được :D
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...