訪客留言簿

星期一, 6月 09, 2008

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

前言

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

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

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

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

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

Plurk 的 Widget 官方預設樣式

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

準備工具

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

  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 的一部分 HTML

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

widget.css 中關於 .plurk-widget 寬度的樣式規則

總之這樣就找到跟寬度有關的樣式規則了,會 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 樣式完成圖

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

.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(註:實際測試後會發現有點問題,所以不建議使用。)

19 comments:

Unknown 提到...

它widget js有個參數no_css設定成true,之後就是你的了,可以完全徹底修改。

wini 提到...

感謝 Max Chu , JS 我不太熟,所以沒去挖 JS 裡寫了啥。 XD

試了一下,把官方給的 Widget code 改成類似這樣,再貼進網頁就能關掉官方預設樣式了,不過要全部自己設定也挺麻煩的。(死亡)

<script type="text/javascript" src="[中略]&no_css=true"></script>

匿名 提到...

謝謝您的教學,介意讓我引用一下嗎:)

wini 提到...

>莫屬

嗯嗯,歡迎,需要全文轉載或分割引用的話,下面有寫文件授權方式,不過只是引用一小段的話,標個來源就好。

(但是這篇寫得很隨便,其實是可以整個改掉的,不過要重新設計挺麻煩的,程式碼這部分倒算是相對簡單多了。)

匿名 提到...

我放到無名,但是卻沒有畫面出現啊??還有,大大的plurk帳號是多少呢?

wini 提到...

yellowjia 你好,我沒在用無名,不過無名要啟用 JavaScript 好像要付費,建議你找無名官方或使用者問看看再試。

(至於我的 Plurk 你可以在這裡慢慢找找看)

匿名 提到...

我是無名的付費使用者,剛剛試了一下
好像也沒辦法orz(都已經付錢了,囧)

wini 提到...

Ken 你好。

Plurk 7/1 後的新樣式是沒得改的,不過那之前的樣式就是這一篇中的,至於無名不能用,還是請你直接問無名官方比較快,因為我真的不清楚無名怎麼用呀。

wini 提到...

對了,其實可以試試看新版的 Widget 啦,沒有任何 JavaScript ,只是有個 iframe ,不知道無名能不能給人塞 iframe 就是。

小筱 提到...

留下脚印...等下次要用到再来看看...

谢谢分享!

wini 提到...

N 你好,我這裡修改 Plurk Widget 的文都沒跟上最新版,而且舊版的也被官方拿掉了,你可能要看看別的地方的教學哦。

(抱歉了,站長太偷懶了。 >w<)

wini 提到...

>weedyc

收到。不過我很久沒用 Plurk 的 Widget 了,這篇還是可以用嗎?(之前改版時有把舊的 widget 支援移掉,所以我不確定是不是可以用在最新版的。)

總之我覺得這篇太舊,內容已經失效了,如果其實沒引用到什麼重點的話,是建議不要回連到這啦。 XD

floce 提到...

請問 plurk widget 有冇辨法放係 Yahoo呀?

wini 提到...

>floce

我不太用 Yahoo 辭典以外的服務,所以不是很清楚,你可以直接問 Yahoo 客服試試。

基本上是需要 javascript 和 iframe 兩種功能,不過最新的 plurk widget 作成怎樣我還沒去看,不太清楚是不是還要這兩項支援。

飄月明(mingray) 提到...

現在沒用惹OwQ,
現在變成http://www.plurk.com/you_id_enter_here.xml,
(參考 ptt blog #1AFo2Yq9 http://www.ptt.cc/bbs/Blog/M.1245651106.A.D09.html )
然後還不支援json(倒地)。

wini…該不會是洽特的wini吧…(思

wini 提到...

>飄月明(mingray)

plurk 的 widget 感覺改版太快,不太想研究了,所以這篇算是放著不管啦。

然後你一定是把我跟某位又高又帥又正直又多金的大大搞混了,人家只是窮窮肥肥醜醜啦。 QQ

Mei 提到...

我逛逛逛晃晃晃
晃到這~
多謝教學.......
雖然語法還是看不懂(我知要多練習)
怕被我弄到不成樣電腦掛掉
我還是乖乖看分享就好
但也真的學到一些~~
感謝分享唷

wini 提到...

>Mei

Mei 你好,這個只是修改網頁的排版,並不會弄到電腦掛掉(頂多是瀏覽器當掉或狂吃 CPU),你有興趣的話,可以摸摸下面的中文文章,學學 CSS 哦。

CSS Tutorial Traditional Chinese
http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm

wini 提到...

另外因為 Plurk 的這個 Widget 有修改過很多次,現在的版本可能沒法照教學的修改,這部分就要請你再跟其他人請教一下。

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權