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 門檻取消了。