纯净子主题使用教程,菜单名称前添加彩色圆圈

纯净子主题使用教程,菜单名称前添加彩色圆圈

  • 正文概述
  • WordPress菜单名称前添加彩色圆圈,以及菜单名称后面添加文字标签,适用于任何WordPress主题。

    菜单名称前面彩色圆圈

    <i class="o-lan"></i> <!--蓝色-->
    <i class="o-huang"></i> <!--黄色-->
    <i class="o-lv"></i> <!--绿色-->
    <i class="o-hong"></i> <!--红色-->
    <i class="o-hui"></i> <!--灰色-->
    <i class="o-zi"></i> <!--紫色-->

    完整CSS代码

    .o-lan {
        box-sizing: border-box;
        content: '';
        width: 12px;
        height: 12px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        margin-left: 12px;
        margin-top: -5px;
        left: 0;
        border: 3px solid #7a99f2;
    }

    SPAN文字标签

    <span class="v-span">HOT</span>
    

    完整CSS代码

    .v-span {
        display: inline-block;
        font-size: 12px;
        background: #3F51B5;
        color: #fff;
        line-height: 1;
        padding: 3px 6px;
        border-radius: 3px;
        letter-spacing: 0.5px;
        margin-left: .5rem;
        border-radius: 10px;
    }
    
    .ripro-dark .v-span { /*暗黑模式*/
        background: #FFC107;
        color: #000;
    }
    

    使用教程

    前往后台,外观->菜单,彩色圆圈把代码放置菜单名称前,文字标签把代码放置菜单名称后面,保存菜单。

    可以根据自己的喜好更改CSS代码。

    纯净子主题,干净整洁,独立后台,集成自助广告系统。
    主题兽 » 纯净子主题使用教程,菜单名称前添加彩色圆圈

    发表评论