Đây là mã CSS tin nhắn riêng đẹp giống trên các thiết bị iOS. Các bạn vui vẻ nhé
Hướng dẫn
Các bạn vào Thiết kế > Cài đặt bố cục > Tin nhắn riêng > Danh sách tin nhắn, xóa hết thêm code sau vào:
TWIG
<div class="{{nick_uid==api.user_id ? 'my-msg not-my-msg mright' : 'my-msg mleft'}}" align="left"> <div class="message-text">{{message|raw}}</div> </div> <div style="clear:both"></div>
Sau đó chèn CSS vào Thiết kế > Phong cách và màu sắc trang > Wap/Web > Sửa toàn bộ CSS:
CSS 1 (Hình ảnh):
CSS
.my-msg{background-image:linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, rgb(210,244,254)),color-stop(1, rgb(149,194,253)));border:solid 1px rgba(200, 200, 200, 0.5);border-radius: 5px;box-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2); box-sizing:border-box;clear:both;float:left;margin-bottom:5px;padding:5px 10px;position:relative;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);width:auto;max-width:100%;word-wrap:break-word;} .my-msg:before, .my-msg:after {border-radius:5px;content:'';display:block;position:absolute;} .my-msg:before{border:8px solid transparent;border-bottom-color:rgba(0, 0, 0, 0.5);bottom:0;left:-7px;z-index:-2;} .my-msg:after{border:8px solid transparent;border-bottom-color:#d2f4fe;bottom:1px;left:-8px;} /*This is code shared at http://buycode.wap.mu*/ .not-my-msg {background-image:linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, rgb(172,228,75)),color-stop(1, rgb(122,205,71)));float:right;} .not-my-msg:before{border-bottom-color: rgba(0, 0, 0, 0.5);border-radius:5px;left:auto;right:-7px;} .not-my-msg:after{border-bottom-color:#ace44b;border-radius: 5px;left:auto;right:-8px;}
CSS 2 (Hình ảnh):
CSS
.my-msg{margin:10px 0;overflow: hidden;} .message-text{padding: 10px 20px;float:right;clear:both;border-radius: 25px;position:relative;margin-bottom:1px;} .mleft .message-text{margin-right:70px;margin-left:20px;background-color:#e5e5ea;float: left;} .mright .message-text{margin-left:70px;margin-right:20px;background-color:#36a9fc;color:#fff;float:right;} .message-text:last-child:before,.message-text:last-child:after{content:'';position:absolute;bottom:0;width: 35px;height:25px;z-index: -1;} /*This is code shared at http://buycode.wap.mu*/ .mright .message-text:before,.mright .message-text:after{border-radius:0 0 0 50%;} .mright .message-text:before{height:20px;right:-23px;background-color:#36a9fc;} .mright .message-text:after{right:-35px;bottom:-3px;background-color:#fff;} .mleft .message-text:before,.mleft .message-text:after{border-radius:0 0 50% 0;} .mleft .message-text:before{height:20px;left:-23px;background-color:#e5e5ea;} .mleft .message-text:after{left:-35px;bottom:-3px;background-color:#fff;}
Code được chia sẻ bởi HanhPhucAo
Copy vui lòng ghi rõ nguồn HanhPhucAo tại http://phonho.net. Cảm ơn rất nhiều!