修改DUX主题自带标签云变成彩色的方法实用教程-9i资源网

上次分享了，修改WordPress自带标签云为彩色的，今天就来分享修改dux主题自带的标签云成为彩色的，类似本站一样的效果。

1 . 操作方法

第一步，把下面的js代码加入，主题的页脚文件的< /body>之前即可：

<script type="text/javascript">len = $(".widget_ui_tags .items a").length - 1;
    $(".widget_ui_tags .items a").each(function(i) {
        var let = new Array( '27ea80','3366FF','ff5473','df27ea', '31ac76', 'ea4563', '31a6a0', '8e7daa', '4fad7b', 'f99f13', 'f85200', '666666');
        var random1 = Math.floor(Math.random() * 12) + 0;
        var num = Math.floor(Math.random() * 5 + 12);
        $(this).attr('style', 'background:#' + let[random1] + '; opacity: 0.6;'+'');
        if ($(this).next().length > 0) {
            last = $(this).next().position().left
        }
    });</script>

第二步，修改main.css中，以/* widget_ui_tags =========*/开头的这一段，全部替换成下面的代码，善用搜索功能，可为我们节省很多时间。

/* widget_ui_tags ======================================================================================================== */
.widget_ui_tags .items {
    overflow: hidden;
    padding: 15px 0 12px 15px
}

.widget_ui_tags .items a {
    color: #fff;
    background-color: #f6f6f6;
    float: left;
    width: 30%;
    margin: 1%;
    padding: 3px;
    font-size: 12px;
    height: 28px;
    line-height: 22px;
    overflow: hidden;
    text-align: center
}

.widget_ui_tags .items a:hover {
    color: #fff;
    background-color: #45b6f7;
    border: 1px solid #fff;
    opacity: 1!important
}
/* widget_ui_posts ======================================================================================================== */

到这里之后再后台”外观→小工具→DUX标签云”拖到你想要显示的地方保存即可。

回到首页刷新，效果已经出来，OK教程结束！！！