欢迎您光临丑恰网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!

RiPro-V2美化之菜单角标添加 WordPress教程

RiPro-V2美化之菜单角标添加 WordPress教程

如上图所示效果

下面开始教程:

首先在 后台,主题设置,顶部设置,自定义CSS处添加以下代码

/* 分类角标 */
.afoxin {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top, #b4b1ef, #e21fc7 7.56%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}

.afonew {
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;
}
/* 分类角标 */

然后在需要添加角标的那个菜单名称后面写上以下代码

<span class="afonew">HOT</span>

注意:有两个样式和值就是class=里面的afonew也可以换成afoxin后面>hot<是自定义显示的文字。

  • 22913会员总数(位)
  • 2518资源总数(个)
  • 09本周发布(个)
  • 02 今日发布(个)
  • 1869稳定运行(天)

升级VIP尊享更多特权立即升级