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

2018年2月19日09:17:39 6 8.9K 717字阅读2分23秒

WordPress主题有无数个,但是真正符合自己标准的寥寥无几,所以,大多数童鞋安装主题后都会自己动手进行美化。因为本站使用的是知更鸟begin主题,其主题功能很牛叉,但是风格真是丑的一比啊,所以我们就动手自己稍微修改。今天给大家带来一个美化面包屑导航的方法,是在【语云博客】看到的,非常实用,修改也很简单。之前也看到了类似教程,但是或多或少会有点问题,这个修改后的方法,一直没发现什么问题。因此,拿来跟大家分享。

一、修改style.css文件

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

  1. /** 位置 **/
  2. .breadcrumb {
  3.     width: 1120px;
  4.     height: 25px;
  5.     line-height: 25px;
  6.     margin: 0 auto;
  7.     padding-left: 10px;
  8.     white-space: nowrap;
  9.     word-wrap: normal;
  10.     text-overflow: ellipsis;
  11.     overflow: hidden;
  12. }

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

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

二、效果前后对比

效果后:

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

效果前:

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

完美解决!

 

weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
漂亮的音乐播放器插件Aplayer 资源分享

漂亮的音乐播放器插件Aplayer

Aplayer是一款HTML5的WordPress音乐播放器,界面仿照网易云音乐外链播放器,每个音乐需要填写音乐名称、作者、音乐封面、还有外链地址,添加成功后在音乐列表右侧复制短代码到文章需要显示的位...
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
知更鸟主题文章底部添加个性图标和分类目录 WordPress

知更鸟主题文章底部添加个性图标和分类目录

星光自己也摸索过文章显示当前分类目录的方法,虽然也是成功了,但是不怎么美丽,离我的要求还有一点点的距离,没有达到完美化。在与“简单生活”博客友联过程中看到他的网站显示的效果正是我想要的,随与博主联系获...
匿名

发表评论

匿名网友 填写信息

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

评论:6   其中:访客  3   博主  3
    • pydata pydata 0 来自天朝的朋友 搜狗浏览器 Windows 10 上海市 电信

      博主,您好,请问文章标题和H标签的背景是怎么修改的?

        • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

          回复 pydata 需要的话,自己扒一下代码就可以了。我也是从他们那里学的。 :cool:

        • . . 1 来自天朝的朋友 QQ浏览器  Android 8.1.0 Redmi 6 Pro Build/OPM1.171019.019 广东省 联通

          楼主标题文字不居中怎么解?

            • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 10 山东省潍坊市 联通

              回复 . 文章标题文字不居中吗?

            • 极速ACP备考 极速ACP备考 0 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 电信CDMA

              应该把.breadcrumb
              换成.bread
              并在标签中加入width: 1120px;

                • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  YAL-AL10 Build/HUAWEIYAL-AL10 山东省青岛市 联通

                  回复 极速ACP备考 最新版主题换成了.bread ,这个是旧主题的美化方法,谢谢指教!