簡睿隨筆@新世界

 

前前後後對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;
}

2009/07/05修改：

自己的噗或在別人噗裡的回應，回應時間區域除了時間以外，還會有刪除按鈕。

##

相關文章

• 希望：Plurk稍後會修正，請大家稍候… (1)
• [Plurk] 如何顯示12個噗浪朋友圖示？(結論:別人的是12個，自己的只會顯示8個) (0)
• 將Plurk回應區變成固定寬度 (0)
• 移動噗浪的回應時間位置，使能更清楚看到回應時間[修訂] (11)
• 把落落長的噗友暱稱變獨立一行的噗浪變身法 (3)

標籤: Plurk, 噗浪