[教學] Plurk 的 Widget 樣式修改方法

前言

因為想寫 Plurk 的 Widget 樣式修改方法，所以新建了這篇，方便以後更新工作能輕鬆點。

雖然我一開始根本沒有打算動官方樣式啦，都是 richard 害我想改的。 (っ^ω^c)

※補充：想把官方樣式整個關掉的話，可以參考 Max Chu 提供的方法哦。

※補充：7/1 Plurk 有推出新版的 Widget，各位可以參考一下 [教學] Plurk 的 Widget 樣式修改方法 (2008.07.01) 。

Plurk 的 Widget ，就是可以讓你貼在 Blog 或 HP 裡，隨時更新並顯示你的 Plurk 留言狀態的。大概是長成下面這種樣子。

不過可能會有人覺得官方預設的樣式，寬度窄了點，文字小了點，背景色看了不爽之類的，所以會想要「改一改」吧，這篇就是要來介紹該怎麼修改的。（註：上圖超連結會跑出白底應該是這個部落格的樣式影響的）

準備工具

這裡要準備的工具，是為了那些想全程都有「參與感」的人而準備的，只是想看怎麼改的可以跳過這章節。

1. Firefox -- Mozilla Firefox 、 Pigfoot Firefox ，反正重點是在有「檢視選取範圍原始碼」這功能的瀏覽器。
2. JSView -- Fx 的擴充套件，檢查網頁載入了什麼 JavsScript 跟 CSS 檔案時挺方便的。也有其它類似功能的，不過我懶得找了。
3. Auto Context -- Fx 的擴充套件，在你選取網頁內容時，自動跳出滑鼠右鍵選單（快捷選單）。純粹在這廣告一下，不裝也無妨。 :P
4. Stylish -- Fx 的擴充套件，方便你馬上檢視修改好的 CSS 規格，當然還是要自己手刻啦。覺得要等 Blog 服務商刷新你的修改結果很慢的人，裝這個會方便很多。(詳細說明請見 MozTW Wiki)
5. MadEdit -- 純文字編輯器，挑自己喜歡的就好，不一定要這款。準備這東西主要是因為 JSView 可以用外部編輯器開啟 JS 跟 CSS 檔案，所以挑選自己習慣的編輯器會方便點。

檢視原始碼

這章節也是準備階段的，可以略過無妨。以我 Blog 上的 Plurk Widget 為例，你從 Widget 上方的「總之順便在這丟 Widget 實驗看看好了。」這段字開始選取，按住滑鼠左鍵往下拉拉拉，停在「張貼者： wini 位於」這行附近，按滑鼠右鍵選「檢視選取範圍原始碼」來看，應該會看到「總之順便～」這行字後面有出現一段「<div style="visibility: visible;" class="plurk-widget plurk-widget-regular">」這種東西，那一大段就是今天要改的 Widget 樣式，所需要參考的的 HTML 資訊。

總之這裡先以修改寬度為例，先隨便找找官方樣式的 .plurk-widget 寫了啥吧。從 Fx 選單工具列的「檢視」裡找到 JS/CSS 的項目(通常會在最下面)，裡面可以看到 widget.css 這檔案（當然要在有 Widget 的頁面才會出現），各位進去搜尋一下 .plurk-widget 這選擇子裡面寫了啥跟 width 有關的東西吧。（下面開始會扯一些 HTML/CSS 的東西，還不清楚的先看看站內文章「二十個不到的 HTML 元素及屬性」試試。）

總之這樣就找到跟寬度有關的樣式規則了，會 CSS 的應該馬上就可以動手改了吧，所以下面可以不必看了。 \^o^/

個人推薦可以修改看看的樣式

總之要自訂你的 Plurk Widget 樣式，只要在插入 Widget 前面的地方，放置一段 CSS 宣告區域，剩下的就是填樣式規則進去而已。（另外 Widget 右上那小圖我懶得改了，畢竟要自己另外製圖等的很麻煩呀。）

<style type="text/css">
<!--
/* 樣式規則寫在這行下面就好，畢竟這行是註解文。 */
-->
</style>

寬高、位置

• .plurk-widget { max-width: 300px !important } -- 改 300 這數字的部分，就可以自訂寬度了。
• .plurk-timeline { height: 300px !important } -- 改 300 這數字的部分，就可以自訂高度了。
• .plurk-widget { margin:auto !important } -- 把 Widget 置中。

字體、配色

• .plurk-widget { font-size: 14px !important } -- 改 14 這數字的部分，就可以自訂字體大小了。
• .plurk-timeline a { color: black !important ; background: transparent !important } -- 改 black 跟 transparent 的部分， timeline 的文字顏色跟底色就會變化了。（顏色規則請看下面找找）
• .plurk-meta { font-size: 10px !important } -- 改 10 這數字的部分，每則留言底下的回應數跟時間的資訊，字體大小就會變化。
• .call-action , .call-action a { color: black !important ; background: transparent !important } -- 改 black 跟 transparent 的部分， Widget 底下那欄中的文字顏色跟底色就會變化了。（顏色規則請看下面找找）

底色、底圖

• .plurk-widget { background: black !important } -- 改 black 這裡就可以調整顏色了。（填 white 之類的顏色英文，或是 #09f 或 #09abcf 這種感覺的十六進位值就好。）
• .plurk-widget { background: url(" 圖片網址 ") !important } -- 改 圖片網址 這裡，可以替換你喜歡的底圖進去。
• .plurk-timeline { background: #e9f7f6 !important } -- 改 #e9f7f6 這裡，可以替換 timeline 的底色。（顏色規則請往上找前面的說明）

成品

大概會長這樣子，總之有什麼問題請利用回文功能發問吧。然後上圖的樣式規則可以精簡成下面這樣。

.plurk-widget {
 max-width: 360px !important
 ;
 margin:auto !important
 ;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOchyphenhyphen_-HffJR6AVBJsl9VOK2cqfjFg0eJbq2K6ibaj8tSpQQxL3jMp17Tl3d8_7AQC9_RJsLzySoVX9NB-6fiO-JjqNlMdkSwcWlM_snK2XSxcBM3irgUJsAyUkRNb0regdDl/s1600/plurk_bgimg_pattern_036.gif") !important
 ;
 font-size: 14px !important
 }

.plurk-timeline {
 height: 400px !important
 ;
 background: #e9f7f6 !important
 }

.plurk-widget .plurk-timeline a , .plurk-widget .plurk-timeline a:link {
 color: black !important
 ;
 background: transparent !important
 }

.plurk-meta {
 font-size: 10px !important
 }

.call-action , .plurk-widget .call-action a , .plurk-widget .call-action a:link {
 color: black !important
 ;
 background: transparent !important
 }

其它（有關 JavaScript）

有在學 JavaScript（不是 JAVA）的，應該會發現官方給的 Widget 語法還可以自己調整些功能吧，下面稍微來說明一下。

首先打開 Plurk 官方的 widget.js 檔案，上面就有寫些說明了，你只要把你的 Widget 語法修一下就好。

比如說 <script type="text/javascript" src="[中略]&no_css=true"></script> 就可以關掉官方塞的 CSS 樣式，重點就在於該把 &no_css=true 這類的指令給塞進哪裡而已。

• &no_css=true -- 關閉官方給的 CSS 樣式
• &interval=0 -- 關閉 Widget 的自動更新功能、這樣別人看你的網頁時比較不會忽然頓住（註：官方給的 JS 程式碼已經有這項了，把原本的數字改掉就好。）
• &small=true -- 改成小型版本的 Widget（註：實際測試後會發現有點問題，所以不建議使用。）