把落落長的噗友暱稱變獨立一行的噗浪變身法

2009/07/03 | 微網誌 | 作者: 簡睿| 閱讀總數 6060 , 1 (本日)Share/Bookmark

 

噗友暱稱越取越長，造成內容被暱稱擠得一行只剩幾個字，導致閱讀的困擾。今天稍稍改造了css樣式，將暱稱和內容切割成兩列，讓內容的寬度在每個回應裡都一致。至於預設的格式較好，或修改後的格式較符合需求，應該是見仁見智，但至少提供了另一種選擇。修改的方法很簡單，將下列樣式內容貼到Plurk頁面左上方【編輯 > 自訂外觀】的樣式框裡（示範請看這裡，點擊回應數較多的plurk）：

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 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補充：
可以在回應內容區加上背景與文字顏色，以更顯著的形式呈現。

1
2
3
4
5
6
7
8

.list .plurk_cnt .td_cnt .text_holder { /* 回應內容區 */
  background: green;  /* 背景設定為綠底 */
  color: white !importnat;  /* 白字 */
  margin-left:1em;
  margin-top:1em;
  padding:0.5em;
  width:auto !important;
}
預設的畫面 修改後的畫面
plurk1 plurk2

##

相關文章

標籤: ,

留言－您的隻字片言對作者都是莫大的鼓勵

 1.  留言 作者: 就這樣吧 撰寫時間: 2009/07/22 01:58:26

謝謝你喔…^^

[回應]

簡睿 回應:
七月 22nd, 2009 at 18:08:20

