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

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

文末是我的定制的CSS代码，使用时把“禁用模版默认CSS”给勾上。整体风格模仿的是点点上一个博客模板（纯粹 by  ），力求简介：配色使用各级灰度色；把侧边栏“最新随笔”、“阅读排行榜”等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;}