โมแถบ โชว์ สถานะ กระทู้สวยๆ css [By ETStudiO]

l3eil3oy

สวัสดี ครับ วันนี้ผมจะมาสอนวิธีโมแถบโชว์สถานะกระทู้


โมใหม่ให้สวยงาม แบบนี้


วิธีทำ

1 เพิ่ม css โดยการเปิดไฟล์  /www/template/สกินที่ใช้อยู่/common/common.css  
แล้วเพิ่ม โค้ดตัวนี้ไว้สุดท้าย

1.     .myButton {
   
2.         
   
3.         -moz-box-shadow: 0px 10px 14px -7px #3e7327;
   
4.         -webkit-box-shadow: 0px 10px 14px -7px #3e7327;
   
5.         box-shadow: 0px 10px 14px -7px rgb(223, 223, 223);
   
6.         
   
7.         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
   
8.         background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
   
9.         background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
   
10.         background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
    
11.         background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
    
12.         background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
    
13.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
    
14.         
    
15.         background-color:#77b55a;
    
16.         
    
17.         -moz-border-radius:4px;
    
18.         -webkit-border-radius:4px;
    
19.         border-radius:4px;
    
20.         
    
21.         border:1px solid #4b8f29;
    
22.         
    
23.         display:inline-block;
    
24.         color:#ffffff;
    
25.         font-family:arial;
    
26.         font-size:13px;
    
27.         font-weight:bold;
    
28.         padding:6px 12px;
    
29.         text-decoration:none;
    
30.         
    
31.         text-shadow:0px 1px 0px #5b8a3c;
    
32.         
    
33.     }
    
34.     .myButton:hover {
    
35.         
    
36.         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
    
37.         background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
    
38.         background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
    
39.         background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
    
40.         background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
    
41.         background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
    
42.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
    
43.         
    
44.         background-color:#72b352;
    
45.     }
    
46.     .myButton:active {
    
47.         position:relative;
    
48.         top:1px;
    
49.     }
    
50.         /*a*/
    
51.        
    
52.     .Button1 {
    
53.         
    
54.         -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
    
55.         -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
    
56.         box-shadow:inset 0px 1px 0px 0px #ffe0b5;
    
57.         
    
58.         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
    
59.         background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
    
60.         background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
    
61.         background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
    
62.         background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
    
63.         background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
    
64.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
    
65.         
    
66.         background-color:#fbb450;
    
67.         
    
68.         -moz-border-radius:7px;
    
69.         -webkit-border-radius:7px;
    
70.         border-radius:7px;
    
71.         
    
72.         border:1px solid #c97e1c;
    
73.         
    
74.         display:inline-block;
    
75.         color:#ffffff;
    
76.         font-family:Trebuchet MS;
    
77.         font-size:13px;
    
78.         font-weight:bold;
    
79.         padding:6px 11px;
    
80.         text-decoration:none;
    
81.         
    
82.         text-shadow:0px 1px 0px #8f7f24;
    
83.         
    
84.     }
    
85.     .Button1:hover {
    
86.         
    
87.         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
    
88.         background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
    
89.         background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
    
90.         background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
    
91.         background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
    
92.         background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
    
93.         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
    
94.         
    
95.         background-color:#f89306;
    
96.     }
    
97.     .Button1:active {
    
98.         position:relative;
    
99.         top:1px;
    
100.     }
     

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

2 แล้วทำการเปิดไฟล์  /www/template/สกินที่ใช้/forum/forumdisplay.htm  แล้วทำการ หา

1. <ul id="thread_types" class="ttp bm cl">
   
2.                                                 <!--{hook/forumdisplay_threadtype_inner}-->
   
3.                                                 <li id="ttp_all" {if !$_GET['typeid'] && !$_GET['sortid']}class="xw1 a"{/if}><a href="forum.php?mod=forumdisplay&fid=$_G[fid]{if $_G['forum']['threadsorts']['defaultshow']}&filter=sortall&sortall=1{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">{lang forum_viewall}</a></li>
   
