加入博客园第一天-修改皮肤

今天加入博客园，申请了一个博客，作为以后学习前端、分享前端、记录心得的一个地方。

虽然博客园里有非常多的皮肤，但是相信不少人都希望有一个与其他人看上去不一样的皮肤模版。

我也一样，所以我对皮肤稍作了修改。我使用的是FFandIE这个模版，但是对logo和一些背景图做了一些修改，看上去稍微有些不同了。

下面就是我修改皮肤模版的过程，以及遇到的一些问题，供大家参考。

• 首先选择好FFandIE这个模版保存，然后使用chrome浏览器或者火狐浏览器的的开发者工具（快捷键f12）。
• 使用审查元素，定位logo以及相关背景图片涉及的div，记录好id选择器以及图片像素宽高。
• 通过上面两步已经找到logo宽高为121*145像素，头部背景header宽高为950*150像素，页面背景main宽高为950*1像素（Y轴重复），底部背景footer宽高为950*70像素。
• 使用ps制作自己想要的背景，然后另存为web所用格式，上传至博客园的相册中备用。
• 注意上传图片后从相册进入图片，会得到诸如“t_kulerz_logo.jpg”这样的图片，这种和我们制作的图片宽高不等，将图片名称中的“t”修改为“o”，如“o_kulerz_logo.jpg”这样就和我们上传的原始图片一样了。
• 上传页面背景main（宽高为950*1像素）时，上传出现了一些问题，可能是因为只有一像素高而有950像素宽，导致博客园系统自动转换图片的时候出错。
• 我的解决办法是进入了随笔编辑器，使用随笔的编辑器成功上传了页面背景main图片。
• 图片已经准备好，接下来就是进入设置当中修改CSS代码，下面附上具体代码。

body {
    background: #95A2A8;
}
#header {
    background: url('http://images.cnblogs.com/cnblogs_com/kulerz/750428/o_header.jpg') no-repeat;
}
#main {
    background: url('http://images2015.cnblogs.com/blog/830244/201510/830244-20151031153342294-97131323.jpg') repeat-y;
}
#footer {
    background: url('http://images.cnblogs.com/cnblogs_com/kulerz/750428/o_footer.jpg') no-repeat;
}
#blogLogo{
    display:none;
}
#lnkBlogLogo{
    display:block;
    width:121px;
    height:145px;
    top:5px;
    left:50xp;
    background:url('http://images.cnblogs.com/cnblogs_com/kulerz/750428/o_kulerz_logo.jpg')no-repeat;
}
#blogTitle h2{
    color:white;
}