感謝㊣贊助鼓勵!

Google搜尋 »

分類

簡睿在噗浪»

有朋自遠方來

將Plurk回應區變成固定寬度

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

變身前 變身後
plurk7 plurk8

滑鼠游標移到暱稱文字區域時,固定的寬度會放大以顯示較完整的暱稱。下圖是寬度放大後的暱稱: plurk9

/* 把回應內容區裡的表格改成固定寬度的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;
}


##

相關文章

填寫回應

 

 

 

您可使用這些HTML標籤

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

隨機文章

  1. FlowPaint提供多種筆觸的跨平台繪圖軟體 
  2. EasyEclipse: 化繁為簡的Eclipse 
  3. 接到寬頻電視客服中心的回函 
  4. Aqua Data Studio 4.0 已正式推出 
  5. 幽默好笑的「水男孩」 
  6. 使用Word 2010 Beta/2007寫Blog文章 (6)
  7. 日劇《我家的歷史》觀後感 (2)
  8. 方便但常會忘了的指令 
  9. 推薦”十年自學程式設計”一文 
  10. 用svchost viewer檢視始終是個謎的svchost.exe (3)

歷史熱門文章

  1. Plurk CSS樣式自訂修改全攻略 (30,962 點擊/2009-07-04)
  2. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (20,275 點擊/2009-02-18)
  3. 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (17,547 點擊/2009-06-07)
  4. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (16,753 點擊/2009-04-18)
  5. 強化HTC Touch HD的工具軟體 (14,969 點擊/2009-02-25)
  6. 如何手動輸入Plurk的表情圖示? (13,959 點擊/2008-09-29)
  7. 增加Spb Mobile Shell 3.0生活化桌面頁數的小技巧 (13,743 點擊/2009-04-27)
  8. 簡單放大Plurk輸入區的方法[修訂] (13,049 點擊/2008-09-29)
  9. 將Plurk回應區變成固定寬度 (12,874 點擊/2009-07-11)
  10. 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (12,515 點擊/2009-06-06)