簡睿隨筆@新世界

Plurk CSS自訂修改全攻略

簡睿 — Sat, 04 Jul 2009 14:11:45 +0000

前前後後對Plurk的CSS樣式做了調整，本篇做個到目前為止的修改總整理，並加上註解說明，供有需要的噗友們能再依自己的需求而變更。首先將要調整的樣式複製到系統剪貼簿裡，再依下列圖片對照步驟來操作：

點擊Plurk頁面左上角的【編輯】
個人設定視窗彈出後，點擊【自訂外觀】頁籤
游標移進樣式修改框裡，並移動到最後面，再貼上複製好的樣式
點擊【存檔並更新】，此時會看到後面的網頁閃動一下，表示修改的樣式已生效。最後按個人設定視窗右上角的 X 關閉視窗

把自訂樣式放到最後面以方便日後的修改，當你更換畫面主題時，記得先把後面的這些修改先存起來，等主題更新後再貼回即可。

以下是修改後的畫面示範。畫面中的數字對應樣式裡的註解編號，請對照參考便能迅速了解修改重點：

最後是修改樣式的內容。

由SkyDrive下載樣式檔

/* =========================================================
 * 以下是自訂變更Plurk的樣式修改
 * 作    者：簡睿 http://jdev.tw/blog/tag/plurk
 * 版權宣告：歡迎取用與修改，但請提及http://jdev.tw/blog
 * V1.0 2009/07/04
 * =========================================================
 */
/* 1.把噗裡最下方的輸入框高度放大成70px */
textarea#input_small { height: 70px; font-size:20px;}
 
/* 2.網頁下方的大輸入框高度放大成70px */
textarea#input_big.content { height:70px; font-size:20px; wrap:soft}
 
/* 3.噗的編輯框高度放大成100px */
td.td_cnt textarea { height:100px; }
 
/* 4.把自己的照片變小，以免嚇到人 :-) */
#profile_pic {
  width:64px; height:64px;
}
 
/* 5.隱藏右方的怪物圖示，忘了是由那個網站引用來的 */
#dynamic_logo { opacity:0;filter:alpha(opacity=0);zoom:1 }
 
/* 一整個噗是類別為plurk_box的區域(div)，其內有list類別區域，
 * list 即為"最近的 plurk 回應："以下的回應區域，
 * 每個回應都有plurk_cnt類別。plurk_cnt類別裡有一個table
 * 左邊表格td_qual放暱稱和修飾詞，右邊表格td_cnt放回應內容。
 */
/* 6.把回應區的高度放大為300px，以容納更多的回應 */
.plurk_box .list {
  height:300px;
}
 
/* 7.把列距放大成1.5倍，行跟行間的垂直空間會變大 */
.list .plurk_cnt  {
  line-height:150%;
}
 
/* 8.每個回應的下方加淡藍色的分隔線; solid是實心線,可以換成下列不同的線：
 *   dotted=點點,dashed=折線
 */
.list .plurk_cnt tr {
  border-bottom: 1px solid lightblue;
}
 
/* 9.把回應內容的字體放大1.4倍，適合像我一樣的老人家 */
.list .plurk_cnt .td_cnt {
  font-size:140%;
}
 
/* 10.游標經過的回應區，將其背景變成淡藍色，如果要設文字顏色的話，
      加上下列指令:
     color:navy !important;
 */
.list .plurk_cnt :hover {
  background-color:lightBlue;
}
 
/* 11.將特定噗的獨立頁面的輸入框的高度放大成100px */
textarea#input_permalink.content {
  height:100px;
}
 
/* 12.讓暱稱在獨立一列; 請注意：IE有點異常，暱稱經常會消失 */
.list .plurk_cnt .td_qual {
  overflow:auto;
  position:absolute;
  width:auto;
}
 
.list .plurk_cnt .td_cnt .text_holder {
  margin-left:1em;
  margin-top:1em;
  padding:0.5em;
  width:auto !important;
}
 
/* 13.噗的回應數目字改成白色. 如果你的河道底色是淺色則請改成深色，
      如 color:black */
.response_count { color:white;}
 
/* 14.把游標所在位置的回應時間往左移120px */
.response_time .holder+div img {
  left:-1200px;
  position:fixed;
}
 
