我是一個非常戀舊的人，不願意搬家，又不得不搬，只好把新家儘量裝飾得跟舊家一樣，花了一個禮拜的時間，終於完工了。

我將舊家與新家一前一後擺在一起，翻過來倒回去，看了又看，樣貌竟是如此神似。 雖是舊瓶裝新酒，卻也相安無事，而且越看越順眼。 老眼昏花的我，偶一恍神，直把新家當舊家，於是在新家的山頭多加了一隻飛來飛去的鳥兒。 兩個家的外觀很像，但是行為舉止可大大不同。

新家是換了腦袋的老朋友，須要時間重新認識、彼此了解、相互適應。

花了很大功夫佈置新家，大部份時間都用於模板設定/編輯CSS，還來不及熟悉所有的功能。

發現一些優點，比如﹕

• 文章分類使用 indented tree 結構，每篇文章可以有次分類，看起來清楚明瞭。
• 標籤的使用。
• 相片上傳的新介面。
• 相片自動加上浮水印。
• 文章(article)、相簿(album)、訪客簿(guestbook)三個頁面都能看到側欄(sidebar)﹐相當方便。

也發現一些瑕疵，比如﹕

• 修改已經發表的文章、回覆格友的文章、回覆格友的迴響:
  這三個重要功能常出現問題。尤其是留言或回應後，出現奇怪現象，必須關掉重新開啟。
• 不能看到所有文章的回應總數和留言總數。
• 有一個叫做管理的像輪子的小圖，出現在閱讀文章的右上角﹐點擊它應該可以進入修改文章的頁面，但是通常沒有反應。
• 不能從管理中心一個點擊就回到文章首頁或其它頁面:
  頁腳(footer)寫著Hi！、我的、網路城邦等選項的toolbar常常會不出現。

新版軟體的功能還有待增強和改進。然而，僅僅一個禮拜與它相處，我已經喜歡上它了。

大家一起加油吧！

以下記錄我如何完全自訂CSS，以供有興趣的格友參考﹕

從個人管理中心首頁，點一下管理選單/模板及欄位元件/選擇模板設定-完全自訂，進入完全自訂CSS頁面，點一下選擇目前主題的css帶入，選擇當我們靠在一起。開始編輯CSS﹐對照紫紅色和紅色的語法﹕

1. 編輯 header，更改山頭圖﹕
   

   原來的語法，山頭圖大人小孩背靠背(2132 x 350 pixels):

   #header {
       position: relative;
       background: url(https://g.udn.com.tw/community/img/style220/head.jpg);
       background-position: center 1px;
       background-repeat: repeat-x;
       height: 320px;
       width: 100%;
   }
   

   變更後的語法，自己喜歡的山頭圖是一隻飛鳥(309 x 156 pixels)﹕

   #header {
       position: relative;
       background: url(http://domain.com/path/picture.gif);
       background-position: center 1px;
       background-repeat: no-repeat;
       height: 200px;
       width: 100%;
   }
   

2. 編輯 body，更改背景圖﹕
   

   原來的語法，沒有背景圖:

   body {
       margin: 0px;
       text-align: left;
   }
   

   變更後的語法，加入自己喜歡的背景圖藍色海岸(1134 x 442 pixels)﹕

   body {
       margin: 0px;
       text-align: left;
       background: url(https://g.udn.com/community/img/style028/bg.jpg)
              #DFECFA no-repeat; 
   
   }
   

3. 編輯 header_name，更改部落格名稱的大小(font-size)顏色(color)和排列位置(text-align)﹕
   

   原來的語法，部落格名稱的 font-size 是 20px，顏色為暗藍色，排列位置沒有設定所以根據 body 的設定向左邊靠齊:

   #header_name {
       font-size: 20px;
       font-weight: bold;
       color: #3A9BBF;
       font-family: "微軟正黑體", "Microsoft JhengHei", "微軟雅黑体",
             "Microsoft YaHei", "新細明體", PMingLiU, "新宋体",
             NSimSun, "Apple LiGothic Medium", arial, Geneva, sans-serif;
       letter-spacing: 1px;
   }
   

   變更後的語法，部落格名稱的 font-size 是 24px，顏色為白色，排列位置在header的中央﹕

   #header_name {
       font-size: 24px;
       font-weight: bold;
       color: #FFFFFF;
       font-family: "微軟正黑體", "Microsoft JhengHei", "微軟雅黑体",
             "Microsoft YaHei", "新細明體", PMingLiU, "新宋体",
             NSimSun, "Apple LiGothic Medium", arial, Geneva, sans-serif;
       letter-spacing: 1px;
       text-align: center;
   }
   

4. 編輯 header_name a，更改部落格名稱連結的顏色(color)﹕
   

   原來的語法，部落格名稱連結的顏色為暗藍色:

   #header_name a {
       color: #127488;
       font: bold 24px/150% "微軟正黑體","Microsoft JhengHei",
           "微軟雅黑体","Microsoft YaHei","新細明體",PMingLiU,"新宋体",
           NSimSun,"Apple LiGothic Medium",arial,Geneva,sans-serif;
   }
   

   變更後的語法，部落格名稱連結的顏色為白色﹕

   #header_name a {
       color: #FFFFFF;
       font: bold 24px/150% "微軟正黑體","Microsoft JhengHei",
           "微軟雅黑体","Microsoft YaHei","新細明體",PMingLiU,"新宋体",
           NSimSun,"Apple LiGothic Medium",arial,Geneva,sans-serif;
   }
   

改到這裡，已經大致有自己的風格，接下來是更改主選單 menubar，側欄 sidebar，文章列表 article_list，自訂欄位…。 請看下回分解﹐如果書刪不忙的話。

後記﹕

山頭圖的鳥兒飛來飛去﹐後來看膩了﹐改為跳躍的海豚﹐圖的位置也必須更換﹐從天空改放到右下角的海﹐用%符號來決定圖的X座標和Y座標﹕

原來的語法:

#header {
    position: relative;
    background: url("飛鳥圖");
    background-position: center 1px;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
}

變更後的語法，海豚(309 x 156 pixels)﹕

#header {
    position: relative;
    background: url("海豚圖");
    background-position: 92% 77%;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
}