Joe主题导航栏标签添加角标

给自己的菜单增加角标,突出重点,效果那是相当的不错!推荐给小伙伴们!
20220701125532.jpg

CSS样式

登录后台–>设置外观–>全局设置–>自定义CSS

.ff-red {
display: inline-block;
transform: translateY(-12px);
    font-size: .75rem;
    letter-spacing: 0.05em;
    background: linear-gradient(to top, #efd3b0 0%, #eb4444 100%);
    color: #ffffff;
    border-radius: 1rem;
    padding: .15rem .275rem;
    line-height: 1;
    font-weight: bold;
}

编辑header.php

路径: usr/themes/Joe/public/header.php
找到合适的位置,修改代码:

<?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?>
  <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?>
  <?php if ($item['title'] == '服务') : ?>
        <span class="ff-red">付费</span>
        <?php endif; ?>
  </a>
<?php endforeach; ?>

本文来自IT不难小伙伴

© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞8赞赏 分享
评论 抢沙发
头像
非注册用户需审核通过后才能查看。友好交流,勿发纯表情,勿恶意灌水!
提交
头像

昵称

取消
昵称表情代码图片
    • 头像Joinliu0
    • 头像wel0
        • 头像wel0
          • Jaden的头像-尘遇钻石会员Jaden徽章-资深玩家-尘遇等级-LV6-尘遇作者0