Plurk CSS樣式自訂修改全攻略

前前後後對Plurk的CSS樣式做了調整，本篇做個到目前為止的修改總整理，並加上註解說明，供有需要的噗友們能再依自己的需求而變更。首先將要調整的樣式複製到系統剪貼簿裡，再依下列圖片對照步驟來操作：

1. 點擊Plurk頁面左上角的【編輯】
2. 個人設定視窗彈出後，點擊【自訂外觀】頁籤
3. 游標移進樣式修改框裡，並移動到最後面，再貼上複製好的樣式
4. 點擊【存檔並更新】，此時會看到後面的網頁閃動一下，表示修改的樣式已生效。最後按個人設定視窗右上角的 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)
• 強化閱讀第２噗：變更噗浪回應的字體與背景顏色 (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)