Loading
0

wordpress美化知更鸟主题面包屑导航栏样式

技术小学生微信公众号
腾讯云服务器大促销。
华为服务器

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主题面包屑导航栏美化

 

方法二:(自用)

代码:直接放入后台自定义,或者css里面

  1. .breadcrumb{border-width:1px;
  2. background-color:rgb(255, 255, 255);
  3. margin-Bottom:5px;border-radius:2px;margin-top:5px;}

完美解决!

技术小学生微信公众号
华为服务器
腾讯云服务器大促销。

声明:站长码字很辛苦啊,转载时请保留本声明及附带文章链接:https://blog.tag.gg/showinfo-19-18707-0.html
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
上一篇:给begin主题友情链接页面添加评论
下一篇:WordPress侧边栏如何实现一图三按钮的效果?