把落落長的噗友暱稱變獨立一行的噗浪變身法
 2009/07/03 |  分類: 微網誌
 | 點擊數: 2 / 13625
噗友暱稱越取越長,造成內容被暱稱擠得一行只剩幾個字,導致閱讀的困擾。今天稍稍改造了css樣式,將暱稱和內容切割成兩列,讓內容的寬度在每個回應裡都一致。至於預設的格式較好,或修改後的格式較符合需求,應該是見仁見智,但至少提供了另一種選擇。修改的方法很簡單,將下列樣式內容貼到Plurk頁面左上方【編輯 > 自訂外觀】的樣式框裡(示範請看這裡,點擊回應數較多的plurk):
/* 2009/07/02 */
.list .plurk_cnt .td_qual { /* 暱稱列 */
overflow:visible;
position:absolute;
width:auto;
}
.list .plurk_cnt .td_cnt .text_holder { /* 回應內容區 */
margin-left:1em;
margin-top:1em;
padding:0.5em;
width:auto !important;
}
2009/07/03補充:
可以在回應內容區加上背景與文字顏色,以更顯著的形式呈現。
.list .plurk_cnt .td_cnt .text_holder { /* 回應內容區 */
background: green; /* 背景設定為綠底 */
color: white !importnat; /* 白字 */
margin-left:1em;
margin-top:1em;
padding:0.5em;
width:auto !important;
}
| 預設的畫面 |
修改後的畫面
|
 |
 |
##
您可能也會有興趣的類似文章
- Plurk CSS樣式自訂修改全攻略 (77則留言, 2009/07/04)
- 將Plurk回應區變成固定寬度 (0則留言, 2009/07/11)
- 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (10則留言, 2009/06/07)
- 移動噗浪的回應時間位置,使能更清楚看到回應時間[修訂] (11則留言, 2009/07/04)
- 如何手動輸入Plurk的表情圖示? (164則留言, 2008/09/29)
- 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (15則留言, 2009/06/06)
- 指定Plurk回應串對話者的小技巧 (1則留言, 2008/09/29)
- 簡單放大Plurk輸入區的方法[修訂] (6則留言, 2008/09/29)
- Plurk的快速鍵 (0則留言, 2008/10/03)
- 變化你的噗浪暱稱:Unicode我♥你-啦啦啦♪☺〠 (2則留言, 2009/06/23)
- 噗浪修飾詞(Qualifier)(自由發揮) 到底要如何使用? (0則留言, 2011/07/06)
- 噗浪新功能:透過電子郵件/行動電話 plurk (13則留言, 2010/08/18)
- 用PlurkEasyEmoticon選取噗浪表情圖示 (7則留言, 2011/01/10)
- 希望:Plurk稍後會修正,請大家稍候… (1則留言, 2010/04/25)
- 用AutoHotkey插入噗浪隱藏版表情符號 (8則留言, 2010/10/23)
隨機文章- 轉換Office檔案為文字格式的命令列工具:DocToText
- 通用型的即時通訊軟體:Miranda IM、IM2
- [Tools] 實用的圖片小工具:ClickPic
- [Xuite] 在Xuite中使用上傳的圖片
- JavaScript Collector: 包羅萬象的JavaScript檔案庫
- Transmission與MLDonkey設定紀要 (4)
- [Thunderbird] 常用擴充列表說明;增強電子郵件的收納管理能力 (6)
- 萬用影音轉檔程式:FFMpeg與HD專用的VideoConverter
- [Tools] Qm: The Quick Mailer (2)
- 在WordPress裡測試PHP指令的方法 (1)
歷史熱門文章
- 如何手動輸入Plurk的表情圖示? (353,006 點擊/2008-09-29)
- 簡單放大Plurk輸入區的方法[修訂] (86,919 點擊/2008-09-29)
- 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (83,894 點擊/2011-06-01)
- Plurk CSS樣式自訂修改全攻略 (83,081 點擊/2009-07-04)
- 網路升級光世代50M/3M與設定ZyXEL P874 (53,224 點擊/2011-05-28)
- 輕鬆學會彈指神功-揭露AutoHotkey絕技 (43,134 點擊/2008-04-10)
- iPad新手入門技巧 (40,389 點擊/2011-02-05)
- 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (38,140 點擊/2010-04-27)
- 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (37,949 點擊/2009-02-18)
- 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (35,911 點擊/2009-04-18)
|
熱門文章排行
- 如何手動輸入Plurk的表情圖示? (353,006 views/2008-09-29)
- 簡單放大Plurk輸入區的方法[修訂] (86,919 views/2008-09-29)
- 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (83,894 views/2011-06-01)
- Plurk CSS樣式自訂修改全攻略 (83,081 views/2009-07-04)
- 網路升級光世代50M/3M與設定ZyXEL P874 (53,224 views/2011-05-28)
- 輕鬆學會彈指神功-揭露AutoHotkey絕技 (43,134 views/2008-04-10)
- iPad新手入門技巧 (40,389 views/2011-02-05)
- 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (38,140 views/2010-04-27)
- 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (37,949 views/2009-02-18)
- 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (35,911 views/2009-04-18)
|
謝謝你喔…^^
歡迎參考。我個人是認為 將Plurk回應區變成固定寬度(http://jdev.tw/blog/1475/plurk-css-fixed-width) 比較容易閱讀 :-)
想請問這段代碼要怎麼改才能在IE上正常顯示呢?
請問可以把回應的對象跟暱稱放一起嗎?這樣回應內容就會清楚誕
回應對象是指 @to_whom 這樣的回文? 這是寫在回應的文字裡,很難獨立出來設定…還是我誤解您的需求了?
謝謝你!!你提供的都很實用呢!!
另外有個小問題.
就是有沒有辦法針對作者本人回應的噗改變顏色呢?@@
作者的留言做不同顯示:
.highlight_owner .text_holder {
background: #ddd;
color: blue !important;
}
只能變更所有的作者,沒辦法只變自己噗裡的自己的回應。