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

自然 2019年10月7日10:31:05 评论 20

前提说明一下,这个教程仅适用于最新版本的知更鸟begin主题,适用老版本begin主题的用户需要自己适配,放心很简单的。每个人对于主题的选择是不一样的,大多数只能找到一个相对于符合自己审美wordpress主题,几乎每个人都会对自己的主题进行一番改造,使其趋于完美。

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

今天自然就来和大家分享一下自己对知更鸟begin主题面包屑导航的美化代码,这段代码是从“去看你博客”获得的,修改后的面包屑导航样式更加美观,没有任何突兀感。

修改stytle.css文件

在主题根目录下找到stytle.css文件,打开并查找一下代码:

  1. .bread {
  2.     width1120px;
  3.     height25px;
  4.     line-height25px;
  5.     margin: 0 auto;
  6.     padding-left10px;
  7.     whitewhite-spacenowrap;
  8.     word-wrap: normal;
  9.     text-overflow: ellipsis;
  10.     overflowhidden;
  11. }

将上面的代码替换为:

  1. .bread {
  2.         margin10px auto;
  3.         border1px solid #ddd;
  4.         border-radius: 2px;
  5.         background-color#fff;
  6.         padding-top4px;
  7.         padding-bottom4px;
  8.         padding-left10px;
  9. }

美化前后对比

美化前:

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

美化后:

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

总结

美化前和主题看着不是很搭配,可能是个人审美作祟。美化之后的主题样式,看上去更加有模块感,自然就是喜欢这种一块一块的感觉。如果你也喜欢这种样式,不妨动手试试。

weinxin
网科文媒
快来关注一下,你想要的这里都有喔!
自然

发表评论

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