Cộng Đồng MyBB Việt Nam
[Tutorial] Responsive layout cho ProStats plugin - Phiên bản in

+- Cộng Đồng MyBB Việt Nam (https://congdong.mybb.vn)
+-- Diễn đàn: Thư Viện MyBB (https://congdong.mybb.vn/Forum-thu-vien-mybb)
+--- Diễn đàn: Tutorials (https://congdong.mybb.vn/Forum-tutorials)
+--- Chủ đề: [Tutorial] Responsive layout cho ProStats plugin (/Thread-tutorial-responsive-layout-cho-prostats-plugin)

Responsive layout cho ProStats plugin - JLP423 - 28-05-2025

Hello mọi người, theo yêu cầu của @anhcoo , Joey share mọi người cách làm cho ProStat plugin đc responsive theo giao diện của diễn đàn. Mọi người làm theo hướng dẫn sau nha

1. Mọi người thêm cái CSS này vào global.css hay gì đó tương tự của giao diện muốn dùng:
 
Code: 
/*Cái này để ẩn mấy cai categories*/
@media only screen and (max-width: 1199px){
     .hide-prostats{
         display: none;
    }
}
/*cái này để ẩn mấy cái thông tin nhỏ nhặt trong cái phần bài viết mới*/
@media only screen and (max-width: 767px){
     .hide{
         display: none;
    }
}

2. Mọi người tìm những cái templates trong phần Global Templates sau đây, và thay cái <td> đầu tiên thành cái này:
 
Code: 
<td class="hide-prostats">
  1. prostats_mostreplies
  2. prostats_mostreputation
  3. prostats_mostthanks
  4. prostats_mostviews
  5. prostats_newmembers
  6. prostats_topdownloads
  7. prostats_topposters
  8. prostats_topreferrers
  9. prostats_topthreadposters

3. Tương tự như bước 2, các bạn cũng tìm những templates sau đây và thay cái <td> thành 
 
Code: 
<td class="hide">
  1. prostats_newestposts_date
  2. prostats_newestposts_forum
  3. prostats_newestposts_head_date
  4. prostats_newestposts_head_forum
  5. prostats_newestposts_head_starter
  6. prostats_newestposts_starter

Vậy là xong rồi đó. Mọi người có thể thay đổi chỉnh sửa theo ý mình muốn. Joey đã test thử nhiều cách và thấy cách này là đẹp nhất cho responsive view. Khi nào rảnh Joey up lên vài tấm hình demo cho

Enjoy