歡迎參考。我個人是認為 將Plurk回應區變成固定寬度(http://jdev.tw/blog/1475/plurk-css-fixed-width) 比較容易閱讀 :-)

[回應]


 2.  留言 作者: hinaru 撰寫時間: 2009/08/30 23:14:27

想請問這段代碼要怎麼改才能在IE上正常顯示呢？

[回應]


撰寫留言





隨機文章

本日點擊排行 本周點擊排行 本月點擊排行 歷史點擊排行 | 統計表
  1. [WM6] 自動再次提醒未接來電等事件：ReRemind (3 人次, 2009-04-19)
  2. 用DeskView讓桌面變清爽 (3 人次, 2008-01-24)
  3. [轉貼] 利用Wood Workshop自製木頭質感的底圖素材 (3 人次, 2005-06-14)
  4. 接聽電話後重新顯示螢幕的偵測軟體：Touch InCall Screen Tweak (3 人次, 2009-03-12)
  5. 如何組成強固又容易記憶的密碼？ (2 人次, 2009-01-07)
  6. WinMerge檔案濾鏡的使用方法 (2 人次, 2006-09-10)
  7. [NetBeans] 安裝與設定NetBeans內的Subversion (2 人次, 2006-01-21)
  8. [Tools] 為硬碟做健康檢查：HDDlife; 硬碟測試：HD_Speed、HD Tune (2 人次, 2005-03-18)
  9. [轉貼] Me Media——個人媒體時代來臨！ (2 人次, 2005-04-10)
  10. [Blog] 刪除del.icio.us的張貼網站 (2 人次, 2005-03-05)
  11. Linus談Git與TortoiseGit (2 人次, 2008-12-19)
  12. [創作] 字型工具產生器：動態變更Blog網頁的字型大小 (2 人次, 2007-04-29)
  13. 在Blog裡顯示隨機文章的簡單作法 (2 人次, 2007-10-14)
  14. OpenOffice.org擴充的集中站 (2 人次, 2008-01-31)
  15. [Xuite] 文章分類後面的小圖示代表什麼意義? (2 人次, 2005-03-16)
  16. 能與Google Reader同步的Windows Mobile RSS reader? (2 人次, 2009-03-09)
  17. Spb Mobile Shell設定備忘 (2 人次, 2009-02-19)
  18. 讓手機永保清醒的DontSleep Wifi (2 人次, 2009-03-13)
  19. [轉貼] 千千靜聽：自動抓歌詞+詞曲同步的KTV播放器 (2 人次, 2005-07-22)
  20. ls -d 的用途 (2 人次, 2004-12-26)
  21. (2 人次, 2004-12-15)
  22. [轉貼] 全球掀熱潮 桃太郎最愛玩部落格 (2 人次, 2007-04-09)
  23. [工具] Xuite人氣統計網頁 (2 人次, 2007-09-16)
  24. 又一個Java寫的資料庫前端工具：Execute Query 3.0 (2 人次, 2006-09-21)
  25. 常見的收錄書籤網址寫法之彙總表格 V1.1 (2 人次, 2007-04-01)
  26. [轉貼Toget] iColorfolder：為資料夾圖示換上繽紛色彩 (2 人次, 2005-08-09)
  27. 搖手機啟動指定的程式：G-Trigger (2 人次, 2009-03-19)
  28. 用tag2find幫你的文件隨處貼標籤 (2 人次, 2008-01-11)
  29. [SVN] Hook scripts的使用方法 (2 人次, 2005-12-09)
  30. 關閉所有視窗的小工具：CloseAll.exe (2 人次, 2010-05-22)
  31. 用樣式控制Google AdSense廣告顯示的位置 (2 人次, 2007-05-03)
  32. [Tools] 快速搜尋檔案：Locate32 (2 人次, 2005-07-16)
  33. Windows Mobile使用的完美聯絡人軟體：Inesoft Phone [修訂] (2 人次, 2009-02-28)
  34. Xuite網址的正規運算式測試 (2 人次, 2007-04-30)
  35. [Subversion] 尋找Subversion Client工具 (2 人次, 2005-09-01)
  36. 把VMWare丟掉! Free的x86模擬器: QEMU (1 人次, 2004-12-16)
  37. FireFox擴充套件與自訂工具列按鈕 (1 人次, 2005-01-09)
  38. Secrets of Firefox 1.0 (1 人次, 2005-01-15)
  39. Thunderbird的「標籤」功能 (1 人次, 2005-01-14)
  40. 參戰ClickClickClick大賽：我的自動點擊程式ccc.exe V1.3 (1 人次, 2007-06-16)
  41. 自己當倉頡：打造自己的輸入法 (1 人次, 2005-02-06)
  42. 方便但常會忘了的指令 (1 人次, 2004-12-15)
  43. 網頁程式碼美化程式 Google Code Prettify (1 人次, 2007-05-27)
  44. Firefox: 使用者自訂檔 (1 人次, 2005-01-08)
  45. [創作] 個人網頁全都連：Show Yourself Generator V1.0 (1 人次, 2007-04-21)
  46. 語系/地區碼 zh-TW與zh-CN 中的zh代表什麼? (1 人次, 2005-06-07)
  47. Picasa 圖片整理工具 (1 人次, 2005-01-19)
  48. 改造你的Gmail: Better Gmail 0.3 (FireFox extension) (1 人次, 2007-04-23)
  49. DOS (命令提示字元) 的巨集功能 (1 人次, 2005-01-18)
  50. 快速啟動「服務」、「新增/刪除程式」視窗的方法 (1 人次, 2005-01-20)
標籤雲
ADS Apache AutoHotkey backup Batch Blogging BT CMS Console Cygwin DOS Download!雜誌 Firefox Freeware FTP funP GMail Google Graphics HTC IM IntelliJ-IDEA iReport Java JavaScript jEdit Joomla jQuery Linux Media Microsoft Mozilla MSN MySQL NAS NetBeans Office OpenOffice Oracle PDF PHP Plurk RSS Shell SQL Subversion system ThinkPad Thunderbird tortoiseSVN Trac TS-109 Ubiquity Vista Wiki Windows Windows-7 Windows-Mobile WordPress WordPress外掛 X61 Xuite 備份 剪貼簿 啟動程式 噗浪 壓縮工具 工作列 工作管理員 搜尋工具 新聞 旅遊 書籤 有趣 桌面 檔案管理 滑鼠手勢 漫畫 瀏覽器 環境變數 科技 網站服務 網路服務 編輯器 繪圖 螢幕擷取 行事曆 設備 論壇 資安 資料夾 資料庫 輸入法 郵件軟體 閱讀 附中 雜記 電影

Bad Behavior has blocked 10 access attempts in the last 7 days.