你还在原封不动地使用那些博客模板吗？

我在博客园看过别人的博客也不少了，不过大部分都是在套用那些个原始模板，自定义样式的博客并不多。我个人强烈建议园友们定制自己的博客页面，增强园友对自己博客的认同感，共同改善园子的外在形象，除此之外，赏心悦目的视觉效果也对学习知识是有所裨益的。你还在原封不动地使用那些博客模板吗？好像应该改一改了。

园子里的博客数量不计其数，可模板的数量却只有那么几十个。
更重要的是，这些模板的外观看起来实在是寒碜，大部分都是早期博客时代的风格。
更更重要的是，这几十个模板在我看来，也只能算几个而已，因为这其中的大部分模板都具有这么几个特点：

1）满屏，满屏的直接结果就是让拥有高分辨率电脑的浏览者阅读体验很差，一段摘要，不到两行就结束了，而且第一行读完，往左移了一公里才找到第二行的开头……我现在电脑是1200pix的宽度，看起这些模板来已经很不舒服，更不要说目前很多电脑的分辨率不只1200pix。
2）字体小，这可能是由于从英文模板移植到中文的原因（良好中文页面体验需要更大字号的字体），很多模板的内容文字依然用的是12px或者10pt等等，并且这样大小的文字再结合上面的第一个特点，整体效果就可想而之了。
3）窄边距，无论是内边距还是外边距，很多模板中依然用了5px或者10px的内外边距，我挺想说：如今大家富裕了，屏幕上像素有的是，尽管用，好看就行。
4）动不动就是1px的border，我被这些1px的条条框框烦透了，这是在追随上个世纪的table时代布局遗风吗，我们更需要的具有现代感的东西。

总而言之，就是这些模板都不怎么漂亮，或者说我都不中意。前两天，我想换个模板用用，于是打开设置页面，找了一遍又一遍，一个让我心怡的都没有。我想很多园友都跟我有同样的感受，不过园子的管理都们都相信大家的前端水平，给了园友很大的自定义范围，要想满足自己对博客外观的要求，可以借助博客设置中的“通过CSS定制页面风格”。

打开：我的博客>管理>设置，找到“通过CSS定制页面风格”，如下图所示。

在利用CSS定制页面的时候，可以部分定制，也可以全部定制。部分定制即把需要重新定义的CSS代码直接粘贴到上图所示的文本框中，然后保存；
全部定制是指禁用模板默认的CSS文件，自己根据页面上的标签定义所有的样式，把CSS代码粘贴到上图所示的文本框中，然后保存。
我采用的是全部定制，不过我没有一点一点地去写全部CSS，我找了一个在布局上类似我想法的模板（LessIsMoreRight），下载它的CSS文件，在这个文件的基础上进行修改完成。

下载模板CSS文件方法是：找一个使用该模板的博客，查看其原代码，找到含有模板名称的文件地址，如下图所示，这个文件就是该模板的CSS文件。

下面是我修改的代码，水平有限，意在抛砖引玉：

/**************** 公共样式 ****************/
#EntryTag{font-size:9pt;}
#divRefreshComments{text-align:right;margin-right:10px;margin-bottom:5px;font-size:9pt;}
.topicListFooter{text-align:right;margin-right:10px;margin-top:10px;}

