#精品
RIPRO美化之菜单增加角标WordPress美化教程

zhanceo

2021-04-30 WordPress 0 1,267 百度已收录

郑重承诺丨优站网提供安全交易、信息保真!

升级会员

增值服务：

自动发货

网盘下载

安装指导

环境配置

二次开发

网站建设

¥ 0 元（VIP免费升级VIP） 开通VIP尊享优惠特权

点赞 (0) 收藏 (0)

立即下载升级会员购买教程售后支持

zhanceo

联系电话：0371-61877210

进入TA的商铺联系官方客服

详情介绍
常见问题
相关文章
发表评论

立即咨询

详情介绍

这个角标貌似很流行，连老油条在更新的它的站都用到了，优站网今天就分享下RIPRO修改-菜单增加角标方法。效果如上图，当然颜色随你定，很简单！

方法

首先复制这段css到/ripro/assets/css/diy.css里，

.vip { display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; } .new { display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #f308a0 0%, #fb0655 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; } /*菜单标签美化*/ .label { display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to right, #6454ef 0%, #3021ec 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }

然后到主题下面的菜单设置里，在你的菜单名字后面添加上你需要的代码，如

<span class="vip">真香</span>

添加好后就是下面这样的：

资源下载此资源仅限注册用户下载，请先

客服QQ：1427707223

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

免责声明 ⚠️ 1. 本站所有资源来源于网络收集，若资源侵犯了您的合法权益，请来信通知我们（Email: 1427707223@qq.com），我们会及时删除，给您带来的不便，我们深表歉意！ 2. 分享目的仅供大家学习和交流，若使用商业用途，请购买正版授权！否则产生的一切后果将由下载用户自行承担！ 3. 会员不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 6. 因源码具有可复制性，一经购买，不得以任何形式退款。 7.更多详情请点击查看

优站网 WordPress RIPRO美化之菜单增加角标WordPress美化教程 https://www.zhanceo.com/223.html