7C00.ME/houmu 2013-05-02

我的博客园皮肤模板

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

博客园自定义皮肤的基本方法,是进入管理后台,打开“设置”(一般地址是 http://www.cnblogs.com/<username/admin/Configure.aspx> ,替换为自己的用户名),在“通过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;
}