dedecms5.3 顶一下踩一下图片的修改方法

    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


70%(7)

30%(3)

发表评论

*