>

Code làm đẹp phòng chat


Hướng dẫn tạo phong cách phòng chat giống như wap trợ giúp đang sử dụng. Mình đi vào hướng dẫn luôn nhé! Từ bảng điều khiển các bạn vào thiết kế > Cài đặt bố trí > chat. Tại đây có 4 dòng liên kết Bố cục Kênh, Bố cục tin nhắn người dùng, Bố cục tin nhắn của Bot và Chat write message layout các bạn click vào từng liên kết để sửa.
- Liên kết 1 "Bố cục Kênh" là phần sửa giao diện danh sách kênh chat thì dùng code sau (xoá hết code có sẵn đi nhé)
demo làm đẹp phòng chat
demo làm đẹp phòng chat

TWIG
  1. <div class="chan" style="border-bottom:solid;border-width:1px;border-color:#9add9a;"><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td width="8%"><div style="text-align:center;color:#222;">div>td><td width="92%" style="text-align:left;border:solid;border-width:1px;border-color:#efe;"><a href="{{chan_url}}">{{chan_name}}a>td>tr>tbody>table><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td width="50%">td><td width="50%" style="text-align:center;border:solid;border-width:1px;border-color:#eee;color:#05a;">Trực tuyến: {{online}}td>tr>tbody>table>div>

- Liên kết thứ 2 "Bố cục tin nhắn người dùng" là trang trí tin nhắn chat của thành viên trong phòng chat thì dùng code sau:
TWIG
  1. <div class="chat_message"><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td width="8%"><div style="margin:0%;padding:1px;color: #008a00;text-align:center;border-bottom:solid;border-left:solid;border-right:solid;border-width:1px;border-color:#edeeee;">div>td><td width="92%"><div style="margin:0%;padding:1px;text-align:left;border-bottom:solid;border-right:solid;border-width:1px;border-color:#eeeeee;color:#ff0000"><b>{{profile}}b>div> td>tr>tbody>table><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td width="8%">td><td width="92%"><div style="margin:0%;padding:1px;color: #0025d9;text-align:left;border-left:solid;border-right:solid;border-width:1px;border-color:#edeede;">{{message}}div>td>tr>tbody>table><div style="background:#00aa00;border-top:dashed;border-width:1px;border-color:#ffda00;padding:0px;margin:0%;">div>

- Liên kết thứ 3 "Bố cục tin nhắn của Bot" là trang trí phong cách bài viết của BOT thông báo thì dùng code sau:
TWIG
  1. <div class="chat_message"><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td width="8%"><div style="margin:0%;padding:1px;color: #00408a;text-align:center;border-bottom:solid;border-left:solid;border-right:solid;border-width:1px;border-color:#edeeee;"></div></td><td width="92%"><div style="margin:0%;padding:1px;text-align:left;border-bottom:solid;border-right:solid;border-width:1px;border-color:#eeeeee;color:#ff0000"><b>{{bot_name}}</b></div> </td></tr></tbody></table><table width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td width="8%"></td><td width="92%"><div style="margin:0%;padding:1px;color: #0025d9;text-align:left;border-left:solid;border-right:solid;border-width:1px;border-color:#edeede;">{{message}}</div></td></tr></tbody></table><div style="background:#fd0000;border-top:dashed;border-width:1px;border-color:#ffda00;padding:0px;margin:0%;"></div>

- Liên kết thứ 4 "Bố cục viết tin nhắn chat" là trang trí phong cách ô viết tin trong phòng chat thì dùng code sau:
TWIG
  1. <div class="chat_write">
  2. <br/>{% if show_input %} <form action="{{form_url}}" method="post">{{message}}<br/>
  3. <br/> <textarea rows="1" cols="10" name="text" style="width:auto">textarea><input type="submit" value="{{write}}"/>
  4. <br/> {% else %}
  5. <br/><a href="{{write_link}}">{{write}}a>
  6. <br/> {% endif %}<br>
  7. <br/> <a href="{{refresh_link}}">{{refresh}}a>div>div><div class="left">


- Chúc các bạn thành công! để lại bình luận bên dưới.

giao-dien-phong-chat-wapego
DMCA.com Protection Status
Cùng Chuyên Mục
Xem thêm
Comment
Tên bạn
Nội dung


user Admin (ngày 03/04/17 lúc 03:04) : Xóa ở ô 4 đi cho phù hợp wap của bạn. (share code)
ảnh cm Contact Facebook
ảnh cm Contact Google+
ảnh cm Blog Trương Minh Đức
Facebook Google+ YouTube
Được tài trợ bởi