Plurk CSS樣式自訂修改全攻略

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

  1. 點擊Plurk頁面左上角的【編輯】
  2. 個人設定視窗彈出後,點擊【自訂外觀】頁籤
  3. 游標移進樣式修改框裡,並移動到最後面,再貼上複製好的樣式
  4. 點擊【存檔並更新】,此時會看到後面的網頁閃動一下,表示修改的樣式已生效。最後按個人設定視窗右上角的 X 關閉視窗

把自訂樣式放到最後面以方便日後的修改,當你更換畫面主題時,記得先把後面的這些修改先存起來,等主題更新後再貼回即可。

plurk6

修改後畫面示範

以下是修改後的畫面示範。畫面中的數字對應樣式裡的註解編號,請對照參考便能迅速了解修改重點:

plurk5

修改後樣式內容

最後是修改樣式的內容。

	/* =========================================================
	 * 以下是自訂變更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,內容大同小異)
Plurk-nickname-leftjust

	/\*=== 固定寬度 \*/
	/* 把回應內容區裡的表格改成固定寬度的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;
	}
	

##

您可能也會有興趣的類似文章

簡睿

服務於軟體業的資訊老兵。興趣廣泛,學習力佳,樂於分享所知所學。

您可能也會喜歡…

85 個回應

  1. CANDY表示:

    如果我想把噗的透明度改成0該怎麼辦OAQ???

  2. 表示:

    ><想要拉長但是按照下面的語法卻沒有拉長啊….help……..help…./* 6.把回應區的高度放大為300px,以容納更多的回應 */
    .plurk_box .list {
    height:300px;

  3. Jack表示:

    請教: 如何將原來河道上的噗,原本顯示一行,改為自動顯示三行(or兩行)?

  4. 表示:

    超級感謝你的大大,謝謝你的詳細說明讓我這個電腦白癡會改噗客的css
    終於改了我的噗客,超感動的

  5. 薇伊表示:

    請問河道上的噗旁會顯是有新的未讀,底是紅的字是白的.
    可以改嗎??不是下方的(15)

    • 簡睿表示:

      改下列即可。
      .response_count {
      background-color: #CAE7FD;
      color: #7EAACF;
      font-weight: bold;
      margin-left: 1px;
      }
      .new .response_count {
      background-color: #FB0047;
      color: #FFFFFF;
      }

  6. Amy表示:

    http://www.plurk.com/BlueAmy
    請問一下,這是我的噗浪,因為我的噗的字體有加大,所以在噗未點開之前,噗的外框有點小,噗裡面的字都有被截掉下方的感覺。 請問有辦法把噗未點開之前的外框高度加大嗎?
    (對了,我是用chrome才會有這個問題,Firefox不會,但是我還是想加大未點選的噗浪的外框高度)

  7. 韋伯表示:

    請問一下版主
    因為您設計的版面都好棒喔
    可是我弄了一整天都弄不出來
    不知道我可以花錢拜託您幫我設計嗎?
    我想買您的設計
    不知道您能幫我設計一個像
    http://www.flickr.com/photos/kight29/4145854449/in/pool-782525@N25/
    的樣板嗎?
    在麻煩大大開個價

  8. 阿溰表示:

    你好,我想請問如何才能把河道上噗文的暱稱顏色給改掉呢?
    已經嘗試了一個下午,實在是沒辦法,
    這是我的噗浪,非常感謝!!
    http://www.plurk.com/yty80369
    至於版型是從這裡來的
    http://layoutfreak.blogspot.com/2009/11/tempes-abstract-layout.html#more

    真是非常感謝!!

  9. 281表示:

    請問要怎麼放大河道上的噗啊,不然字體改大了,但框框的大小卻比文字還小?

  10. anser表示:

    請問我要把河道跟主控台的背景各用一張不同的照片要怎麼修改??

  11. 814101:)表示:

    為什麼我得表情符號不能用了 :(

    請問一下 …

    怎麼會有的效果有出來有的就沒有
    一定要用噗浪內建的樣式改出來才有用嗎 ?

    是因為GOOGLE瀏覽器的關係嗎 ˊˋ
    我用IE就有跑出來欸

    然後 . 謝謝你 :)

    • 簡睿表示:

      有的表情會受Karma或朋友邀請數限制,若具備顯示等級,不管那個瀏覽器都能顯示。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *