hello,, i need help about this customize horizontal postbit : http://stonehearthcave.com/community/threads/clan-founders.58/ i need message_user_info and message_user_info.css code only.... plss help me.............. advc thanks..
i already have this skin, i need customize code for horizontal postbit : check this postbit demo : http://stonehearthcave.com/community/threads/clan-founders.58/
- 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&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>
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; }
Đơ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; }
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é!
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é!
