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

23 則留言:

N 提到...

在玩弄plurk的css,google一下就来到了你这里了...

你的网志的主题好漂亮..

weedyc 提到...

你好,我在「plurk 之非官方新手入門手冊」裡有引用你此篇文章,特留言告知。:)

文章網址為 http://weedyc.pixnet.net/blog/post/23311875

Harlem 提到...

請問 噗 上面的回應格, 要怎麼調才會大格一些? 就是比較大的空間位置 ?
我自己的 http://www.plurk.com/Harlem001 , 可是我看到 人家 http://www.plurk.com/heysu

回應格卻很大...

請問您知道是調整哪裡?

Sorry 提到...

用「#input_small {height: 60px;}」就可以了。(數字大小請自行調整)

ant2legs 提到...

歡迎使用我的線上手冊:
HTML,
CSS,
Javascript

Yama 提到...
作者已經移除這則留言。
提到...

你好,我是Plurk的新手使用者,希望請問版主一些修改Plurk的問題:
1. 請問就算發出字數較多的噗,要如何才能不被收納起來?類似佐藤さん(http://www.plurk.com/satou)這位使用者這樣,即使發出的噗不只一行字,在時間軸上也可以不經由郵標指出而直接全部展開看見?  

2. 當郵標移到時間軸中列出的噗上,時間軸下方都會跳出這則噗所送出的時間點。而已經將顯示時間點晝夜的背景圖,「http://statics.plurk.com/9a0d3f41579deec72d78e94e6a96e0f8.gif」、「http://statics.plurk.com/ada9286581b4d3b04769f31c32957edf.png」這兩個網址自『自定外觀』的CSS中刪除了,但以火狐瀏覽的話,依然會不斷看見那張圖(IE瀏覽就可以不再看見)。請問要如何才能自火狐中也刪掉那2張圖的顯示呢?  
不好意思麻煩您了。

Sorry 提到...

1. @satou 的噗同樣會被收納起來喔。(註:她並沒有自訂 CSS)

2. 不太確定妳的問題是什麼,我用 IE 同樣會看到那些圖示。不過如果妳希望不要顯示它們的話,試試「.evening,.night,.day,.morning」這四個 class。

提到...

謝謝版主的回答!第2個方法我會試試看的。至於1……觀察了一下,除非有嵌入圖片影片,或是一行很長的英文(例如網址),不然噗文內容全是中文的話,似乎真的不太會被收起來,即使內容長達兩行……還是我觀察錯誤呢?或者方便告知http://www.plurk.com/satou此版型語法下載位置,便於比較。再次謝謝
版主> <b!

Sorry 提到...

我說過了,她沒有自訂 CSS,所以沒得下載喔。她只是把「畫面佈景」跟「主控台主題」選內建黑色,「時間軸主題」選內建綠色,如此而已。

kasyapa 提到...

承接 冉 第二個問題,想問的是怎麼改那個跳出來的時間點的文字顏色呢?
麻煩你了....

Sorry 提到...

可使用「#time_show span」。

俊瑋 提到...

弄得頭好痛

請問要怎樣把主控台畫面全部弄透明阿

我想要在 body 放張大圖><

搞了好久還是不ㄌ一ㄠˇ...

Sorry 提到...

照本文中的單張大圖範例就行了。要主控台全透明的話是「#plurk-dashboard{background: none;}」。

wenci 提到...

您好,我想請問您,一些新面板的下方控制版[Invite or find your friends]和[分享你的plurk頁面]是灰色圖案,我想保留這兩項,其他則用另一個舊面板的樣式(舊面板是原始的綠色小鳥與咖啡色分享plurk頁面),但不知從何複製語法放到舊免版之下?

Sorry 提到...

你可以先安裝具有灰色方塊的主題,把裡頭「#dashboard-invite」和「#sharePlurk」這兩項複製起來,然後裝回你原本的主題,把上面複製的兩段補進去,這樣就完成了。

choobites 提到...

您好!!
想向您請教一下:

/*USE_DARK_ICONS*/
/*-------MAIN STUFF-----*/
/* Background of Plurk Body */
body, html {
background: #fe95b9;
background-repeat: repeat;
}

/* Timeline Background */
#timeline_holder {
background: #fe95b9 url(http://img704.imageshack.us/img704/2338/whensomebodylovedmepink.jpg);
border-top: 1px solid #fe95b9;
border-bottom: 1px solid #fe95b9;
background-position: center;
background-repeat: repeat-x;
}

/* Page Title (Your Name on top)*/
#page_title {
color: #fff;
}
這一段是原來的語法
我想將河道背景圖改成:
http://photo.pchome.com.tw/s10/d/g/dgraymanjin/book11/p125505778425.jpg
這張圖

是否就是把語法中的網址撤換即可?

因為我的狀況是撤換網址之後背景圖不是顯現不出來
就是顯現第一次之後按下重新整理件背景圖又不顯現...

是不是語法哪裡出了問題呢???

先謝過您的回答!!!

momo魚 提到...

想請問:我發噗的那一區塊,我key出來的字不是黑色的,而是鏤空的字,由於我背景圖是粉色系,看得眼好花,請問我該改哪裡呢??

這邊是我的噗:http://www.plurk.com/sagana359

Sorry 提到...

@choobites:PChome 那張圖我無法檢視,你確定該張圖片存在,而且 PChome 接受圖片外連嗎?

@momo魚:我沒辦法看到你的發噗區塊(只有你本人能看到),所以很難幫你檢查。你的佈景主題來自這位作者,你可以直接向她請教看看。

小玉 提到...

不好意思,請問要如何隱藏有自我簡介及卡馬值的那個地方呢?
使用透明語法的話好像只有背景會透明但是字體還是會被留下來。
看見同學的噗浪就是可以滑鼠移過去時才顯現,其他時候都是隱藏起來的

網路上也有提供語法如下:
#mini_search { opacity:0; filter:alpha(opacity=0);zoom=1; }
#mini_search:hover { opacity:1; filter:alpha(opacity=100); }

但是我用了之後還是一樣欸ˊˋ並沒有隱藏起來

所以可以請問一下到底是哪邊的語法需要修改嗎?

謝謝

Sorry 提到...

可以提供你同學的噗浪網址嗎?我直接去看他的語法會比較快。

小玉 提到...

這是我同學的網址

http://www.plurk.com/patipati

不好意思麻煩你了 謝謝

Sorry 提到...

要隱藏那一塊區域用的應該是 #plurk-dashboard,而非 #mini_search。不過 #plurk-dashboard 已經被官方強制設為不能隱藏了。至於你同學的頁面,我去看並沒有隱藏/滑鼠移過時顯現的效果喔。