好运博客

    dedecms的顶（踩）客功能在新版5.3版本上做的很漂亮，他是通过一个底图，然后调用系统设置的文字实现的，但如何修改成自己想要的样式呢？比如admin5网站上的样式。大家可能看到admin5上的样式完全是用图片完成的，没有系统默认的文字，文字是在图片上做上去的，那么我们如何去掉系统带的文字，然后替换成图片呢？本文将教你修改的方法。

    我们查看了一下他的内容页模板，发现把article_article.htm文件中存在的“顶一下”、“踩一下”删除，根本没有效果。实际上他是由php系统文件控制的，那么我们就进入他的系统文件plus文件夹中找到digg_ajax.php，打开，将里面的“顶一下”、“踩一下”删除，呵呵，成功了。然后将我们做好的图片替换原来的图片。再适当调整即可。
    如果我们用本站提供的图片，可能会出现点问题，就是因为删除了“顶一下”、“踩一下”，他的顶（踩）统计数字会跑到左边去，如果我们要做成如admin5网站上的样式，将顶（踩）统计数字放在下面，那么我们可以适当再调整以达到目的，下面介绍具体过程：
    1、把article_article.htm文件中存在的“顶一下”、“踩一下”删除；
    2、打开plus文件夹，找到digg_ajax.php，找到：

$digg = '<div class="diggbox digg_good" onmousemove="this.style.backgroundPosition=\'left bottom\';" onmouseout="this.style.backgroundPosition=\'left top\';" onclick="postDigg(\'good\','.$id.')">
   <div class="digg_act">顶一下</div>
   <div class="digg_num">('.$row['goodpost'].')</div>
   <div class="digg_percent">
    <div class="digg_percent_bar"><span style="width:'.$row['goodper'].'%"></span></div>
    <div class="digg_percent_num">'.$row['goodper'].'%</div>
   </div>
  </div>
  <div class="diggbox digg_bad" onmousemove="this.style.backgroundPosition=\'right bottom\';" onmouseout="this.style.backgroundPosition=\'right top\';" onclick="postDigg(\'bad\','.$id.')">
   <div class="digg_act">踩一下</div>
   <div class="digg_num">('.$row['badpost'].')</div>
   <div class="digg_percent">
    <div class="digg_percent_bar"><span style="width:'.$row['badper'].'%"></span></div>
    <div class="digg_percent_num">'.$row['badper'].'%</div>
   </div>
  </div>';
修改成：

$digg = '<div class="diggbox digg_good" onmousemove="this.style.backgroundPosition=\'left bottom\';" onmouseout="this.style.backgroundPosition=\'left top\';" onclick="postDigg(\'good\','.$id.')">
   <div class="digg_act"></div>
   <div class="digg_num"><br /></div>
   <div class="digg_percent">
    <div class="digg_percent_bar"><span style="width:'.$row['goodper'].'%"></span></div>
    <div class="digg_percent_num">'.$row['goodper'].'%('.$row['goodpost'].')</div>
   </div>
  </div>
  <div class="diggbox digg_bad" onmousemove="this.style.backgroundPosition=\'right bottom\';" onmouseout="this.style.backgroundPosition=\'right top\';" onclick="postDigg(\'bad\','.$id.')">
   <div class="digg_act"></div>
   <div class="digg_num"><br /></div>
   <div class="digg_percent">
    <div class="digg_percent_bar"><span style="width:'.$row['badper'].'%"></span></div>
    <div class="digg_percent_num">'.$row['badper'].'%('.$row['badpost'].')</div>
   </div>
  </div>';
    3、打开templets/style/page.css文件，找到：

.viewbox .diggbox .digg_percent .digg_percent_bar{
width:100px;
height:7px;
background:#E8E8E8;
border-right:1px solid #CCC;
float:left;
overflow:hidden;
margin-top:3px;
}
将width:100px;修改为width:72px;或其它数值。这就完成了。
最后在我们的管理页面上将网页更新一下即可看到最终的样子。
下面是需要替换的图片，替换图片的位置在 \templets\images 下面（注意要保存为.png格式的）
 
更改后的样子：
 
演示地址：http://www.shckw.com

（适当修改）原帖地址：http://www.zxx6.com/bencandy.php?fid-52-id-4008-page-1.htm