.response_time .holder {
  left:-120px;
  position:relative;
}

2009/07/05修改：

自己的噗或在別人噗裡的回應，回應時間區域除了時間以外，還會有刪除按鈕。

類似主題的文章

移動噗浪的回應時間位置，使能更清楚看到回應時間[修訂]

簡睿 — Sat, 04 Jul 2009 10:28:56 +0000

在把落落長的噗友暱稱變獨立一行的噗浪變身法裡把回應的噗友暱稱與回應內容分隔成兩個區塊，讓暱稱不致擠壓到內容的寬度；即然暱稱獨佔一行，這行的右邊就空出空間，因此嘗試把瀏覽回應時出現在最右方的時間給移進來，以更清楚的顯示回應的時間。以下是變身資料前後的比較：

變身前：回應時間在噗外面的最右方	變身後：回應時間在噗裡面的暱稱的右方

只要把下列的CSS內容貼到【編輯→自訂外觀】的CSS框裡就可以了：

/* 把回應時間往左邊移動。
 * 回應時間最右側是一個圖形，要把圖形移出畫面;
 * 因為Plurk不允許使用visibility和display，只
 * 能用移座標的方法。
 */
.response_time .holder+div img {
  left:-1200px;
  position:fixed;
}
 
/* 把回應時間左移120px */
.response_time .holder {
  background:blue;
  color:white;
  left:-120px;
  position:relative;
}

2009/07/05修訂：

移除img改寫：自己的噗或在別人噗裡的回應，回應時間區域除了時間以外，還會有刪除按鈕。先前的寫法會把刪除按鈕變不見，修改寫法使之重新出現。

類似主題的文章

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

簡睿 — Thu, 02 Jul 2009 16:28:11 +0000

噗友暱稱越取越長，造成內容被暱稱擠得一行只剩幾個字，導致閱讀的困擾。今天稍稍改造了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;
}

預設的畫面	修改後的畫面

類似主題的文章

HTC Touch HD的Opera無法瀏覽

簡睿 — Sun, 28 Jun 2009 02:53:35 +0000

從昨天開始，我的HTC Touch HD上的Opera瀏覽器就顯示不出任何內容，原先以為是網路連線有問題，但重新開機後也是不行。今天早上再使用仍然不行，但用PIE則又正常，初步判斷是Opera有問題，因此比照處理PC IE的步驟，把Opera的【設定→隱私】，把Cookie、快取檔案、歷史紀錄都刪除掉，果然就一切正常了。

類似主題的文章

變化你的噗浪暱稱：Unicode我♥你－啦啦啦♪☺〠

簡睿 — Tue, 23 Jun 2009 15:50:55 +0000

拜噗浪網頁使用UTF-8編碼之賜，我們能使用的文字或符號，除了中文、英文（或法文、西班牙文等拚音文字）與數字外，Unicode 3.0所有約９萬多個符號全部都能使用了！當你看到下面這些噗友☀☀晴樹☀☀、小饅頭♡就愛粧、【柏™】、♪ KKBOX的暱稱時，會否有眼睛一亮的感覺？到底這些☀♡™♪符號是怎樣輸入的？本文就來解密。其實答案很簡單，只要使用Unicode（萬國碼）的符號就行了。

使用字元對應表選取符號

要使用Unicode符號取簡單的方法是使用Windows內建的字元對應表，由【程式集→附屬應用程式→系統工具→字元對照表】（C:\Windows\System32\charmap.exe）執行，再依下列步驟檢視：

在上方的【字型】下拉選單裡選用「MS Gothic」
勾選進階檢視
在【分組方式】點選「Unicode子範圍」，此時字元對應表右側會出現分組方式小視窗
在分組方式小視窗選取「符號及什錦符號」
點擊要使用的符號後按選取，或雙擊之就能將該符號複製到【要複製的字元】欄位裡
按下〔複製〕就能把選取的符號拷貝到剪貼簿裡
在噗浪網頁裡用貼上剪貼簿裡的符號，這個符號就會出現在噗裡了

當選取了某個符號後，能在視窗下方的狀態列看到這個符號的Unicode編碼值，例如♡是U+2661，表示白心(White Heart Suit)的編碼值是2661。

安裝並使用Unicode輸入法

