自定义blog皮肤

自定义blog皮肤--(转自『』『流年』『』）

blog有默认的20几套skin，可以根据你的喜好大致选择一个。在管理面板——选项——config——display skin里面选取。

当然默认的大家都是一样的，没有自己的风格多不爽啊！下面就简单介绍下如何Custom CSS Selectors，让你的blog展现出你自己的风格。

以我选取的gertrude为例，介绍喜爱如何自定义css

1、display skin 选择gertrude，保存你的设置

2、查看页面源文件，会看到
 

代码 (双击代码复制到粘贴板)

<link id="MainStyle" type="text/css" rel="stylesheet" href="/Skins/gertrude/style.css"></link>

这里的style.css就是你选择的模版的css定义，可以通过http://blog.dream4ever.org/Skins/gertrude/style.css打开，将这个作为修改的基础了。

3、在html中找控制你的blog字体和颜色的css应用的位置，比如blog的标头，查看源文件，可以看到
 

代码 (双击代码复制到粘贴板)

<h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://blog.dream4ever.org/xiaoyu/">西山小雨</a></h1>
 

注意这个h1，如果你需要改变“西山小雨”的大小颜色，先要在html源文件中找到应用的位置，再在默认的样式表中找到相关的样式定义，最后再自已修改之。

默认的gertrude/style.css中是这样定义的
 

代码 (双击代码复制到粘贴板)

h1 { margin : 0px; font-size : 1.5em; background-color : #ADF; padding-top : 1em; padding-left : 5px; padding-bottom : 5px; border-bottom : 2px solid #69A; }

比如我想改变距离页边距、背景颜色、字体大小和边缘的分割线，我就改为以下的css代码，并把定义后的样式粘贴到Custom CSS Selectors，这样你就有自己的不同风格了
 

代码 (双击代码复制到粘贴板)

h1 { margin : 5px; background-color : #ffffff; font-size : 2em; border-bottom : 3px solid #69A; }

4、保存更改后的配置，再看看你在blog中的页面，是不是有所改变？

5、按照以上方法慢慢的修改，就会产生一个你自己的与众不同的BLOG了。

 

推荐firefox的那个EditCSS插件 修改起来方便不少

http://www.mozilla.org/products/firefox/