打造Plurk風格 - 新手上路文件簡譯

發現Plurk的新手上路文件竟然沒有繁中版本以後，便有想翻譯的念頭，剛好今天又有一位噗友請教問題，便催生了這篇譯文。

打造你的噗浪風格

噗浪可以透過CSS來設定風格，基本上這意味著任何在噗浪個人資料上的元素都是可以自訂的，顏色可以更換而背景圖也可以改變等。

基本結構
大體上來說有三個重要的元素是需要注意的：

• body:
  body元素決定了頁面的背景、字體尺寸以及文字顏色
• #timeline_holder:
  這個元素則是時間軸所在的部份
• #dashboard_holder:
  這個元素是主控台的部份

透過以下的簡單範例，能夠讓你瞭解如何建立一個簡單的白色佈景：
/* USE_DARK_ICONS */
body, html {
background: none;
color: black;
}

#timeline_holder {
background: none;
}

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
color: black !important;
}USE_DARK_ICONS是一個特殊的註解，這將使噗浪使用較深的圖示。

除了這些以外，我們建議你透過安裝Firebug這個工具來瞭解噗浪的文本物件模型(DOM, Document Object Model)，它會使打造風格的工作變得簡單些。

佈景範例 (感染蘑菇)
這是一個綠色風格的佈景，而它使用tinypic.com來儲存背景圖。

語法：
body, html {
background-image: url(http://i37.tinypic.com/24fb3f6.gif);
background-repeat: repeat;
color: white;
}

#timeline_holder {
background-image: url(http://i34.tinypic.com/6hs5d1.gif);
background-repeat: repeat;
}

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
color: white;
}
打造頁面標題風格
你可以貼上這段語法來改造頁面標題(有著紅色背景以及白色文字)：
#page_title {
background-color: #ff4e4e;
padding: 1px;
color: white;
}打造主控台風格
貼上這段語法可以讓你的主控台有著紅色底色、白色的文字以及邊框：
#plurk-dashboard {
background-color: #ff4e4e;
color: white;
border: 2px solid white;
}相關資源：
你可以透過這些網站來學習CSS：

• CSS Beginner Tutorial: 初步認識CSS
• CSS tutorial: 完整的學習CSS背後的魔法以及小技巧
• Google search after CSS tricks: 在Google搜尋或從其他的網站來學習小技巧

取得已經完成的佈景風格：

• Plurk Layouts
• Plurk Themes
• Plurk Templates
• Flickr Plurk Themes

Related link:
Styling Plurk - Plurk.com