Nana主题、Blogs主题、zbpNana主题添加彩色横条

2018年10月14日 08:43:00  阅读 169 次 评论 18 条

最近很多网站都在页头页脚添加了彩色横条,特别是动态的彩色横条看起来比较有动感,所以今天也顺便分享一下如何为Nana 主题Blogs 主题zbpNana 主题添加彩色横条,以便有需要的博主站长折腾。具体效果请移步:传送门

Nana主题、Blogs主题、zbpNana主题添加彩色横条 技术文档 第1张

Nana 主题和 WordPress 版本的 Blogs 主题

由于 Nana 主题和 WordPress 版本的 Blogs 主题并没有在主题选项中集成有自定义样式功能,所以我们需要修改主题内的 style.css 文件代码。具体步骤如下:

1、找到以下代码

#top-header{background:#f8f8f8}

修改为

#top-header {background: #f8f8f8 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;}

2、找到以下代码

#footer{padding:10px 0;background:#262627}

修改为

#footer {padding: 10px 0 0;background: #262627 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.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://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;}
#footer {background: #262627 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 0;}
</style>

上述代码中的彩色横条是外链的新浪动态图片,如果想换成静态图片,可以直接将上图的动态图片地址改为静态图片地址:https://wx3.sinaimg.cn/large/006VCrUsgy1fjmflvz3z7j30ag0040pv.jpg。如果像改为本地图片,只需要将上述的动态图片或静态图片打开后保存到本地,再将代码中的图片改为本地图片地址即可。

zbpNana 主题和 WordPress 版本的 Blogs 主题

1、登录站点后台 >> zbpNana 主题配置(或 Blog 主题配置) >> 基本设置 >> 页头额外代码中添加以下代码并保存。

<style>
#top-header {background: #f8f8f8 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;}
#footer {background: #262627 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 0;}
</style>
说明:如果“页头额外代码”中已经添加有其他 CSS 代码,那么就去掉上述代码的<style></style>,然后添加到原 CSS 代码中的</style>前面即可。

2、后台首页 >> 清空缓存并重新编译模板后即可看到具体的效果。具体效果请移步:传送门

特别声明:本文用到的方法和图片都是来自行动派

小结

其实这个方法不单单适用于 WordPress 站点、ZBlog 站点,同样适用于其他类型的站点,因为这个实现方法其实就是添加相应的背景图片而已。关键点就是找到想要添加到的位置的 DIV 的 ID 值,然后看是添加到该 DIV 的尾部就是 100%顶部就是 0。懂得这两个注意点之后就可以随意 DIY 了。

历史上的今天:

文章标签: ,   ,   ,   ,  
本文地址:https://www.yigujin.cn/1782.html
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!

相关文章 分类热门分类热评随机文章

发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

表情

  1. 贵安服贸交易平台
    贵安服贸交易平台 @回复

    这个方法好

  2. maqingxi
    maqingxi @回复

    我是过了这个搞酷的年龄了,呵呵,一切归于平淡才是真。

  3. DCIM解决方案
    DCIM解决方案 @回复

    收藏了,估计是用不了。

  4. 网站建设
    网站建设 @回复

    谢谢分享

  5. 明月登楼
    明月登楼 @回复

    我都是直接将CSS代码放到“自定义CSS”里就不管了!

  6. 福利堆
    福利堆 @回复

    请问给主题添加一个固定的背景
    怎么设置好

  7. 顾敏锋博客
    顾敏锋博客 @回复

    我打算一个主题用到老了,不想折腾

  8. 姜辰
    姜辰 @回复

    大致说得对,可以用base64搞搞。

    咳,别像我网站那样瞎搞就行了。

    • 懿古今
      懿古今2018-10-15 17:47  回复

      @姜辰这个看个人喜欢了,base64把图片变成代码放在CSS中也不错,可以减少请求,就是CSS文件会大一点点

  9. 大致
    大致 @回复

    可以用base_64优化一下,能减少http请求次数。

    • 懿古今
      懿古今2018-10-15 17:48  回复

      @大致是的,可以减少请求数,不过CSS代码稍微大一点,至于如何选择让用户自己折腾吧。

  10. WoAiWu福利吧
    WoAiWu福利吧 @回复

    呵呵 学习了

  11. 火星五号趣闻
    火星五号趣闻 @回复

    去折腾折腾,多谢大佬分享