ทำ subforum บนมือถือให้เป็นภาพสวยงาม มี 2 แบบ สำหรับ discuz3.5

ทำ subforum หรือบอร์ดย่อย บนมือถือให้เป็นภาพสวยงาม ทันสมัย สำหรับ discuz3.5


ทำ subforum หรือบอร์ดย่อย บนมือถือให้เป็นภาพ แบบ pc ที่เว็บ dogthailand.net ทำ สำหรับ discuz3.5 มี 2 แบบ

ไปที่หน้า forumdisplay_subforum.htm ให้เป็นรูป บนมือถือ มี 2 แบบ ทำใน defualt/touch

แบบ 1
🐶 ไฟล์ forumdisplay_subforum.htm

1. <div class="mobile-subforum-grid">
   
2. <!--{loop $sublist $sub}-->
   
3.   <a href="forum.php🐶mod=forumdisplay&fid={$sub[fid]}" class="mobile-subforum-card">
   
4.     <div class="card-img" style="background-image: url('data/attachment/forum/image_fid{$sub[fid]}.jpg');"></div>
   
5.     <div class="card-title">{$sub[name]}</div>
   
6.   </a>
   
7. <!--{/loop}-->
   
8. </div>
   

คัดลอกไปที่คลิปบอร์ด

🐶 ไฟล์ header.htm
มี CSS ดังนี้:

1. 
   
2. <style>
   
3. .mobile-subforum-grid {
   
4.   display: grid;
   
5.   grid-template-columns: repeat(2, 1fr);
   
6.   gap: 12px;
   
7.   padding: 12px;
   
8. }
   
9. 
   
10. .mobile-subforum-card {
    
11.   display: flex;
    
12.   flex-direction: column;
    
13.   text-decoration: none;
    
14.   border-radius: 12px;
    
15.   overflow: hidden;
    
16.   background: #fff;
    
17.   box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    
18.   transition: transform 0.2s;
    
19. }
    
20. 
    
21. .mobile-subforum-card:hover {
    
22.   transform: scale(1.02);
    
23. }
    
24. 
    
25. .card-img {
    
26.   aspect-ratio: 16/9;
    
27.   background-size: cover;
    
28.   background-position: center;
    
29. }
    
30. 
    
31. .card-title {
    
32.   padding: 8px 6px;
    
33.   font-size: 15px;
    
34.   color: #333;
    
35.   text-align: center;
    
36.   font-weight: 600;
    
37. }
    
38. </style>
    

คัดลอกไปที่คลิปบอร์ด

✅ ผลลัพธ์:
กล่อง subforum สวย เรียบ
ชื่ออยู่ “ใต้ภาพ” ไม่ซ้อน
Responsive เหมาะกับมือถือ


แบบ 2


🐶 ไฟล์ forumdisplay_subforum.htm
คุณแทนที่ <ul><li>...</li></ul> เดิมด้วย:

1. <div class="mobile-subforum-grid">
   
2. <!--{loop $sublist $sub}-->
   
3.   <a href="forum.php🐶mod=forumdisplay&fid={$sub[fid]}" class="mobile-subforum-item" style="background-image: url('data/attachment/forum/image_fid{$sub[fid]}.jpg');">
   
4.     <div class="mobile-subforum-title">{$sub[name]}</div>
   
5.   </a>
   
6. <!--{/loop}-->
   
7. </div>
   

คัดลอกไปที่คลิปบอร์ด

🐶 ไฟล์ header.htm
มี CSS ดังนี้:

1. <style>
   
2. .mobile-subforum-grid {
   
3.   display: grid;
   
4.   grid-template-columns: repeat(2, 1fr);
   
5.   gap: 12px;
   
6.   padding: 12px;
   
7. }
   
8. 
   
9. .mobile-subforum-item {
   
10.   position: relative;
    
11.   aspect-ratio: 16 / 9;
    
12.   background-color: #ccc;
    
13.   background-size: cover;
    
14.   background-position: center;
    
15.   border-radius: 12px;
    
16.   overflow: hidden;
    
17.   display: flex;
    
18.   align-items: flex-end;
    
19.   justify-content: center;
    
20.   text-decoration: none;
    
21. }
    
22. 
    
23. .mobile-subforum-title {
    
24.   background: rgba(0,0,0,0.5);
    
25.   color: #fff;
    
26.   width: 100%;
    
27.   text-align: center;
    
28.   font-size: 16px;
    
29.   padding: 6px 4px;
    
30.   font-weight: 600;
    
31.   text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    
32. }
    
33. </style>

คัดลอกไปที่คลิปบอร์ด

🐶 ผลลัพธ์ (มือถือ)
กล่อง Subforum แสดงแบบ 2 คอลัมน์
ภาพ background จาก /data/attachment/forum/image_fidxxx.jpg  ที่ทำไว้ในส่วนของ pc
ชื่อ Subforum ซ้อนบนภาพตรงกลางด้านล่าง
Responsive เรียบร้อย