最近很多网站都在页头页脚添加了彩色横条,特别是动态的彩色横条看起来比较有动感,所以今天也顺便分享一下如何为Nana 主题、Blogs 主题和zbpNana 主题添加彩色横条,以便有需要的博主站长折腾。
Nana 主题和 WordPress 版本的 Blogs 主题
由于 Nana 主题和 WordPress 版本的 Blogs 主题并没有在主题选项中集成有自定义样式功能,所以我们需要修改主题内的 style.css 文件代码。具体步骤如下:
1、找到以下代码
#top-header{background:#f8f8f8}
修改为
#top-header {background: #f8f8f8 url(https://abc.com/caisehengtiao.gif) repeat-x scroll 0 100%;}
2、找到以下代码
#footer{padding:10px 0;background:#262627}
修改为
#footer {padding: 10px 0 0;background: #262627 url(https://abc.com/caisehengtiao.gif) repeat-x scroll 0 0;}
如果不想修改 style.css 文件代码,那么我们可以直接修改 header.php 文件,找到以下代码:
<link rel="stylesheet" id="nfgc-main-style-css" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="all">
在它的前面添加以下代码,保存并更新即可。
<style>
#top-header {background: #f8f8f8 url(https://abc.com/caisehengtiao.gif) repeat-x scroll 0 100%;}
#footer {background: #262627 url(https://abc.com/caisehengtiao.gif) repeat-x scroll 0 0;}
</style>
上述代码中的彩色横条动态图片是举例说明,请下载该图片(点此下载,提取码: ssnw)保存到本地服务器或虚拟主机,然后替换上述代码的图片地址即可。
zbpNana 主题和 WordPress 版本的 Blogs 主题
1、登录站点后台 - zbpNana 主题配置(或 Blog 主题配置) - 基本设置 - 页头额外代码中添加以下代码并保存。
<style>
#top-header {background: #f8f8f8 url(https://abc.com/caisehengtiao.gif) repeat-x scroll 0 100%;}
#footer {background: #262627 url(https://abc.com/caisehengtiao.gif) repeat-x scroll 0 0;}
</style>
说明:如果“页头额外代码”中已经添加有其他 CSS 代码,那么就去掉上述代码的<style></style>,然后添加到原 CSS 代码中的</style>前面即可。
2、后台首页 - 清空缓存并重新编译模板后即可看到具体的效果。
特别声明:本文用到的方法和图片都是来自行动派。
小结
其实这个方法不单单适用于 WordPress 站点、ZBlog 站点,同样适用于其他类型的站点,因为这个实现方法其实就是添加相应的背景图片而已。关键点就是找到想要添加到的位置的 DIV 的 ID 值,然后看是添加到该 DIV 的尾部就是 100%顶部就是 0。懂得这两个注意点之后就可以随意 DIY 了。
你可能感兴趣的文章
懿古今 所有,欢迎分享本文,转载请保留出处!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!
版权声明:本文为原创文章,版权归
发表于2018-10-14 10:11 沙发
去折腾折腾,多谢大佬分享
发表于2018-10-14 21:35 板凳
呵呵 学习了
发表于2018-10-15 12:09 地板
可以用base_64优化一下,能减少http请求次数。
@大致是的,可以减少请求数,不过CSS代码稍微大一点,至于如何选择让用户自己折腾吧。
发表于2018-10-15 13:24 4楼
大致说得对,可以用base64搞搞。
咳,别像我网站那样瞎搞就行了。
@姜辰这个看个人喜欢了,base64把图片变成代码放在CSS中也不错,可以减少请求,就是CSS文件会大一点点
发表于2018-10-15 15:12 5楼
我打算一个主题用到老了,不想折腾
@顾敏锋博客我现在也很少更换主题了,高兴就增加删减一些内容,经常换主题没意思了
发表于2018-10-15 21:31 6楼
请问给主题添加一个固定的背景
怎么设置好
@福利堆本站就有具体添加背景的教程,可以搜索看看
@懿古今就是包屑导航怎么美化?
发表于2018-10-15 22:40 7楼
我都是直接将CSS代码放到“自定义CSS”里就不管了!
@明月登楼[呲牙] 因为我的主题懒得集成自定义CSS到主题选项,下次升级可以考虑
发表于2018-10-16 10:03 8楼
谢谢分享
发表于2018-10-16 14:43 9楼
收藏了,估计是用不了。
发表于2018-10-16 21:54 10楼
我是过了这个搞酷的年龄了,呵呵,一切归于平淡才是真。
@maqingxi我现在也不太想折腾,平平淡淡才是真,我也一直比较相信这个
发表于2018-10-18 11:12 11楼
这个方法好