將Plurk回應區變成固定寬度

2009/07/11 | 微網誌 | 作者: 簡睿| 閱讀總數 9458 , 2 (本日)Share/Bookmark

 

試把回應區用固定寬度的方法呈現,讓每行的回應內容有較多的字數,也不致因暱稱而變得長短不一。修改的方法請參考Plurk CSS自訂修改全攻略,修改後的範例請參考這裡。事實上,如果使用GreaseMonkey的腳本來做類似這些變化會是更好的選擇,但為了能跨瀏覽器使用,還是用修改CSS的方法加減用吧。

變身前 變身後
plurk7%5B1%5D 將Plurk回應區變成固定寬度 plurk8%5B1%5D 將Plurk回應區變成固定寬度

滑鼠游標移到暱稱文字區域時,固定的寬度會放大以顯示較完整的暱稱。下圖是寬度放大後的暱稱: plurk9%5B1%5D 將Plurk回應區變成固定寬度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 把回應內容區裡的表格改成固定寬度的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;
}

##

類似主題的文章

撰寫留言





隨機文章

本日點擊排行 本周點擊排行 本月點擊排行 歷史點擊排行 | 統計表
  1. 命令提示字元的完美替身:PowerCmd與Console 2.0 (2 人次, 2008-05-09)
  2. 將Plurk回應區變成固定寬度 (2 人次, 2009-07-11)
  3. 用Clipperz存放密碼,透過網路隨時隨地取得密碼 (2 人次, 2008-11-27)
  4. Windows 7試用小記 (2 人次, 2009-08-19)
  5. 自行新增「右鍵功能表選項」的方法 (2 人次, 2006-07-15)
  6. 使用Word 2010 Beta/2007寫Blog文章 (2 人次, 2010-01-19)
  7. WordPress簡單又美觀的網站訂閱與文章書籤外掛:Add To Any (2 人次, 2008-12-28)
  8. 安裝Joomla! 論壇元件FireBoard (2 人次, 2008-07-13)
  9. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (1 人次, 2009-04-18)
  10. 行動版的WordPress主題樣式:MobilePress外掛 (1 人次, 2009-03-13)
  11. Windows Mobile使用的完美聯絡人軟體:Inesoft Phone [修訂] (1 人次, 2009-02-28)
  12. 將Google Buzz、Twitter與Facebook在Gmail裡合而為一的步驟 (1 人次, 2010-02-18)
  13. 強化HTC Touch HD的工具軟體 (1 人次, 2009-02-25)
  14. [轉貼] 蚊子老是找上你? 專家:人體二氧化碳濃度作祟 (1 人次, 2009-02-24)
  15. 快速切換資料夾之台灣之光:Folder Menu (1 人次, 2009-04-22)
  16. ActiveSync無法連線... (1 人次, 2009-04-23)
  17. 推薦《12 Undocumented Tricks for Google Buzz (12項不為人知的Google Buzz技巧)》 (1 人次, 2010-02-16)
  18. 自動隱藏特定視窗的工具:OuttaSight (1 人次, 2009-11-21)
  19. 網路帳號不要用懶人密碼! (1 人次, 2009-09-17)
  20. Subversion的搬移(Move)操作 (1 人次, 2009-09-05)
  21. Microsoft My Phone:同步手機資料的網路服務 (1 人次, 2009-05-20)
  22. 視窗工具百寶箱:Commands in Demand (1 人次, 2009-08-14)
  23. 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (1 人次, 2009-06-07)
  24. 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (1 人次, 2009-06-06)
  25. Teeter過關紀念! (1 人次, 2009-05-28)
  26. 用gTimeSync讓Windows Mobile做網際網路時間同步校正 (1 人次, 2009-05-17)
  27. [WordPress] 更換固定網址(permalink)格式為文章標題 (1 人次, 2008-12-01)
  28. 使用QNAP TS-109 NAS設備的心得 (1 人次, 2007-10-18)
  29. [趣味] 長崎公車站旁出現-龍貓(Totoro)!-的雕像 (1 人次, 2008-01-24)
  30. [FireFox] 無法使用Copy / Paste的原因 (1 人次, 2005-03-21)
  31. 如何初步分析Blog變慢的原因? (1 人次, 2007-04-26)
  32. 如何轉換AutoHotkey的預設分隔字元:冒號 (1 人次, 2008-03-17)
  33. 新增加的FireFox Ubiquity指令:books、k+與en2zh (1 人次, 2008-10-18)
  34. 郵件監視器比較:PopTray與Magic Mail Monitor (1 人次, 2005-02-07)
  35. 可怕的FeedBurner中文介面 (1 人次, 2007-05-19)
  36. 增加推推王的摘錄推文按鈕 (1 人次, 2007-05-20)
  37. 幾個好用的FireFox Ubiquity命令:shorten、goto和screengrab (1 人次, 2008-10-26)
  38. [FireFox] del.icio.us, Furl toolbar (1 人次, 2005-03-21)
  39. [Tools] 心智圖的繪製工具:Xebece、FreeMind (1 人次, 2005-03-14)
  40. 用AutoHotkey統一不同工具的偵錯功能鍵 (1 人次, 2008-03-19)
  41. [Vista] 路徑分隔字元也能使用正斜線...「部份」成功... (1 人次, 2008-04-10)
  42. [轉貼] Smart NTFS Recovery:強力檔案回復專家 (1 人次, 2006-06-09)
  43. HFS(HTTP File Server)讓您瞬間速架私人FTP (1 人次, 2008-02-05)
  44. 方便切換目錄的指令:PUSHD與POPD (1 人次, 2006-07-15)
  45. Xuite新功能?文章標籤、歷史上的今天與隨機推薦文章 (1 人次, 2008-06-14)
  46. Joomla! 1.0.12網站建置 (多圖) (1 人次, 2008-06-22)
  47. 跨平台的螢幕擷取工具:JShot (1 人次, 2008-08-02)
  48. nCleaner造成輸入法不見了?! (1 人次, 2008-07-17)
  49. [Vista] 將陽春記事本Notepad.exe替換成慣用的文字編輯器 (1 人次, 2008-04-12)
  50. 停止ThinkPad X61部份開機服務與處理程序 (1 人次, 2008-03-29)
標籤雲

簡睿隨筆@新世界 使用的快取程式為 WP Super Cache