美化知更鸟begin主题自带的标签云样式代码记录

沃森博客 2017年11月26日00:15:39WordPress评论616阅读模式

知更鸟begin主题自带的标签云样式美化后效果图如下:

美化知更鸟begin主题自带的标签云样式代码记录

修改如下:

css代码

  1. .tagcloud{  
  2. padding:14px 0 14px 12px;  
  3. }  
  4. .tagcloud a{  
  5. float:left;  
  6. margin:3px;  
  7. line-height:26px;  
  8. text-align:center;  
  9. border:1px solid #ddd;  
  10. border-radius:2px;  
  11. padding-top:0;  
  12. padding-right:5px;  
  13. padding-bottom:0;  
  14. padding-left:5px;  
  15. overflow:hidden;  
  16. display:block;  
  17. width:92px;  
  18. height:28px;  
  19. }  
  20. .tagcloud a{  
  21. color:#fff;  
  22. }  

 

js代码

  1. <script type="text/javascript">box_width = $("#cx_tag_cloud-5").width();  
  2. len = $(".tagcloud a").length - 1;  
  3. $(".tagcloud a").each(function(i) {  
  4.     var let = new Array('3366FF', '31ac76', 'ea4563', '31a6a0', '8e7daa', '4fad7b', 'f99f13', 'f85200', '666666');  
  5.     var random1 = Math.floor(Math.random() * 9) + 0;  
  6.     var num = Math.floor(Math.random() * 6 + 9);  
  7.     $(this).attr('style', 'background:#' + let[random1] + '');  
  8.     if ($(this).next().length > 0) {  
  9.         last = $(this).next().position().left  
  10.     }  
  11. });</script>  

css代码放主题样式表文件(style.css)也可以放在“外观->定制风格”里面,js自己调用或添加到页脚文件(主题下footer.php文件),代码由js随机颜色加css样式修改而成。

代码来自:https://www.mom1.cn/3228.html

沃森博客
  • 本文由 发表于 2017年11月26日00:15:39
  • 本文来自互利网收集整理,问题反馈联系邮箱:wosnnet@foxmail.com,转载请务必保留本文链接:https://wosn.net/814.html

发表评论