โมแถบ โชว์ สถานะ กระทู้สวยๆ css [By ETStudiO]
สวัสดี ครับ วันนี้ผมจะมาสอนวิธีโมแถบโชว์สถานะกระทู้http://upic.im/images/2013/06/17/tt.png
โมใหม่ให้สวยงาม แบบนี้
http://upic.im/images/2013/06/17/da.png
วิธีทำ
1 เพิ่ม css โดยการเปิดไฟล์/www/template/สกินที่ใช้อยู่/common/common.css
แล้วเพิ่ม โค้ดตัวนี้ไว้สุดท้าย .myButton {
-moz-box-shadow: 0px 10px 14px -7px #3e7327;
-webkit-box-shadow: 0px 10px 14px -7px #3e7327;
box-shadow: 0px 10px 14px -7px rgb(223, 223, 223);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
background-color:#77b55a;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #4b8f29;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;
text-shadow:0px 1px 0px #5b8a3c;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
background-color:#72b352;
}
.myButton:active {
position:relative;
top:1px;
}
/*a*/
.Button1 {
-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
box-shadow:inset 0px 1px 0px 0px #ffe0b5;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
background-color:#fbb450;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #c97e1c;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:13px;
font-weight:bold;
padding:6px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
.Button1:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
background-color:#f89306;
}
.Button1:active {
position:relative;
top:1px;
}
2 แล้วทำการเปิดไฟล์/www/template/สกินที่ใช้/forum/forumdisplay.htmแล้วทำการ หา<ul id="thread_types" class="ttp bm cl">
<!--{hook/forumdisplay_threadtype_inner}-->
<li id="ttp_all" {if !$_GET['typeid'] && !$_GET['sortid']}class="xw1 a"{/if}><a href="forum.php?mod=forumdisplay&fid=$_G{if $_G['forum']['threadsorts']['defaultshow']}&filter=sortall&sortall=1{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">{lang forum_viewall}</a></li>
<!--{if $_G['forum']['threadtypes']}-->
<!--{loop $_G['forum']['threadtypes']['types'] $id $name}-->
<!--{if $_GET['typeid'] == $id}-->
<li class="xw1 a"><a href="forum.php?mod=forumdisplay&fid=$_G{if $_GET['sortid']}&filter=sortid&sortid=$_GET['sortid']{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}"><!--{if $_G[$id] && $_G['forum']['threadtypes']['prefix'] == 2}--><img class="vm" src="$_G[$id]" alt="" /> <!--{/if}-->$name<!--{if $showthreadclasscount[$id]}--><span class="xg1 num">$showthreadclasscount[$id]</span><!--{/if}--></a></li>
<!--{else}-->
<li><a href="forum.php?mod=forumdisplay&fid=$_G&filter=typeid&typeid=$id$forumdisplayadd{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}"><!--{if $_G[$id] && $_G['forum']['threadtypes']['prefix'] == 2}--><img class="vm" src="$_G[$id]" alt="" /> <!--{/if}-->$name<!--{if $showthreadclasscount[$id]}--><span class="xg1 num">$showthreadclasscount[$id]</span><!--{/if}--></a></li>
<!--{/if}-->
<!--{/loop}-->
<!--{/if}-->
<!--{if $_G['forum']['threadsorts']}-->
<!--{if $_G['forum']['threadtypes']}--><li><span class="pipe">|</span></li><!--{/if}-->
<!--{loop $_G['forum']['threadsorts']['types'] $id $name}-->
<!--{if $_GET['sortid'] == $id}-->
<li class="xw1 a"><a href="forum.php?mod=forumdisplay&fid=$_G{if $_GET['typeid']}&filter=typeid&typeid=$_GET['typeid']{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">$name<!--{if $showthreadclasscount[$id]}--><span class="xg1 num">$showthreadclasscount[$id]</span><!--{/if}--></a></li>
<!--{else}-->
<li><a href="forum.php?mod=forumdisplay&fid=$_G&filter=sortid&sortid=$id$forumdisplayadd{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">$name<!--{if $showthreadclasscount[$id]}--><span class="xg1 num">$showthreadclasscount[$id]</span><!--{/if}--></a></li>
<!--{/if}-->
<!--{/loop}-->
<!--{/if}-->
<!--{hook/forumdisplay_filter_extra}-->
</ul>แล้วทำการลบออก
3 เพิ่มโค้ดตัวนี้เข้าไป แทนที่ตรงที่ ลบ<ul id="thread_types" class="ttp bm cl">
<!--{hook/forumdisplay_threadtype_inner}-->
<li><a class="Button1" href="forum.php?mod=forumdisplay&fid=$_G{if $_G['forum']['threadsorts']['defaultshow']}&filter=sortall&sortall=1{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">{lang forum_viewall}</a></li>
<!--{if $_G['forum']['threadtypes']}-->
<!--{loop $_G['forum']['threadtypes']['types'] $id $name}-->
<!--{if $_GET['typeid'] == $id}-->
<li class="xw1 a"><a href="forum.php?mod=forumdisplay&fid=$_G{if $_GET['sortid']}&filter=sortid&sortid=$_GET['sortid']{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}"><!--{if $_G[$id] && $_G['forum']['threadtypes']['prefix'] == 2}--><img class="vm" src="$_G[$id]" alt="" /> <!--{/if}-->$name<!--{if $showthreadclasscount[$id]}--><span class="xg1 num">$showthreadclasscount[$id]</span><!--{/if}--></a></li>
<!--{else}-->
<li><a class="myButton" href="forum.php?mod=forumdisplay&fid=$_G&filter=typeid&typeid=$id$forumdisplayadd{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}"><!--{if $_G[$id] && $_G['forum']['threadtypes']['prefix'] == 2}--><img class="vm" src="$_G[$id]" alt="" /> <!--{/if}-->$name<!--{if $showthreadclasscount[$id]}--><span class="xg1 num">$showthreadclasscount[$id]</span><!--{/if}--></a></li>
<!--{/if}-->
<!--{/loop}-->
<!--{/if}-->
<!--{if $_G['forum']['threadsorts']}-->
<!--{if $_G['forum']['threadtypes']}--><li><span class="pipe">|</span></li><!--{/if}-->
<!--{loop $_G['forum']['threadsorts']['types'] $id $name}-->
<!--{if $_GET['sortid'] == $id}-->
<li class="xw1 a"><a href="forum.php?mod=forumdisplay&fid=$_G{if $_GET['typeid']}&filter=typeid&typeid=$_GET['typeid']{/if}{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">$name<!--{if $showthreadclasscount[$id]}--><span class="xg1 num">$showthreadclasscount[$id]</span><!--{/if}--></a></li>
<!--{else}-->
<li><a href="forum.php?mod=forumdisplay&fid=$_G&filter=sortid&sortid=$id$forumdisplayadd{if $_GET['archiveid']}&archiveid={$_GET['archiveid']}{/if}">$name<!--{if $showthreadclasscount[$id]}--><span class="xg1 num">$showthreadclasscount[$id]</span><!--{/if}--></a></li>
<!--{/if}-->
<!--{/loop}-->
<!--{/if}-->
<!--{hook/forumdisplay_filter_extra}-->
</ul>หรือ โหลดไฟล์นี้ไปทับได้เลย
++++ ให้ก็ดี เด้อพี่น้อง
เว็บผู้จัดทำ
www.beta.in.th ขอบคุณครับsm945dz เจ๋งมากพี่น้อง ! ขอบคุณครับ sm900dz อยากเห็นตัวอย่างอ่ะคับ แต่ขอบคุณไว้ก่อน อิอิ รูปไม่ขึ้น ผมลองแล้ว ดูดีขึ้นเยอะเลยครับ ผมมองภาพที่แนบมาไม่เห็นอะครับ ช่วยแนบใหม่หน่อยได้ไหม ผมอยากรู้ว่าเป็นยังไง ขอบคุณครับ ขอบคุณครับท่าน sm942dzsm942dz เก่งมากครับ
หน้า:
[1]
2