skin rippers help me

Thảo luận trong 'Style & Template Questions' bắt đầu bởi NaveedAli, 24/9/13.

1votes
5/5, 1 vote

  1. NaveedAli

    NaveedAli New Member

    Bài viết:
    6
    Likes :
    0
    Last edited: 24/9/13
    Đang tải...
  2. Minh Bảo

    Minh Bảo Verified User

    Bài viết:
    858
    Likes :
    255
    NaveedAli thích bài này.
  3. NaveedAli

    NaveedAli New Member

    Bài viết:
    6
    Likes :
    0
  4. trungkiensvqn

    trungkiensvqn Member

    Bài viết:
    60
    Likes :
    13
    Có vẻ anh ấy muốn info của thành viên nằm ngang. Bạn nào biết thì hỗ trợ anh ấy.
     
    NaveedAli thích bài này.
  5. Minh Bảo

    Minh Bảo Verified User

    Bài viết:
    858
    Likes :
    255
    Ok! when their grooves will help @@
     
    NaveedAli thích bài này.
  6. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    - Template message_user_info:
    Mã:
    <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
    <div class="messageUserBlock">
       
            <div class="avatarHolder">
                <span class="helper"></span>
                <a href="citizens/god.19/" class="avatar Av19m" data-avatarhtml="true"><img src="http://www.gravatar.com/avatar/a9487c18061ac32c3c8ceed6ea8a7db4?s=96&amp;d=http%3A%2F%2Fstonehearthcave.com%2Fcommunity%2Fstyles%2Fuix%2Fxenforo%2Favatars%2Favatar_m.png" width="96" height="96" alt="GOD"></a>
                <!-- slot: message_user_info_avatar -->
            </div>
       
    
    
       
           
       
        <div class="messageUserExtra">   
       
            <div class="extraUserInfo">
               
               
                   
                    <div class="messagelikes">
                   
                   
                        <dl class="pairsJustified">
                            <dt><li class="Tooltip"><i class="icon-comment"></i></li></dt>
                            <dd><a href="search/member?user_id=19" class="OverlayTrigger">40</a></dd>
                        </dl>
                   
                   
                   
                   
                   
                        <dl class="pairsJustified">
                            <dt><li class="Tooltip"><i class="icon-thumbs-up"></i></li></dt>
                            <dd>4</dd>
                        </dl>
                   
                   
                    </div>
                   
               
                   
                   
                   
                   
                   
               
                   
                               
               
    <dl class="pairsInline">
    
    
    
    <dd class="dark_postrating_bar_dd"><div class="dark_postrating_bar" style="width:104px"><div class="dark_postrating_bar_positive Tooltip" style="width:90.909090909091%"></div><div class="dark_postrating_bar_neutral Tooltip" style="width:0%"></div><div class="dark_postrating_bar_negative Tooltip" style="width:9.0909090909091%"></div></div></dd>
    
    </dl>
               
               
               
            </div>
            </div>
       
           
    
    
        <span class="arrow"><span></span></span>
    </div>
    </div>
     
    NaveedAli and dangquang like this.
  7. dangquang

    dangquang Member

    Bài viết:
    271
    Likes :
    165
    ai hướng dẫn mình làm các box như vậy được k untitled
     
    ChungKk and NaveedAli like this.
  8. dangquang

    dangquang Member

    Bài viết:
    271
    Likes :
    165
    làm sao làm được mấy cái box như vậy các bạn
     
    ChungKk and NaveedAli like this.
  9. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    and Code Css:
    Mã:
    .messageUserInfo {
    margin-top: -75px !important;
    float: left;
    width: 124px;
    }
    .messageUserInfo {
    margin-left: 8px;
    }
    .messageUserBlock {
    border-top: 0 !important;
    border-left: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -khtml-border-radius: 0 !important;
    border-radius: 0 !important;
    }
    .messageUserBlock {
    background-color: transparent !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid transparent !important;
    position: relative;
    }
    .messageUserBlock div.avatarHolder {
    background-color: transparent !important;
    padding: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    }
    .messageUserBlock div.avatarHolder {
    margin-left: 2px;
    }
    .avatar img, .avatar .img, .avatarCropper {
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
    -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
    -khtml-box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
    background-position: 0 0;
    padding: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -khtml-border-radius: 100%;
    border-radius: 100%;
    }
    .avatar img, .avatar .img, .avatarCropper {
    background-color: #3498db;
    padding: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    }
    .messageUserExtra {
    background: linear-gradient(to bottom, #fff 0%,#f6f6f6 47%,#ededed 100%);
    padding-top: 37px;
    border-right: 1px solid #bcbcbc;
    border-left: 1px solid #bcbcbc;
    border-bottom: 1px solid #bcbcbc;
    margin-top: -42px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -khtml-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-box-shadow: inset 0px 1px 0px 0px #fcfcfc;
    -moz-box-shadow: inset 0px 1px 0px 0px #fcfcfc;
    -khtml-box-shadow: inset 0px 1px 0px 0px #fcfcfc;
    box-shadow: inset 0px 1px 0px 0px #fcfcfc;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -khtml-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    }
    .messageUserBlock .extraUserInfo {
    font-size: 11px;
    background-color: #fff;
    padding: 4px 6px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    }
    .messageUserBlock .extraUserInfo {
    padding: 0 !important;
    background-color: transparent !important;
    }
    .extraUserInfo .messagelikes .pairsJustified {
    display: inline-block;
    margin-bottom: -2px;
    margin-top: 4px;
    padding: 0 3px 2px;
    width: 41.3%;
    margin-left: 2px;
    }
    .messageUserBlock .extraUserInfo dl {
    margin: 2px 0 0;
    }
    .messagelikes .pairsJustified {
    background-color: transparent !important;
    padding: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    margin-right: 3px;
    margin-left: 3px;
    margin-bottom: 3px;
    -webkit-box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 10px, rgba(255,255,255,0.7) 0px 1px 0px;
    -moz-box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 10px, rgba(255,255,255,0.7) 0px 1px 0px;
    -khtml-box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 10px, rgba(255,255,255,0.7) 0px 1px 0px;
    box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 10px, rgba(255,255,255,0.7) 0px 1px 0px;
    }
    .pairsJustified dt {
    float: left;
    max-width: 100%;
    margin-right: 5px;
    }
    .messageUserBlock .extraUserInfo dl {
    margin: 2px 0 0;
    }
    .pairsInline dl, .pairsInline dt, .pairsInline dd {
    display: inline;
    }
    .dark_postrating_bar {
    width: 80px;
    height: 10px;
    background: transparent;
    border: 1px solid #ddd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    padding: 1px;
    font-size: 0;
    }.dark_postrating_bar {
    background: #e6e6e6 !important;
    margin-left: 6px;
    margin-bottom: 4px;
    }
    .dark_postrating_bar_positive {
    height: 10px;
    background: #62A201;
    display: inline-block;
    opacity: 0.4;
    font-size: 0;
    }
    .dark_postrating_bar_neutral {
    height: 10px;
    background: #bbb;
    display: inline-block;
    opacity: 0.4;
    font-size: 0;
    }
    .dark_postrating_bar_negative {
    height: 10px;
    background: #D90B00;
    display: inline-block;
    opacity: 0.4;
    font-size: 0;
    }
    .messageUserBlock .arrow {
    position: absolute;
    top: 10px;
    right: -10px;
    display: block;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border: 10px solid transparent;
    border-left-color: ;
    -moz-border-left-colors: ;
    border-right: none;
    _display: none;
    }
    .messageUserBlock .arrow span {
    position: absolute;
    top: -10px;
    left: -11px;
    display: block;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border: 10px solid transparent;
    border-left-color: transparent !important;
    -moz-border-left-colors: transparent !important;
    border-right: none;
    }
    
     
    NaveedAli and dangquang like this.
  10. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Demo xem giúp dc kg
     
    NaveedAli and dangquang like this.
  11. dangquang

    dangquang Member

    Bài viết:
    271
    Likes :
    165
    ChungKk and NaveedAli like this.
  12. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Đơn thuần nó chỉ là css thôi bạn, ví dụ nó code thế này:
    Mã:
    .node_8 .nodeTitle a {
    padding: 3px 8px;
    background-color: #E01B5D;
    color: #FFFFFF;
    display: inline-block;
    border: 1px solid rgb(0,0,0);
    border: 1px solid rgba(0,0,0, 0.4);
    _border: 1px solid rgb(0,0,0);
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -khtml-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 0 transparent, 0 -1px 1px rgba(0,0,0,0.25);
    }
    Tức là node nào có số thứ tự là 8 sẽ mang css riêng này nhé!
    Và phần mô tả sẽ code như thế này:
    Mã:
    #nodeDescription-8 {
    color: white;
    background-color: #E01B5D !important;
    border: 1px solid rgb(0,0,0);
    border: 1px solid rgba(0,0,0, 0.4);
    _border: 1px solid rgb(0,0,0);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -khtml-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    opacity: 0.8 !important;
    }
     
    NaveedAli thích bài này.
  13. dangquang

    dangquang Member

    Bài viết:
    271
    Likes :
    165
    bạn hướng dẫn kĩ tý được k ?
    chèn vào extra rồi thay id node thôi à
     
    ChungKk thích bài này.
  14. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    bạn chèn vào nodelist_css nhé, mình mới demo thử site này cho bạn xem thử http://ducau.net/forums/
    Nhìn cái mồi câu nhé!
     
  15. dangquang

    dangquang Member

    Bài viết:
    271
    Likes :
    165
    muốn các icon trước box nữa thì sao bạn
     
    ChungKk thích bài này.
  16. dangquang

    dangquang Member

    Bài viết:
    271
    Likes :
    165
    1

    mấy cái phần mình khoanh đó thì sao nhĩ .. bạn giúp luôn đi
     
    ChungKk and NaveedAli like this.
  17. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Muốn sử dụng các icon này, bạn phải sửa lại trong code theo class của nó và css lại thì mới ra được bạn. Giờ mình có việc rồi, khi khác tiếp nhé!
     
    NaveedAli and dangquang like this.
  18. dangquang

    dangquang Member

    Bài viết:
    271
    Likes :
    165
    onl thì giúp với :D
     
    ChungKk thích bài này.
  19. NaveedAli

    NaveedAli New Member

    Bài viết:
    6
    Likes :
    0
    where i use css codes, in message_user_info.css ? or EXTRA.css ? and avatar are same ?
     
  20. dangquang

    dangquang Member

    Bài viết:
    271
    Likes :
    165
    message_user_info.css
     
    ChungKk thích bài này.
comments powered by Disqus

Chia sẻ trang này

Đang tải...