上次分享了,修改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教程结束!!!
评论前必须登录!
立即登录 注册