自定义blog皮肤顶部的图片（附在线编辑器）

獨立的圓 posted @ 2 months ago in Blog with tags css blog

方法：使用插件里的自定义CSS。

本人是CSS门外汉，以Kubrick皮肤为例。

首先在blog首页右键点击"查看页面源代码“（firefox），在偏上的地方找到一句类似这样的：（在第15行）

<link href="/themes/kubrick/stylesheets/style.css?1212467978" media="screen" rel="stylesheet" type="text/css" />

这是为了查看本皮肤的CSS地址，找到地址后打开它，也就是：

再找到关于顶部图片部分的语句，比如：

#header {

        background: #73a0c5 url('../images/kubrickheader.jpg') no-repeat bottom center;

        }

要自定义皮肤顶部的图片，需要修改的就是这部分，把它复制到插件的自定义CSS那里，再把图片的路径替换为目标图片路径即可，可使用绝对路径，比如我的是

#header {

        background: #73a0c5 url('http://farm3.static.flickr.com/2164/2564010439_1f16fbc272_o.jpg') no-repeat bottom center;

        }

这一步我之前一直不成功，后来经galeki指点才知道原来是因为前面少了个#号。

最后附一个Wordpress Kubrick主题头部图片生成器，自动为图片加上白边并裁剪以适应Kubrick皮肤。

关于CSS和HTML，网上有很多不错的教程，比如：

galeki posted @ 2 months ago

galeki

这个，真不错哈～

yegle [Guest] posted @ 2 months ago

那网站居然不支持png格式的图片……囧了……

Selective Memory