Plurk CSS樣式自訂修改全攻略
前前後後對Plurk的CSS樣式做了調整,本篇做個到目前為止的修改總整理,並加上註解說明,供有需要的噗友們能再依自己的需求而變更。首先將要調整的樣式複製到系統剪貼簿裡,再依下列圖片對照步驟來操作:
- 點擊Plurk頁面左上角的【編輯】
- 個人設定視窗彈出後,點擊【自訂外觀】頁籤
- 游標移進樣式修改框裡,並移動到最後面,再貼上複製好的樣式
- 點擊【存檔並更新】,此時會看到後面的網頁閃動一下,表示修改的樣式已生效。最後按個人設定視窗右上角的 X 關閉視窗
把自訂樣式放到最後面以方便日後的修改,當你更換畫面主題時,記得先把後面的這些修改先存起來,等主題更新後再貼回即可。
修改後畫面示範
以下是修改後的畫面示範。畫面中的數字對應樣式裡的註解編號,請對照參考便能迅速了解修改重點:
修改後樣式內容
最後是修改樣式的內容。
- 由SkyDrive下載樣式檔
/* ========================================================= * 以下是自訂變更Plurk的樣式修改 * 作 者:簡睿 http://jdev.tw/blog/tag/plurk * 版權宣告:歡迎取用與修改,但請提及http://jdev.tw/blog * V1.0 2009/07/04 * ========================================================= \*/ /* 1.把噗裡最下方的輸入框高度放大成70px \*/ textarea#input_small { height: 70px; font-size:20px;} /* 2.網頁下方的大輸入框高度放大成70px */ textarea#input_big.content { height:70px; font-size:20px; wrap:soft} /* 3.噗的編輯框高度放大成100px */ td.td_cnt textarea { height:100px; } /* 4.把自己的照片變小,以免嚇到人 :-) */ #profile_pic { width:64px; height:64px; } /* 5.隱藏右方的怪物圖示,忘了是由那個網站引用來的 */ #dynamic_logo { opacity:0;filter:alpha(opacity=0);zoom:1 } /* 一整個噗是類別為plurk_box的區域(div),其內有list類別區域, * list 即為"最近的 plurk 回應:"以下的回應區域, * 每個回應都有plurk_cnt類別。plurk_cnt類別裡有一個table * 左邊表格td_qual放暱稱和修飾詞,右邊表格td_cnt放回應內容。 */ /* 6.把回應區的高度放大為300px,以容納更多的回應 */ .plurk_box .list { height:300px; } /* 7.把列距放大成1.5倍,行跟行間的垂直空間會變大 */ .list .plurk_cnt { line-height:150%; } /* 8.每個回應的下方加淡藍色的分隔線; solid是實心線,可以換成下列不同的線: * dotted=點點,dashed=折線 */ .list .plurk_cnt tr { border-bottom: 1px solid lightblue; } /* 9.把回應內容的字體放大1.4倍,適合像我一樣的老人家 */ .list .plurk_cnt .td_cnt { font-size:140%; } /* 10.游標經過的回應區,將其背景變成淡藍色,如果要設文字顏色的話, 加上下列指令: color:navy !important; */ .list .plurk_cnt :hover { background-color:lightBlue; } /* 11.將特定噗的獨立頁面的輸入框的高度放大成100px */ textarea#input_permalink.content { height:100px; } /* 12.讓暱稱在獨立一列; 請注意:IE有點異常,暱稱經常會消失 */ .list .plurk_cnt .td_qual { overflow:auto; position:absolute; width:auto; } .list .plurk_cnt .td_cnt .text_holder { margin-left:1em; margin-top:1em; padding:0.5em; width:auto !important; } /* 13.噗的回應數目字改成白色. 如果你的河道底色是淺色則請改成深色, 如 color:black */ .response_count { color:white;} /* 14.把游標所在位置的回應時間往左移120px */ .response_time .holder+div img { left:-1200px; position:fixed; } .response_time .holder { left:-120px; position:relative; } /* 15.未讀計數 */ .unread #alert_beacon, .unread_generic { -moz-border-radius:3px 3px 3px 3px; background-color: black; color:#FFFFFF !important; padding:0 2px; } /* 16.靠近河道底部的噗不會被蓋住 */ #timeline_cnt { overflow: visible; }
2009/07/05修改:
自己的噗或在別人噗裡的回應,回應時間區域除了時間以外,還會有刪除按鈕。
2010/10/12:將暱稱固定在左側
由於暱稱獨立在一行往往造成回應顯示出的內容變少,我使用如下的設定讓暱稱以固定寬度集中在左側。如果獨立在一行的寫法無法正常顯示的話,請試看看下列修改方式。
(也可以參考這篇http://jdev.tw/blog/1475/plurk-css-fixed-width,內容大同小異)
/\*=== 固定寬度 \*/ /* 把回應內容區裡的表格改成固定寬度的layout */ .list table { table-layout:fixed; } /* 暱稱區寬度固定為35%, 淡灰底色;超出寬度的部份會消失(hidden) */ .list .td_qual { width:35% !important; border-right: 2px solid #dddddd; background: #dddddd; overflow: hidden; } /* 游標移入暱稱區時寬度變成60% */ .list .td_qual:hover { width:60% !important; position: absolute; } /* 游標移至暱稱的文字連結時,顯示超長部份 */ .list .td_qual .name:hover { overflow: visible; width: 60% !important; } /* 把暱稱三角形按鈕往右移,以免蓋到修飾詞 */ .cmp_tooltips-down { left:30px; position:absolute; }
2010/11/23:未讀計數的樣式修改
Plurk修改了未讀計數的樣式成紅底白字,若搭配在你的畫面非常突兀的話,請修改下列CSS(範例第15項):
.unread #alert_beacon, .unread_generic { -moz-border-radius:3px 3px 3px 3px; background-color:white; /\* 背景 \*/ color:#FFFFFF !important; /\* 文字前景 \*/ padding:0 2px; }
##
您可能也會有興趣的類似文章
- 將Plurk回應區變成固定寬度 (0則留言, 2009/07/11)
- 把落落長的噗友暱稱變獨立一行的噗浪變身法 (7則留言, 2009/07/03)
- 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (10則留言, 2009/06/07)
- 簡單放大Plurk輸入區的方法[修訂] (6則留言, 2008/09/29)
- 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (15則留言, 2009/06/06)
- 移動噗浪的回應時間位置,使能更清楚看到回應時間[修訂] (11則留言, 2009/07/04)
- 如何手動輸入Plurk的表情圖示? (165則留言, 2008/09/29)
- 指定Plurk回應串對話者的小技巧 (1則留言, 2008/09/29)
- Plurk的快速鍵 (0則留言, 2008/10/03)
- 噗浪修飾詞(Qualifier)(自由發揮) 到底要如何使用? (0則留言, 2011/07/06)
- 變化你的噗浪暱稱:Unicode我♥你-啦啦啦♪☺〠 (2則留言, 2009/06/23)
- 不費力Plurk Karma升級術:Plurk Top Mass Vote (1則留言, 2011/02/22)
- 噗浪新功能:透過電子郵件/行動電話 plurk (13則留言, 2010/08/18)
- 希望:Plurk稍後會修正,請大家稍候… (1則留言, 2010/04/25)
- 輸入Plurk隱藏版表情符號(Русский)的簡便方法 (2則留言, 2010/10/28)
如果我想把噗的透明度改成0該怎麼辦OAQ???
請參考這篇看看:Plurk噗浪各區塊透明CSS語法分享, 一張底圖模式
><想要拉長但是按照下面的語法卻沒有拉長啊….help……..help…./* 6.把回應區的高度放大為300px,以容納更多的回應 */
.plurk_box .list {
height:300px;
最後面的右大括號有嗎?
這個CSS是對的,應該很多人都用過了的。
請教: 如何將原來河道上的噗,原本顯示一行,改為自動顯示三行(or兩行)?
Plurk好像自己會折行啊? 唉~很久沒在改Plurk了…
超級感謝你的大大,謝謝你的詳細說明讓我這個電腦白癡會改噗客的css
終於改了我的噗客,超感動的
其實真的很簡單,對吧? :-)
請問河道上的噗旁會顯是有新的未讀,底是紅的字是白的.
可以改嗎??不是下方的(15)
改下列即可。
.response_count {
background-color: #CAE7FD;
color: #7EAACF;
font-weight: bold;
margin-left: 1px;
}
.new .response_count {
background-color: #FB0047;
color: #FFFFFF;
}
http://www.plurk.com/BlueAmy
請問一下,這是我的噗浪,因為我的噗的字體有加大,所以在噗未點開之前,噗的外框有點小,噗裡面的字都有被截掉下方的感覺。 請問有辦法把噗未點開之前的外框高度加大嗎?
(對了,我是用chrome才會有這個問題,Firefox不會,但是我還是想加大未點選的噗浪的外框高度)
請問一下版主
因為您設計的版面都好棒喔
可是我弄了一整天都弄不出來
不知道我可以花錢拜託您幫我設計嗎?
我想買您的設計
不知道您能幫我設計一個像
http://www.flickr.com/photos/kight29/4145854449/in/pool-782525@N25/
的樣板嗎?
在麻煩大大開個價
Sorry, 我沒有從事接案,看看這篇《專門設計噗浪佈景的網站,免費佈景一鍵安裝!》,裡面的作者應該有在幫人設計。
你好,我想請問如何才能把河道上噗文的暱稱顏色給改掉呢?
已經嘗試了一個下午,實在是沒辦法,
這是我的噗浪,非常感謝!!
http://www.plurk.com/yty80369
至於版型是從這裡來的
http://layoutfreak.blogspot.com/2009/11/tempes-abstract-layout.html#more
真是非常感謝!!
請試看看:
a.name {
color:red;
}
請問要怎麼放大河道上的噗啊,不然字體改大了,但框框的大小卻比文字還小?
請問我要把河道跟主控台的背景各用一張不同的照片要怎麼修改??
請參考:http://briian.com/?p=6042
為什麼我得表情符號不能用了 :(
請問一下 …
怎麼會有的效果有出來有的就沒有
一定要用噗浪內建的樣式改出來才有用嗎 ?
是因為GOOGLE瀏覽器的關係嗎 ˊˋ
我用IE就有跑出來欸
然後 . 謝謝你 :)
有的表情會受Karma或朋友邀請數限制,若具備顯示等級,不管那個瀏覽器都能顯示。