利用字元對應表可以把常用的符號編碼值記下來，再由控制台裡的「文字服務和輸入語言」，安裝「中文(繁體) – Unicode」輸入法，用這個輸入法就能輸入數字而帶出符號，例如輸入2661而帶出♡。

如果你是使用微軟新注音輸入法的話那就更方便了：只要先按`(和~在一起的按鍵)，再按u，接著輸入編碼值就能帶出符號。

最後注意事項

由於每個字型檔裡並未存放完整的Unicode字型，並不是每個字在不同的字型檔裡都能找到，因此想要找到要使用的符號就耐心搜尋各個字型檔吧。

另外，現有的軟體部份仍然無法儲存Unicode，在存檔時務必特別注意是否能存成UTF-8編碼，若存檔格式誤選成ANSI或Big5，那麼這些Unicode符號就會變成問號或是亂碼。

還有，Windows Mobile瀏覽噗浪的行動版時，Unicode大部份符號會變成白框或空白，並不能正常呈現。

類似主題的文章

改寫AutoHotkey輸出中文字串的寫法

簡睿 — Sat, 20 Jun 2009 05:25:37 +0000

由PTT看到Lumania (小糠榔)寫的輸出中文Unicode字串的AutoHotkey腳本，簡潔清楚（腳本裡使用了較新的函數，因此你的AutoHotkey必須是1.0.47+以上的版本）：

SendBig5(xx)
{
  if (i:=StrLen(xx)) =0
     return
  loop
  {
     j:=1
     if((tmp1 := NumGet(xx, 0, 'UChar')) & 0x80)
     {
        tmp1:= (tmp1< &lt;8) | NumGet(xx, 1, 'UChar')
        j:=2
     }
     sendinput, {ASC %tmp1%}
     stringtrimleft, xx, xx, j
     if (i-=j)=0
       break
  }
}

再用F12按來鍵來測試：

1
2
3

f12::
  sendBig5('中文測試')
  return

程式主要的邏輯是用{ASC nnnnn}輸出Unicode。依據官網文件的說明，nnnnn為1到255是ASCII碼，0128到0255是ANSI碼，而256到65535就是Unicode碼。可惜有部份程式無法接受256~65535轉Unicode的作法，例如PSPad Unicode版本和Word 2003 SP3都不行（怪異的是PowerPoint 2003、Excel 2003卻又可以），因此我再修改了一下，用剪貼簿的方法解決此問題：

SendBig5(xx)
{
  WinGetClass,sClass,A
  ;;MsgBox %sClass%
  ;; PSPad Unicode || Word 2003
  if (sClass='TfPSPad.UnicodeClass' || sClass='OpusApp') {
    send_symbol_clp(xx)
    return
  }
 
  if (i:=StrLen(xx)) =0
     return
  loop
  {
     j:=1
     if((tmp1 := NumGet(xx, 0, 'UChar')) & 0x80)
     {
        tmp1:= (tmp1< &lt;8) | NumGet(xx, 1, 'UChar')
        j:=2
     }
     sendinput, {ASC %tmp1%}
     stringtrimleft, xx, xx, j
     if (i-=j)=0
       break
  }
}
 
; 透過剪貼簿送出一組中文符號，如send_symbol_clp('。')
send_symbol_clp(symbol) {
  oldClip := ClipboardAll ;;%Clipboard%
  Clipboard =
  Clipboard = %symbol%
  ClipWait
  Send ^v
  ;;sleep 1000
  Clipboard = %oldClip%
  ;;oldClip =
  return ''
}

類似主題的文章

滑鼠手勢工具StrokeIt大復活－新版本捲土重來！

簡睿 — Fri, 19 Jun 2009 16:25:35 +0000

滑鼠手勢StrokeIt終於再度復活了！如果你不知道StrokeIt的話，請先參考我以前寫的這篇：[Tools] StrokeIt: 幫Windows裝上滑鼠手勢的親和功能。我使用StrokeIt很多年，已經很習慣在它的協助下迅速的用滑鼠來操作以前必須用鍵盤的動作，沒想到StrokeIt 0.9.5無法在Vista裡使用，迫於無奈只得採用另一套gMote，不過用了一陣子後因不滿意它的反應速度，最後束之高閣而極少使用。

今天由PTT看到StrokeIt推出了新的測試版0.9.6，趕緊下載測試，果然在Vista已能正常運作，同時也一併支援Windows 7。

StrokeIt資訊

類似主題的文章

修改WordPress 2.8最新迴響的顯示格式

簡睿 — Wed, 17 Jun 2009 14:40:42 +0000

如果你的WordPress 2.8使用的Recent comment（最新迴響或最新留言）是系統內建的模組的話，它顯示的格式會是「留言人在文章標題」的格式，在此種格式下，必須點擊文章標題的連結，才能看到實際的留言內容，為了能直接顯示留言內容，我修改了下列幾段程式：

修改wp-includes\default-widgets.php 第645行，把get_the_title換成get_comment_excerpt；要注意檔案編碼要存成UTF-8，以免中文字變成亂碼：

1
2

  echo  '' . /* translators: comments widget: 1: comment author, 2: post link */ sprintf(_x('%1$s 說 %2$s', 'widgets'), get_comment_author_link(), '. esc_url( get_comment_link($comment-&gt;comment_ID) ) . '">' . get_comment_excerpt() . '') . '';  // get_the_title($comment->comment_post_ID)
li>

因為系統取留言片段的get_comment_excerpt函數是針對拚音文字在處理的，中文不甚適用，因此一併修改wp-includes\comment-template.php 第386行：

function get_comment_excerpt() {
  global $comment;
  $comment_text = strip_tags($comment->comment_content);
  /*
  $blah = explode(' ', $comment_text);
  if (count($blah) > 20) {
    $k = 20;
    $use_dotdotdot = 1;
  } else {
    $k = count($blah);
    $use_dotdotdot = 0;
  }
  $excerpt = '';
  for ($i=0; $i< $k; $i++) {
    $excerpt .= $blah[$i] . ' ';
    $excerpt .= $blah[$i] . ' ';
  } */
  if (strlen($comment_text) > 40) {
    $excerpt = mb_substr($comment_text,0,40) . '...';
  } else {
    $excerpt = $comment_text;
  }
  //$excerpt .= ($use_dotdotdot) ? '...' : '';
  return apply_filters('get_comment_excerpt', $excerpt);
}

類似主題的文章

強化閱讀第２噗：變更噗浪回應的字體與背景顏色

簡睿 — Sun, 07 Jun 2009 09:36:25 +0000

繼續再用修改CSS 樣式的方法來加強Plurk的閱讀性。這次要修改的是加大回應文字的字體，變更游標位置的回應底色。

修改方式：點擊左上角的〔編輯〕，再按〔自訂外觀〕，將下列文字新增到樣式框裡：

.list .plurk_cnt  {
  line-height:150%; /* 加大回應區的列距 */
}
 
.list .plurk_cnt tr {
  border-bottom: 1px solid  lightBlue; /* 分隔線 */
  line-height:150%;
}
 
.list .plurk_cnt .td_cnt {
  font-size:140%;  /* 加大字體40% */
}
 
.plurk_cnt tr:hover {
  background-color:lightBlue;  /* 游標位置底色 */
}
 
.plurk_box .list {
  height:300px;
}

類似主題的文章

將噗浪的視窗高度變大，加上分隔線，以方便閱讀

簡睿 — Sat, 06 Jun 2009 14:31:36 +0000

噗浪最近蔚為風潮，噗友群起出動，導致河道裡壅塞無比，長串的噗此起彼落，讓我看噗的捲動次數增加許多，因此稍微修改一下Plurk樣式，除了在每個回應間加上分隔線，也把回應視窗變高，讓顯示的內容變多。

原始大小的畫面：高度150px (點擊放大)	加大高度後的畫面：高度300px (點擊放大)

修改方式：點擊左上角的〔編輯〕，再按自訂外觀，將下列文字新增到樣式框裡：

.plurk_box .plurk_cnt {
  border-bottom: 1px solid #D0B9A3;  /* 增加分隔線 */
  font-size:120%;
  line-height:18px;
}
 
.plurk_box .list {
  height:300px;  /* 加大視窗高度 */
}

點擊某個噗以展開視窗時，Plurk會將回應視窗移到中央位置方便閱讀，這點算是不錯的設計。

最後希望行動版的噗浪也能開放自訂樣式，現在的輸入框實在是太小了。