WordPress主题-Ripro子主题修改-菜单增加角标教程

作者 : 三网云 本文共947个字,预计阅读时间需要3分钟 发布时间: 2020-07-30 共136人阅读

 

很多人都在找这个美化角标,感觉很流行,但一直没教程,网上一直都找不到,今天就分享Ripro修改美化方法出来给大家美化,效果如下图,当然颜色随你定,其实也很简单!

 

效果图:

 

WordPress主题-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>

添加好后就像这样:

WordPress主题-Ripro子主题修改-菜单增加角标教程-三网云-小程序源码|商业源码|专注精品源码|免费下载网站|分享不一样的源码资源平台


1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程资源,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

三网云-小程序源码|商业源码|专注精品源码|免费下载网站|分享不一样的源码资源平台 » WordPress主题-Ripro子主题修改-菜单增加角标教程

常见问题FAQ

美化包支持最新版本吗?
三网云最新美化支持永久更新!
VIP一天可以下载多少资源
开通三网云会员,资源可以无限制下载

发表评论