DedeCms软件等级＂★＂用div+css替换成图标显示

cms是当前非常流行的制作动态网址的网站系统，dedecms也是当前很多站长非常喜欢而且是使用最多的cms建站系统，但是dedecms建站系统有很多小细节做得不是非常理想，最近发现dedecms软件栏目的详情页面内容-软件的推荐等级竟然是利用★这个符号来实现的，这样看起来非常不美观而且没有任何技术含量，这个问题应该也困扰了很多站长，发现这个问题后在百度搜索了一些关于解决这个问题的方法，但是也都不是很理想。所以小编整理出了一个比较理想的修改方案，利用div+css来实现完美的★替换成图片显示。在此分享跟各位需要的站长，做了这个修改后我想各位站长的网站会更加美观看起来心情也会无比舒畅。
一，网站根目录下  include/helpers/channelunit.helper.php 找到这个php文件，然后用 dreamweaver8  或者其他编辑工具打开，
/**
 *  用星表示软件或Flash的等级
 *
 * @param     string  $rank  星星数
 * @return    string
 */
if ( ! function_exists('GetRankStar'))
{
    function GetRankStar($rank)
    {
        $nstar = "";
        for($i=1;$i<=$rank;$i++)
        {
            $nstar .= "★";
        }
        for($i;$i<=5;$i++)
        {
            $nstar .= "☆";
        }
        return $nstar;
    }
}
二，找到以上代码，以上的php代码就是控制实心信息与空心星星的个数的代码，将其替换为：
/**
 *  用星表示软件或Flash的等级
 *
 * @param     string  $rank  星星数
 * @return    string
 */
if ( ! function_exists('GetRankStar'))
{
    function GetRankStar($rank)
    {
        $nstar = "";
        for($i=1;$i<=$rank;$i++)
        {
            $nstar .= "x";
        }
        
        return $nstar;
    }
}
三，替换后只保留了实心星星显示的数量而直接删除了空心星星的显示数量，下面我们来修改下前台的html模板代码以及css，来达到软件推荐等级用星星图标显示。
四，找到 templets/default/article_soft.htm 这个htm文件，这个是dedecms系统默认的模板路径，如果您的模板做过更改请按照您的模板路径与文件进行修改，同样用DW或者其他编辑工具打开，然后找到软件等级：{dede:field.softrank function='GetRankStar(@me)'/} 这段代码，将其替换为 。好的，到此我们的php文件以及htm问就修改完成了，下面让我们来增加css代码以及图片文件，找到您模板加载的css文件，在里面增加css代码如下：
.rate-bar {
    background:url(/images/main-bg-list.png) no-repeat;
    float:left;
    height:13px;
    overflow:hidden;
    padding:0;
}
.infolist .rate-bar {
    background-position:0 -55px;
    float:left;
    height:13px;
    margin:9px 0 0;
    overflow:hidden;
    padding:0;
    width:70px;
}
.rate-bar div {
    background:url(/images/main-bg-list.png) no-repeat scroll 0 -40px;
    float:left;
    height:13px;
    overflow:hidden;
    padding:0;
}
.rate-bar .xxxxx {
    width:100%;
}
.rate-bar .xxxx {
    width:80%;
}
.rate-bar .xxx {
    width:60%;
}
.rate-bar .xx {
    width:40%;
}
.rate-bar .x {
    width:20%;
}
增加这些css代码后保存，下面我们来上传星星的图片，

ok这样几个步骤做完之后到你的dedecms系统后台清理系统缓存，重新生成文章页面htm文件，前台刷新看看效果吧。



前台代码非常整洁，效果也非常漂亮，因为在网上看的很多修改方法是利用显示几个星星图片来实现的，那样看起来多余代码很多而且不是很美观，所以小编分享下这个修改方法，希望对使用dedecms的站长们有所帮助。
本篇文章由 80站长网 原创，如转载请注明文章出处为https://www.80zhan.com/tech/242.html