4.                                                 <!--{if $_G['forum']['threadtypes']}-->
   
5.                                                         <!--{loop $_G['forum']['threadtypes']['types'] $id $name}-->
   
6.                                                                 <!--{if $_GET['typeid'] == $id}-->
   
7.                                                                 <li class="xw1 a"><a href="forum.php?mod=forumdisplay&fid=$_G[fid]{if $_GET['sortid']}&filter=sortid&sortid=$_GET['sortid']{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}"><!--{if $_G[forum][threadtypes][icons][$id] && $_G['forum']['threadtypes']['prefix'] == 2}--><img class="vm" src="$_G[forum][threadtypes][icons][$id]" alt="" /> <!--{/if}-->$name<!--{if $showthreadclasscount[typeid][$id]}--><span class="xg1 num">$showthreadclasscount[typeid][$id]</span><!--{/if}--></a></li>
   
8.                                                                 <!--{else}-->
   
9.                                                                 <li><a href="forum.php?mod=forumdisplay&fid=$_G[fid]&filter=typeid&typeid=$id$forumdisplayadd[typeid]{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}"><!--{if $_G[forum][threadtypes][icons][$id] && $_G['forum']['threadtypes']['prefix'] == 2}--><img class="vm" src="$_G[forum][threadtypes][icons][$id]" alt="" /> <!--{/if}-->$name<!--{if $showthreadclasscount[typeid][$id]}--><span class="xg1 num">$showthreadclasscount[typeid][$id]</span><!--{/if}--></a></li>
   
10.                                                                 <!--{/if}-->
    
11.                                                         <!--{/loop}-->
    
12.                                                 <!--{/if}-->
    
13. 
    
14.                                                 <!--{if $_G['forum']['threadsorts']}-->
    
15.                                                         <!--{if $_G['forum']['threadtypes']}--><li><span class="pipe">|</span></li><!--{/if}-->
    
16.                                                         <!--{loop $_G['forum']['threadsorts']['types'] $id $name}-->
    
17.                                                                 <!--{if $_GET['sortid'] == $id}-->
    
18.                                                                 <li class="xw1 a"><a href="forum.php?mod=forumdisplay&fid=$_G[fid]{if $_GET['typeid']}&filter=typeid&typeid=$_GET['typeid']{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">$name<!--{if $showthreadclasscount[sortid][$id]}--><span class="xg1 num">$showthreadclasscount[sortid][$id]</span><!--{/if}--></a></li>
    
19.                                                                 <!--{else}-->
    
20.                                                                 <li><a href="forum.php?mod=forumdisplay&fid=$_G[fid]&filter=sortid&sortid=$id$forumdisplayadd[sortid]{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">$name<!--{if $showthreadclasscount[sortid][$id]}--><span class="xg1 num">$showthreadclasscount[sortid][$id]</span><!--{/if}--></a></li>
    
21.                                                                 <!--{/if}-->
    
22.                                                         <!--{/loop}-->
    
23.                                                 <!--{/if}-->
    
24.                                                 <!--{hook/forumdisplay_filter_extra}-->
    
25.                                         </ul>

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

แล้วทำการลบออก

3 เพิ่มโค้ดตัวนี้เข้าไป แทนที่ตรงที่ ลบ

1. <ul id="thread_types" class="ttp bm cl">
   
2. 
   
3.                                                 <!--{hook/forumdisplay_threadtype_inner}-->
   
4. 
   
5.                                                 <li><a class="Button1" href="forum.php?mod=forumdisplay&fid=$_G[fid]{if $_G['forum']['threadsorts']['defaultshow']}&filter=sortall&sortall=1{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">{lang forum_viewall}</a></li>
   
6. 
   
7.                                                 <!--{if $_G['forum']['threadtypes']}-->
   
8. 
   
9.                                                         <!--{loop $_G['forum']['threadtypes']['types'] $id $name}-->
   
10. 
    
11.                                                                 <!--{if $_GET['typeid'] == $id}-->
    
12. 
    
