WordPress教程：dux主题顶部添加彩色美化条-夜雨聆风

本文最后更新于2018-07-28，某些文章具有时效性，若有错误或已失效，请在下方留言或联系老夜。

游手好闲的老夜经常有事没事就去逛逛别人的博客，学到了不少但是也扒来了不少好东西。这不前几天看到好几个大站顶部都挂上了彩色灯笼，老夜眼馋就又去扒源码了，然后又发现代码并不适用于目前所使用的dux主题，折腾捯饬了半天终于顺利的加了上去，但是没过几天因为太过“花哨”又给去了。这里就写个教程分享出来就当做个笔记了，喜欢的小伙伴们也可以拿去装饰自己的站点。（复制你奶奶个腿，本文是老夜写的，改了名字冒充老夜，要脸吗）

话不多少效果图先附上：

添加教程：

一般主题仅需添加下面的CSS代码即可

/* 顶部边栏加横条美化*/ 
/*----www.yeyulingfeng.com----*/
background:url(图片链接或者路径) repeat-x scroll 0 100%;

dux主题一直比较特立独行，另外网上的一些教程也不太适用于dux主题有时候非常令人蛋疼~~~

挑选好合适的CSS代码后后添加至主题目录下的style.css文件中，如果是dux主题用户则需要添加至main.css文件中，千万别搞错了！！！

dux主题CSS代码：

/* 顶部边栏加横条美化*/
/*----www.yeyulingfeng.com----*/
.header {
background: #fff url('/show?url=AqUFY%2BWFUX7EzmZaoMeKAwKlBWLkhFF%2BxM5mWqDGigMCpQVi5IVQf8TPZlqhxosDAqQFY%2BWEUH%2FEz2ZboceLAgKlBWPlhVF%2FxM5mW6HHigICpQVj5IVRf8TOZlugx4sCAqUFY%2BSEUX%2FEz2ZboceLAwKlBWPkhVB%2BxM5mW6DGigICpQVj5YVRf8TOZlugx4oDAqUFYuSEUX%2FEz2ZboceLAwKlBWPkhVB%2FxM5mW6HHiwICpQVj5YRRf8TPZluhx4sCAqUFYuSFUH%2FEzmZboMeKAgKlBWPkhVF%2FxM5mWqDGiwMCpQVj5IVQf8TOZluhxooDAqQFY%2BWEUH%2FEzmZboMeKAwKlBWPlhFB%2FxM5mWqDHiwICpQVj5YRQfsTPZlqhx4sCAqUFYuSEUX%2FEzmZaoMaLAwKlBWPlhFF%2BxM9mWqHHigICpQVj5YVRfsTOZlqgx4oDAqUFYuSEUX7EzmZaoMaKAwKlBWLkhVB%2FxM9mWqHGiwMCpAVj5YRQf8TPZluhx4sCAqUFYuSEUX7EzmZaoMeLAwKlBWPkhVF%2FxM5mWqHGigMCpAVi5IVQf8TPZluhx4sDAqUFYuSFUH%2FEzmZbocaKAgKlBWPlhFB%2BxM5mW6DGigICpQVj5YVRf8TOZluhx4oCAqUFY%2BSEUH%2FEz2ZboceLAwKlBWPkhVB%2FxM5mW6HHiwICpQVj5YRRf8TPZluhx4sCAqUFY%2BWEUX7EzmZboMaKAgKlBWLkhVB%2BxM5mW6DHiwICpQVj5IRRf8TPZluhx4sCAqQFYuSFUX7Ez2ZaoMaKAwKkBWLkhFB%2BxM5nWqDHiwMCpQRj5IVQf8TOZlqgxosDAqUEYuSEUX%2FEzmZaoMaLAgKlBWPkhFB%2FxM5mWqHGigICpAVi5IVRf8TOZlugx4sDAqUFY%2BWFUH7EzmZboceKAgKlBWPkhFB%2BxM5mW6HHigMCpQVi5IRQfsTOZlqhxosDAqQFYuSFUH%2FEzmZaocaLAwKkBWLkhFB%2FxM5mW6HGiwMCpAVi5IVQf8TPZlqgxooDAqUFY%2BSFUX%2FEzmZboMeLAgKkBWLkhVF%2BxM9mWqDGigMCpAVi5IRRfsTPZlqgxooDAqUFYuSFUX7EzmZaoMeLAwKkBWPlhFB%2BxM5mW6HGiwMCpQVi5IVRfsTOZlugx4sC') repeat-x 0 100%;//此处应替换为对应网站的图片链接
}

图片文件下载：

静态图片