RIPRO主题美化—文章下部标签云圆角彩色美化

一、写在前头

  • 圆角标签云美化仅对于ripro主题生效,子主题无效!
  • 具体效果请查看本站 标签云

二、美化教程

(一)修改 diy.css 文件

  • 首先找到ripro主题全局调用的自定义 diy.css 文件(文件目录:wp-content/themes/ripro/assets/css/diy.css),在 diy.css 文件中添加如下代码即可,注意检查css有无给你之前的美化冲突。
/**圆角彩色标签云—云萌阁www.yunmge.com**/
.article-categories { margin-bottom: 10px; margin-top: 30px;
}
.article-categories a { padding: 4px 10px; background-color: #19B5FE; color: white; font-size: 12px; line-height: 16px; font-weight: 400; margin: 0 5px 5px 0; border-radius: 2px; display: inline-block; border-radius: 100px;
}
.article-categories a:nth-child(5n) { background-color: #4A4A4A; color: #FFF
}
.article-categories a:nth-child(5n+1) { background-color: #ff5e5c; color: #FFF
}
.article-categories a:nth-child(5n+2) { background-color: #ffbb50; color: #FFF
}
.article-categories a:nth-child(5n+3) { background-color: #1ac756; color: #FFF
}
.article-categories a:nth-child(5n+4) { background-color: #19B5FE; color: #FFF
}
.article-categories a:hover { background-color: #1B1B1B; color: #FFF
}
.article-title { position: relative; margin-bottom: 15px; font-size: 26px; line-height: 1.3; display: block; font-weight: 400; margin: 0 0 35px; padding: 0 0 30px; border-bottom: 1px solid #e7e7e7; color: #FFF
}

(二)修改 entry-tags.php 文件

  • 首先找到ripro主题的 entry-tags.php 文件(文件目录:wp-content/themes/ripro/parts/entry-tags.php),将
 <div class="entry-tags">
  • 替换为以下代码
 <div class="article-categories">

三、写在后头

  • 修改完成后更换浏览器重新打开查看效果或清除当前浏览器缓存重新加载即可!
云萌阁分享网所有资源均来自网络,如有侵权,请联系 yunmge@qq.com ,我们会及时处理相关信息!
云萌阁分享网 » RIPRO主题美化—文章下部标签云圆角彩色美化

发表评论