/**************** 标签默认 ****************/
*{margin:0;padding:0;}
body{margin:0;padding:0;color:#333;background-color:#EAEAEA;font-family:'微软雅黑',verdana,arial;font-size:12px;line-height:1.5;}
img{border:0;}
li{list-style:none;}
input,textarea{border:1px solid #BBB;}
h1,h2,h3,h4,h5,h6,th{font-weight:bold;color:#000;}
a{text-decoration:none;color:#333;}
a:hover{color:#666;}

/**************** cnliu定制部分 ****************/
#cnliu_header{}
.cnliu_ad_sidebar{margin-top:10px;margin-bottom: 10px; width:300px; height:0;overflow: hidden;}
#cnliu_footer{margin-left:30px;padding-left:35px;width:725px;font-size:12px;text-align:left;line-height:150%;}
#cnliu_footer a{color:#BBB;}

/**************** 共用部分 ****************/
/* layout */
#header{} 
#mainContent{margin-left:30px;border-left:1px solid #DDD;border-right:1px solid #DDD;border-bottom:1px solid #DDD;width:760px;padding-top:25px;padding-bottom:30px;background-color:#FFF;}
#sideBar{position:absolute;width:300px;border-top-width:0;overflow:hidden;padding:0 15px 20px 30px;top:68px;left:790px;}
.forFlow{margin:0 35px;}
#footer{margin-left:30px; margin-top:30px; padding-left:35px; padding-bottom:5px; text-align:left;}

/* header */
#lnkBlogLogo{display:none;}
#blogTitle{padding:16px 40px;}
#blogTitle h1{font-size:24px;}
#blogTitle h2{font-size:10.5pt;color:#999;}
#blogTitle .title{font-size:24px;}
#blogTitle .subtitle{font-size:10.5pt;color:#999;}
#navigator{margin-left:30px;border-left:1px solid #DDD;border-right:1px solid #DDD;width:690px;background:#f6f6f6;border-top:1px solid #DDD;border-bottom:1px solid #DDD;border-width:1px;height:30px;line-height:30px;color:#999;padding-left:35px;padding-right:35px;padding-top:2px;}
#navigator img{display:none;}
.blogStats{float:right;color:#999;}
#navList li{float:left;margin-right:20px;font-size:10.5pt;}

/* sideBar */
#sideBar li,.divRecentCommentAticle{text-indent:-1.5em;margin-left:1.5em;}
#sideBar h3,#MyIng .ing_title{margin:16px 0 0 0px;font-size:14px;text-align:left;}
#calendar{margin-top:16px;text-align:center;}
#calendar table{width:90%;margin:0 auto;}
#calendar .CalOtherMonthDay{color:#999;}
#sideBar .divRecentComment{color:#666;margin:0 0 8px 8px;}
#sideBar .recent_comment_body{color:#666;margin:5px 0 8px 18px;text-indent:0px;}
#sideBar a {color:#06C;}
#sideBar a:hover {color:#17A8FA;}

.ing_title a:link,.ing_title a:visited,.ing_title a:hover,.ing_title a:active{
    font-weight:bold;
}

div.commentform textarea {    width:450px;height:300px;ont-size:13px;}

/**************** 各子页面 ****************/
.dayTitle{display:none;}
.entrylistTitle,.thumbTitle,.PostListTitle,.forFlow h3 div,.galleryTitle{font-size:14px;font-weight:bold;margin-top:20px;text-align:left;}
.entrylistDescription,.thumbDescription{margin-left:16px;}
.postTitle,.entrylistPosttitle,.feedback_area_title{border-bottom:1px solid #ddd;font-family:'宋体','微软雅黑';font-size:14px;font-weight:bold;margin:20px 0 10px;}
.postBody {color:#111;font-size:13px;line-height:170%;}
.postBody span{color:#111;font-size:13px;line-height:1.5;}
.postBody h5{font-size:10pt}
.postBody p,.postCon p{margin:12px auto;}
.postCon{overflow:hidden;font-size:13px;}
.c_b_p_desc{line-height:170%;}
.postCon a,.postBody a,.feedbackCon a{text-decoration:underline;color:#0066cc;}
.postCon a:hover,.postBody a:hover,.feedbackCon a:hover{border-color:#999;}
.postDesc,.entrylistItemPostDesc{border-bottom:0px dotted #999;color:#666;text-align:right;padding-bottom:5px;vertical-align:middle;}
.postDesc a:link,.postDesc a:active,.postDesc a:visited{color:#666;text-decoration:none;}
.postDesc a:hover{text-decoration:underline;}
.PostList{float:none;clear:both;text-align:right;width:96%;margin:auto;padding:6px 0;overflow:hidden;border-bottom:1px dotted #ccc;}
.postTitl2{float:left;}
.postText2{text-align:left;color:#666;}
.feedbackItem{padding:8px;border-bottom:1px dotted #ccc;}
.feedbackManage{float:right;}
.feedbackCon{margin-left:1em;color:#666;line-height:1.5;}
.commentform td div span{margin-left:12px;}
.gallery img{margin:8px;}
#taglist{margin:20px auto;}
.pfl_feedback_area_title{font-size:16px;margin:16px 0;font-weight:bold;}
.pfl_feedback_area_title a{font-size:12px;color:#999;font-weight:normal;}
.pfl_feedbacksubtitle{height:30px;}
.pfl_feedbackname,.pfl_feedbackManage{float:left;margin:10px 20px 0 0;}
.pfl_feedbackCon,.pfl_feedbackAnswer{clear:both;margin-left:12px;} 
.btn_my_zzk{border:0px;}
#sideBarMain{padding-left:0px;}
#MyIng{padding-left:10px;}

div#sideBar div#side_ing_block ul li{margin-left:0px;text-indent:0px;}
#side_ing_block{line-height:180%;}

#EntryTag  {margin-top:10px;}

#blog_ad_google h3{margin-bottom:10px;}

#digg_block a:link,#digg_block a:visited,#digg_block a:active { color: #015FB6; }
#digg_block{color: #015FB6;}
span.diggnum{color: #015FB6;}
span.burynum{color: #015FB6;}