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>

本站融合FontAwesome图标及右上角角标如喜欢,请添加以下代码:

<span><i class="fa fa-desktop"></i>辣条科技</span><span class="vip">免费</span>
1. 本站所有资源来源于用户上传和网络,只做学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除! 2. 盗版,破解有损他人权益和违法作为,请各位用户支持正版。 3. 由于未及时购买和付费发生的侵权行为,与本站无关。 4. 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 5. 资源如果失效或错链请联系管理员:66303299
21街博客 » WordPress主题Ripro 修改-菜单增加角标

发表评论

提供最优质的资源集合

立即查看 了解详情