无崖子资源网
做有态度的分享学习平台!

WordPress教程:dux主题顶部添加彩色美化条

淘宝天猫优惠劵领取网站:tao.fbisb.com


前几天看到好几个大站顶部都挂上了五光十色灯笼,无崖子眼馋就又去扒源码了,然后又发现代码并不适用于目前所运用的dux主题,折腾捯饬了半天总算顺利的加了上去,但是没过几天由于过火“花哨”又给去了。这儿就写个教程共享出来就当做个笔记了,喜欢的小同伴们也能够拿去装饰本人的站点。

话不多少效果图先附上:

添加教程:

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

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

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

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

dux主题CSS代码:

/* 顶部边栏加横条美化*/ /*----www.fbisb.com----*/ .header { background: #fff url('https://wx3.sinaimg.cn/large/006VCrUsgy1fjmflvz3z7j30ag0040pv.jpg') repeat-x 0 100%;//此处应替换为对应网站的图片链接 }

 图片文件下载:

静态图片

地址: https://wx3.sinaimg.cn/large/006VCrUsgy1fjmflvz3z7j30ag0040pv.jpg

动态滚动图片:

地址: https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif

补充:


能够将图片下载上传至网站目录也能够直接用上面的新浪图床外链,CSS款式大家也能够依据本人爱好更改,网站文件修正前记得先备份将要修正的文件以保证数据平安。更多WordPress教程无崖子陆陆续续会继续分享出来,如有缺乏之处欢送文章底部留言补充~~~

未经允许不得转载:无崖子资源网 » WordPress教程:dux主题顶部添加彩色美化条

评论 抢沙发

签到
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册