Plurk2:噗浪插頭的貼紙美化

XHTML+CSS


plurk.tw

Plurk Plug(噗浪插頭XD)樣式目前有3種,範例如下:

PLURK2 Clean Style:
乾淨的版本,沒有CSS,所以會直接套用你原本部落格的CSS。

PLURK2Hana Style:
較花俏的版本。

ph2(Plurk Hana 2) Style:
比較中性、適合各種佈景的部落格。(但有用jQuery)

這應該是第一次,畫出來的東西真的把他用程式套成可以貼的貼紙。看到Gene貼到他的部落格,感覺頗有趣的。

噗浪插頭 = Plurk Plug = Plurk2

不過當我試著貼一張到自己部落格,我發現我的部落格CSS都用太兇了
比如說我把文章內文的所有圖片,都padding(偏移)了10px,因為我想要這樣的效果。

但Plurk2貼紙貼上去之後,因為這張貼紙是javascript自動會寫入內容,並非iframe的方式,所以不只自己的CSS會生效,部落格本身的CSS Selector如果碰巧有指到這張貼紙,那也會生效。因此貼紙裡的圖片也變成有padding:10px這個屬性。很醜。

這部份不難,就找到貼紙專屬的CSS,然後加上:

padding:0;
margin:0;

這是最簡單的CSS Reset。我另外也在其他html元素也加上這個東西。不過不確定還會不會有其他問題,目前只能等大家測了。

另外,我還有個問題就是,一般CSS教學都說以下語法要寫在<head></head>之間,
<link rel="stylesheet" type="text/css" href="plurk-plug.css">

可是當貼紙想要使用這個語法,不可能貼在<head></head>裡面,但貼在body裡面也是生效的!不知會不會有什麼後遺症?

回應

花水妹好棒~

花水妹好正!!XD

好像沒有看到有加plurk-plug.css ?!
後遺症就是W3C驗證不會過~.~
不曉得有沒有考慮iframe的形式,會比較好。

發現BUG,把兩組第三種折合的貼紙貼在一起時,上面的會打不開,下面的常開!

是的!已經發現了,感謝!修改中。

謝謝教學
我的文章可以連結到你的網頁嗎^^
謝謝

當然可以!

花水妹好棒+1

plurk.tw 為何我貼在 drupal 網站的 comment 裡, 無法顯示啊? 隔是已經改成 html

好像回文超過三行會看不見

發表新回應

這個欄位的內容會保密,不會公開顯示。 If you have a Gravatar account, used to display your avatar.
  • 自動將網址與電子郵件位址轉變為連結。
  • 可使用的 HTML 標籤:<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • 自動斷行和分段。

更多關於格式選項的資訊