乐于分享
好东西不私藏

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('https://image.baidu.com/search/down?url=https://tvax3.sinaimg.com/large/006VCrUsgy1fjmflvz3z7j30ag0040pv.jpg') repeat-x 0 100%;//此处应替换为对应网站的图片链接
}

 图片文件下载:

静态图片

地址: https://image.baidu.com/search/down?url=https://tvax3.sinaimg.com/large/006VCrUsgy1fjmflvz3z7j30ag0040pv.jpg

动态滚动图片:

地址: https://image.baidu.com/search/down?url=https://tvax2.sinaimg.com/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif

补充:

可以将图片下载上传至网站目录也可以直接用上面的新浪图床外链,CSS样式大家也可以根据自己喜好更改,网站文件修改前记得先备份将要修改的文件以保障数据安全。更多WordPress教程老夜陆陆续续会继续分享出来,如有不足之处欢迎文章底部留言补充~~~

 

本站文章均为手工撰写未经允许谢绝转载:夜雨聆风 » WordPress教程:dux主题顶部添加彩色美化条

评论 3

5 + 2 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    感谢分享,谢谢站长!!@绿软吧

    软件分享3年前 (2020-12-12)Windows 7 | Chrome 78.0.3904.108回复
  2. #0

    怎么修改dux的背景颜色啊,点击按钮切换背景色。

    佛系软件4年前 (2019-12-20)Windows 10 | Chrome 78.0.3904.108回复
    • 老夜

      给按钮加个点击事件修改background

      老夜4年前 (2019-12-21)Windows 7 | Firefox浏览器 71.0回复
×
订阅图标按钮