我的博客园皮肤模板

博客园支持CSS定制。以前都是在别人做好的皮肤的基础上，小小地修改，想要达到自己想要的效果多少有些不方便。五一假期，把CSS的基本用法又学习了一下，开始尝试写个规模稍大的CSS代码用来自定义皮肤。

博客园自定义皮肤的基本方法，是进入管理后台，打开“设置”（一般地址是 http://www.cnblogs.com/<username>/admin/Configure.aspx ，<username>替换为自己的用户名），在“通过CSS定制页面”下面的文本框输入CSS代码，然后“保存”，打开首页或者刷新一下首页，就有效果了。这样的做法对小规模的修改还可以，如果完全定制皮肤，这样不太方便。还好博客园博皮小组提供了一套离线html模板文件，还有一份文档。模板文件是较久以前的了，html节点已经发生变化了，有增加也有减少的。

文末是我的定制的CSS代码，使用时把“禁用模版默认CSS”给勾上。整体风格模仿的是点点上一个博客模板（纯粹 by Alex.o0 ），力求简介：配色使用各级灰度色；把侧边栏“最新随笔”、“阅读排行榜”等widget给hidden了，这样感觉更清爽（还有个原因是不想在调整那些widget的样式上费脑筋）；留出了很多空间给“自定义公告”，现在内容还很少。只在Windows + Chrome上测试过，没做过兼容性测试，先给放出来，以后慢慢改进。

使用过多家博客，在博客皮肤（主题、模板、风格等，意思差不多）定制方面基本上有四大类。第一类，不可定制，如现在的CSDN博客，提供了少得可怜且ugly的几套皮肤，用户只能选择其中某一套，皮肤设置的功能就到头了；第二类，Web定制，典型的是网易博客和QQ空间，在第一类的基础上，可以用浏览器来增加、移除、移动和修改界面上的各种Widget；第三类，CSS定制，典型的就是博客园了，通过加载用户自定义的CSS代码来修改皮肤；第四类，Template定制，现在我知道的有两家，点点 (diandian.com) 和Farbox (farbox.com)，博客网站提供模板的接口和使用细节（如渲染引擎、模板语法、页面变量等），用户自己写Web模版文件来定制皮肤。这四类中，第四类定制自由度最高，难度也越大，需要一些Web开发技能。第三类可定制程度稍弱于第四类，但比第二类更容易掌控细节，和第四类相比，也要求有Web开发技能但要求可能低很多，对网站的技术要求要低很多。第二类，对普通用户最合适，而第一类就不说了。希望博客园能够早入提供第四类的定制功能。

文章最后就是代码了：

#profile_block { display:none; }
h3.catListTitle { display:none; }
#leftcontentcontainer { display:none; }
#navigator .blogStats { display:none; }
.dayTitle { display:none; }

ul, a, li, h1, h2 {
    list-style-type:none;
    text-decoration:none;
    color:#000;
    padding: 0;
    margin:0;
}

a:hover {
    text-decoration:underline;
}

body{
    background: #eeeeee;
    font-family: "Microsoft Yahei";
    word-wrap:break-word;
}

::selection{
    background: #e0e0e0;
}

#home {
    margin: 0 auto;
    width: 840px;
    height: 100%;
}

#header {
    margin: 10px 0;
    padding: 10px 0;
    position:relative;
}

#blogTitle h1{
    display: inline;
    margin: 0 10px;
    font-size:80px;
    font-weight:bold;
    letter-spacing:-10px;
}

#blogTitle a { color: #555555; }
#blogTitle a:hover { text-decoration: none; }

#blogTitle h2{
    display: inline;
    margin: 0 10px;
    font-size: 40px;
    color: #dedede;
}

#navigator {
    width:100%;
    margin: 5px 0;
    padding:10px 0;
}

#navigator li{    
    margin: 0 5px;
    float:left;
}

#main {
    position:relative;
    width:840px;
    background-color: #e0e0e0;
}

#mainContent{
    background-color: #ffffff;
    margin-right:240px;    
    padding:20px;
}

.day .postDesc {
    border-bottom:dotted 2px #ddd;
    margin: 5px 0 15px 0;
    font-size: 80%;
    color: #666666;
}

.day .postTitle, .post .postTitle{
    font-size: 130%;
    font-weight: bold;
    text-shadow: 2px 3px 2px #cdcdcd;
    margin:5px 0;
}

.day .c_b_p_desc{
    padding: 5px 0;
}

.day .c_b_p_desc_readmore, .topicListFooter a{
    border-left: 2px #666 solid;
    font-size: 80%;
    padding: 0 5px;
    margin: 0 5px;
    color: #666;
}

.day .c_b_p_desc_readmore:hover, .topicListFooter a:hover{
    background: #efefef;
}

.catListTitle{
    color:#aaaaaa;
}

#sideBar {
    width:200px;
    position:absolute;
    padding:20px;
    right:0px;
    top:0px;
}

h3 {
    color: #aaaaaa;
    margin: 5px 0;
}

#footer{
    text-align:center;
    padding:10px 0;
}