將Plurk回應區變成固定寬度

2009/07/11 | 微網誌 | 作者: 簡睿| 閱讀總數 9338 , 10 (本日)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. 輕鬆學會彈指神功-揭露AutoHotkey絕技 (17 人次, 2008-04-10)
  2. 將Google Buzz、Twitter與Facebook在Gmail裡合而為一的步驟 (16 人次, 2010-02-18)
  3. 使用IMETOOL有效控制中文輸入法 (16 人次, 2010-02-27)
  4. DOS命令使用技巧1:最快把文字檔案貼入剪貼簿的方法 (15 人次, 2010-02-27)
  5. 使用Memory Fox附加元件為Firefox進行定期記憶體瘦身 (14 人次, 2010-02-27)
  6. 超方便下載[Google圖書]的資料 (14 人次, 2010-02-27)
  7. DOS命令使用技巧4:由DOS視窗迅速切換資料夾的方法 (13 人次, 2010-02-27)
  8. DOS使用技巧2:檢視超大檔案檔尾內容的指令WinTail.exe (13 人次, 2010-02-27)
  9. Plurk CSS樣式自訂修改全攻略 (12 人次, 2009-07-04)
  10. DOS命令使用技巧3:由DOS視窗將目前資料夾用檔案總管開啟的方法 (12 人次, 2010-02-27)
  11. 超簡單MSN下載檔案自動分類 (11 人次, 2010-02-27)
  12. [轉貼] 转:容易弄错的繁体字 (11 人次, 2010-02-18)
  13. 日劇《仁醫 JIN》與漫畫《仁者俠醫》觀後雜感 (11 人次, 2009-10-29)
  14. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (11 人次, 2009-04-18)
  15. 啟用Vista與Windows 7的無敵模式(God Mode) (10 人次, 2010-01-03)
  16. Subversion權限設定範例說明 (10 人次, 2009-09-09)
  17. 將Plurk回應區變成固定寬度 (10 人次, 2009-07-11)
  18. [Vista] 路徑分隔字元也能使用正斜線...「部份」成功... (9 人次, 2008-04-10)
  19. 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (9 人次, 2009-06-07)
  20. 從韓劇《市政廳》笑看韓國選舉花招 (9 人次, 2009-09-05)
  21. 升級Subversion client版本與VisualSVN Server (9 人次, 2008-11-22)
  22. 能在HD手機上順暢運行的3D賽車+射擊遊戲:Xtrackt (8 人次, 2009-09-12)
  23. 令人動容的日劇《不毛地帶》片尾曲:Tom Traubert's Blue[修訂] (8 人次, 2009-11-22)
  24. 幫部落格加上Plurk快速噗文按鈕[修訂] (8 人次, 2009-05-24)
  25. 附中71學年度畢業班紀念休閒服 (8 人次, 2005-05-22)
  26. [Firefox] 自動統計的瀏覽紀錄排行榜外掛:New Tab King (8 人次, 2009-04-26)
  27. jQuery選擇器測試與範例 (8 人次, 2007-09-29)
  28. 讓MSN的Esc鍵失效 (8 人次, 2008-10-22)
  29. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (8 人次, 2009-02-18)
  30. 強化HTC Touch HD的工具軟體 (8 人次, 2009-02-25)
  31. 用WordPress的WPtouch外掛顯示iPhone與HTC Touch HD的精簡樣式[修訂] (8 人次, 2009-02-02)
  32. Windows 7的常用快速鍵速查表 (7 人次, 2010-01-05)
  33. Windows Mobile使用的完美聯絡人軟體:Inesoft Phone [修訂] (7 人次, 2009-02-28)
  34. jQuery TreeView插件IE異常解決方法 (7 人次, 2007-11-13)
  35. 目前使用中的WordPress外掛 (7 人次, 2008-11-29)
  36. ObjectDock-超豪華工作列 (7 人次, 2008-06-14)
  37. 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (7 人次, 2009-06-06)
  38. 用AutoHotkey輕鬆製作螢幕小鍵盤 (7 人次, 2008-03-16)
  39. 增加Spb Mobile Shell 3.0生活化桌面頁數的小技巧 (7 人次, 2009-04-27)
  40. [WM6] 自動再次提醒未接來電等事件:ReRemind (7 人次, 2009-04-19)
  41. [Tools] 完全掌握右鍵功能表:FileMenu Tools (7 人次, 2007-04-15)
  42. 用gTimeSync讓Windows Mobile做網際網路時間同步校正 (6 人次, 2009-05-17)
  43. 功能眾多的開源剪貼簿工具:ArsClip (6 人次, 2009-01-23)
  44. 用AutoHotkey改造特殊按鍵 (6 人次, 2008-03-19)
  45. 接聽電話後重新顯示螢幕的偵測軟體:Touch InCall Screen Tweak (6 人次, 2009-03-12)
  46. HTC Touch HD連結失效! (6 人次, 2009-03-05)
  47. 快速切換資料夾之台灣之光:Folder Menu (6 人次, 2009-04-22)
  48. 如何組成強固又容易記憶的密碼? (6 人次, 2009-01-07)
  49. [趣味] 長崎公車站旁出現-龍貓(Totoro)!-的雕像 (6 人次, 2008-01-24)
  50. 令人讚賞的電子書集中站:好讀網站與好讀閱讀器 (6 人次, 2009-04-25)
標籤雲

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