WordPress-7B2主题美化之菜单栏彩色角标

今天奇它论坛@老白给大家分享一下WordPress网站-7B2主题美化之菜单栏彩色角标

效果图

WordPress-7B2主题美化之菜单栏彩色角标

 

后台style大法

(转载自npcink,谢谢这位站长的分享:https://www.npc.ink/13031.html

我们以奇它论坛的B2主题为例,在你的菜单中添加如下代码(这是红色的hot)

<li class="n-mark-red">Hot</li>

WordPress-7B2主题美化之菜单栏彩色角标

在你的主题根目录下的style.css文件底部添加以下代码:

/*菜单栏角标-红色-www.qitabbs.com*/
.n-mark-red {
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;
}

其他颜色代码

/*菜单栏角标-黄色-www.qitabbs.com*/
.n-mark-yello {
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;
}

蓝色

/*菜单栏角标-蓝色-www.qitabbs.com*/
.n-mark-blue {
display: inline-block;
-webkit-transform: translateY(-12px);
-ms-transform: translateY(-12px);
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: #188ef4;
background: -webkit-linear-gradient(legacy-direction(to right), #6454ef 0%, #316ce8 100%);
background: -webkit-gradient(linear, left top, right top, from(#6454ef), to(#316ce8));
background: -webkit-linear-gradient(left, #6454ef 0%, #316ce8 100%);
background: -o-linear-gradient(left, #6454ef 0%, #3021ec 100%);
background: linear-gradient(to right, #6454ef 0%, #3021ec 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}

前台style大法

经过奇它论坛站长测试,发现这种方法不适配,总是会有bug,因此采用前台直接设置的方法为佳。在填写菜单的时候,将以下代码添加进菜单即可。

相关美化

WordPress-7B2主题美化之菜单栏彩色角标
WordPress-7B2主题美化之菜单栏彩色角标

WordPress美化之菜单栏引入阿里巴巴Symbol彩色图标教程-B2主题

WordPress-7B2主题美化之菜单栏彩色角标
WordPress-7B2主题美化之菜单栏彩色角标

WordPress网站设置侧栏“最近访客”小工具美化版

WordPress-7B2主题美化之菜单栏彩色角标
WordPress-7B2主题美化之菜单栏彩色角标

WordPress网站7B2主题用户头像旋转特效美化

大家点击文末的文章标签读吧,写了啥都会有的

经验·技巧网站建设

WordPress网站设置侧栏“最近访客”小工具美化版

2021-12-20 11:41:01

经验·技巧网站建设

WordPress美化之菜单栏引入阿里巴巴Symbol彩色图标教程-B2主题

2021-12-20 17:07:24

56 条回复 A文章作者 M管理员
  1. 静彩

    ??谢谢分享

  2. qq1300052010

    ??谢谢分享

  3. wi196324

  4. ml

  5. 周杰伦啊

    那就看一眼吧啊

  6. 哎呦先生

    学习学习

  7. rmgzs1

    学习学习

  8. ttkj

    66666

  9. 腾讯

    等等

  10. 陌陌上

    我想问一下

  11. 张益达m

    哈哈哈哈哈哈哈哈哈哈

  12. 醉醉醉清枫

    感谢站长的无私分享

  13. 祥云瑞雪

    学习一下

  14. 孙德法

    谢谢分享

  15. 熊布斯

    在下看看

  16. Roar

    真厉害

  17. 花

    不错不错

  18. 淡然

    厉害。有点意思

  19. 15141092

    有点意思

  20. LH

    厉害

  21. 骚凌云

    如果不我国服务

  22. 忘忧

    学习下大佬

  23. 曾经

    阿瑟大声地

  24. 王怼怼

    有点叼呀这个。

  25. 恋语

    好厉害

  26. fnzxl

    吃吃饭才

  27. 强子

    看着效果挺不错 安排上

  28. regedit

    666

  29. 夕阳景

    前台大法更好!后台的之前使用了下,个人感觉适配性不太行

  30. kele4962

    学习学习

  31. 阿熊

    感谢老板

  32. chers

    谢谢分享

  33. dede123

    真的不错

  34. 梵高先生

    学习一下

  35. 。。

    学习一下

  36. Floweri

    快看快看看看

  37. Qzero小七

    215154

  38. 乱卖网

    非常好

  39. Qzero小七

    ?

  40. 我的世界

    在郑州郑州郑州

    • 站长老白

      这个我一直没弄好,教程也是转载别人的(充钱买的)

  41. 25℃咖啡

    看看是啥

  42. hhhhhhhhhhhhhhhhhhhhhhhh

  43. 酱油丶Z

    11111111

  44. X2835

    不错不错

个人中心
购物车
今日签到
有新私信 私信列表
搜索