13.                                                                 <li class="xw1 a"><a href="forum.php?mod=forumdisplay&fid=$_G[fid]{if $_GET['sortid']}&filter=sortid&sortid=$_GET['sortid']{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}"><!--{if $_G[forum][threadtypes][icons][$id] && $_G['forum']['threadtypes']['prefix'] == 2}--><img class="vm" src="$_G[forum][threadtypes][icons][$id]" alt="" /> <!--{/if}-->$name<!--{if $showthreadclasscount[typeid][$id]}--><span class="xg1 num">$showthreadclasscount[typeid][$id]</span><!--{/if}--></a></li>
    
14. 
    
15.                                                                 <!--{else}-->
    
16. 
    
17.                                                                 <li><a class="myButton" href="forum.php?mod=forumdisplay&fid=$_G[fid]&filter=typeid&typeid=$id$forumdisplayadd[typeid]{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}"><!--{if $_G[forum][threadtypes][icons][$id] && $_G['forum']['threadtypes']['prefix'] == 2}--><img class="vm" src="$_G[forum][threadtypes][icons][$id]" alt="" /> <!--{/if}-->$name<!--{if $showthreadclasscount[typeid][$id]}--><span class="xg1 num">$showthreadclasscount[typeid][$id]</span><!--{/if}--></a></li>
    
18. 
    
19.                                                                 <!--{/if}-->
    
20. 
    
21.                                                         <!--{/loop}-->
    
22. 
    
23.                                                 <!--{/if}-->
    
24. 
    
25. 
    
26. 
    
27.                                                 <!--{if $_G['forum']['threadsorts']}-->
    
28. 
    
29.                                                         <!--{if $_G['forum']['threadtypes']}--><li><span class="pipe">|</span></li><!--{/if}-->
    
30. 
    
31.                                                         <!--{loop $_G['forum']['threadsorts']['types'] $id $name}-->
    
32. 
    
33.                                                                 <!--{if $_GET['sortid'] == $id}-->
    
34. 
    
35.                                                                 <li class="xw1 a"><a href="forum.php?mod=forumdisplay&fid=$_G[fid]{if $_GET['typeid']}&filter=typeid&typeid=$_GET['typeid']{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">$name<!--{if $showthreadclasscount[sortid][$id]}--><span class="xg1 num">$showthreadclasscount[sortid][$id]</span><!--{/if}--></a></li>
    
36. 
    
37.                                                                 <!--{else}-->
    
38. 
    
39.                                                                 <li><a href="forum.php?mod=forumdisplay&fid=$_G[fid]&filter=sortid&sortid=$id$forumdisplayadd[sortid]{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">$name<!--{if $showthreadclasscount[sortid][$id]}--><span class="xg1 num">$showthreadclasscount[sortid][$id]</span><!--{/if}--></a></li>
    
40. 
    
41.                                                                 <!--{/if}-->
    
42. 
    
43.                                                         <!--{/loop}-->
    
44. 
    
45.                                                 <!--{/if}-->
    
46. 
    
47.                                                 <!--{hook/forumdisplay_filter_extra}-->
    
48. 
    
49.                                         </ul>

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

หรือ โหลดไฟล์นี้ไปทับได้เลย


++++ ให้ก็ดี เด้อพี่น้อง

เว็บผู้จัดทำ

www.beta.in.th

cyber2friends

ขอบคุณครับ

jameiiz

เจ๋งมากพี่น้อง !

exesiden

ขอบคุณครับ

zeawer

อยากเห็นตัวอย่างอ่ะคับ แต่ขอบคุณไว้ก่อน อิอิ

bomlovesom

รูปไม่ขึ้น

panya11421

ผมลองแล้ว ดูดีขึ้นเยอะเลยครับ

maythane01

ผมมองภาพที่แนบมาไม่เห็นอะครับ ช่วยแนบใหม่หน่อยได้ไหม ผมอยากรู้ว่าเป็นยังไง ขอบคุณครับ

MAXterbomax

ขอบคุณครับท่าน

MHOZ

เก่งมากครับ