你還在原封不動地使用那些博客模板嗎？

我在博客園看過別人的博客也不少了，不過大部分都是在套用那些個原始模板，自定義樣式的博客並不多。我個人強烈建議園友們定制自己的博客頁面，增強園友對自己博客的認同感，共同改善園子的外在形象，除此之外，賞心悅目的視覺效果也對學習知識是有所裨益的。你還在原封不動地使用那些博客模板嗎？好像應該改一改了。

園子里的博客數量不計其數，可模板的數量卻只有那么幾十個。
更重要的是，這些模板的外觀看起來實在是寒磣，大部分都是早期博客時代的風格。
更更重要的是，這幾十個模板在我看來，也只能算幾個而已，因為這其中的大部分模板都具有這么幾個特點：

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;}