2008/07/24

Plurk - CSS

　　自從 Plurk Collaborative Translation Project （註一）啟動以後，Plurk 團隊的動作頻頻。不但修掉幾個老問題，在時間軸的操作介面和功能上也有不少改進。有些細心的人或許也發現到，Plurk 系統對於效能方面做出的一些改變。撇開這些不談，這兩天出現了一項讓許多人非常興奮的新功能：自訂 Plurk 頁面的 CSS（註二）。廢話不多說，這裡來介紹一下細節。

◆ 修改方式：畫面左上角「我的檔案 edit」→「自訂外觀」，裡面有一個大大的框框可以編輯 CSS。

◆ 一些已知可以自訂的項目：
  • body
  • #timeline_holder
  • #dashboard_holder
  • #plurk-dashboard
  • #karma
  • #top_bar
  • #page_title
  • #top_login
  • #footer
  • #bottom_line　時間軸刻度線
  • #dash-segment　整個控制面版的一般文字
  • #dash-stats　統計數據的項目名稱
  • #dash-stats table td　統計數據的數值
  • .day_bg　分割線的陰影
  • .div_inner　時間軸內
  • .plurk_cnt　單則未展開未讀時
  • .plurk_box　展開單則頂端左右兩邊
  • .info_box　展開單則最底下
  • .response_count　單則右邊的回應數
◆ 在 CSS 最前面加上「/* USE_DARK_ICONS */」這個特殊註解，可以讓 Plurk 使用顏色較深的 icon。

◆ 一個換掉各大項目底色與底圖的簡單範例：
/* 主背景（下方控制面板外圍的地方） */
body
{
background: #CF682F url(my_background.gif);
background-repeat: repeat;
background-attachment: fixed;
}

/* 時間軸 */
#timeline_holder
{
background:#CAE7FD url(my_timeline.gif);
background-repeat: repeat;
}

/* 控制面板 */
#plurk-dashboard
{
background: #BE5C2F url(my_dashboard.gif);
background-repeat: repeat;
}

/* Karma 的文字顏色 */
#karma
{
color: #FFE400;
}

◆ 另一個簡單範例，使用單張大圖作為背景，並且將一些元件改成可透視：

body
{
background: #000000 url(full_screen.jpg);
background-repeat: repeat;
}

#timeline_holder
{
background: none;
}

.plurk_cnt
{
opacity: 0.75;
filter: alpha(opacity=75);
}

#top_bar
{
opacity: 0.5;
filter: alpha(opacity=50);
}

#top_login
{
opacity: 0.5;
filter: alpha(opacity=50);
}

#plurk-dashboard
{
background: #808080;
opacity: 0.5;
filter: alpha(opacity=50);
}

#bottom_line
{
background: none;
opacity: 0.5;
filter: alpha(opacity=50);
}

◆ 參考鏈結：
◆ 沒有主機放圖檔的人，可以試試 tinypic.com。

◆ 幾個成品：
註一：Plurk 協力翻譯計劃，我是其中的一份子。等整個計劃告一段落之後，我會另外寫一篇文章來介紹它，並紀錄一些心得。

註二：自訂 CSS 需要 25 以上的 Karma。

廣告：如果按這裡註冊 Plurk 帳號，就相當於被我推薦，會自動變成我的 follower 而看到我的訊息。

※2008/8/14 更新：Plurk 將自訂 CSS 所需的 25 Karma 門檻取消了。
© 年年歲歲花相似
Maira Gall