知更鸟begin主题如何美化面包屑导航栏

  • 6
  • 301 views
  • A+
所属分类:wordpress主题

在我们众所周知的WordPress主题多不胜数,但真正让我们喜欢的却没有几个。所以,大多数朋友们安装WP主题后都会尝试着网站找各种教程进行站内美化,为的就是让自己的网站看起来别具一格,可以很好的吸引着大伙的眼球。叶忠文之前也是用过好多WP博客类型的主题,记得第一次用的是翠竹林的WP博客主题,但后来因为没有那么多完善狗能,加上现在也倒闭了所以改用知更鸟Begin主题。

知更鸟begin主题如何美化面包屑导航栏

虽说现在市面上用的人比较多吧,但自己还是挺喜欢的,因为每个人的想法不一样我们便可美化出不一样的效果。虽说其美化的特点多之数不胜数,但如果没有用心美化也还是会丑的一逼。今天我就闲着无聊在星光博客里看到一个WordPredd面包屑导航的美化,没想到这效果还是挺不错的,所以就作者尝试稍微的修改,感觉其效果还是非常的不错的。

之前虽说也看到了类似这种面包屑教程,但或多或少会有点bug问题存在,经过这个修改后的方法,一直没发现什么问题。因此在这里拿来跟大家分享分享,希望对此有所爱好的朋友们能够喜欢。

一、修改style.css文件

打开主题根目录下的styless.css文件,查找下面的代码:

    /** 位置 **/
    .breadcrumb {
        width: 1120px;
        height: 25px;
        line-height: 25px;
        margin: 0 auto;
        padding-left: 10px;
        white-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        overflow: hidden;
    }

将下面的代码替换掉上面的代码:

    .breadcrumb {
            margin: 10px auto;
            border: 1px solid #ddd;
            border-radius: 2px;
            background-color: #fff;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 10px;
    }

二、美化前后效果对比

美化前

知更鸟begin主题面包屑导航栏美化前

美化后

知更鸟begin主题面包屑导航栏美化后

如此一来便大功告成! :grin: :grin: :grin:

Joson

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:6   其中:访客  3   博主  3

    • 简单生活 简单生活 来自天朝的朋友 谷歌浏览器 Windows 10 甘肃省武威市 电信 0

      嘿,美化前后的图片放反了吧!!!!!!

        • Joson Joson  博主 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 鹏博士长城宽带

          @简单生活 还真的是,谢谢提醒

        • 猫叔 猫叔 来自天朝的朋友 谷歌浏览器  Android 7.1.2 OC105 Build/N2G47H 安徽省安庆市岳西县 电信 3

          这难道不是公告吗?面包屑呢?

            • Joson Joson  博主 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 鹏博士长城宽带

              @猫叔 这虽说可以说是公告,但准确来说是面包屑导航

            • 仙踪小栈 仙踪小栈 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省淮北市 电信 2

              效果的确好看多了,所以我也弄了

                • Joson Joson  博主 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 鹏博士长城宽带

                  @仙踪小栈 我没弄,我觉得自带的也挺不错的