首頁 [教學]Plurk版面製作技巧(一)
« 首頁 »
2009 年 08 月 04 日 留言:9

[教學]Plurk版面製作技巧(一)

Plurk
分享文章

WP更新一整個很耗時間(雖然也不過就是10分鐘),決定先把教學寫完再來看著辦。

這篇文章主要是講解一些在修改Plurk版面時很常用到的幾個大方向,另外因為我個人對於css這東西只會應用,概念什麼的基本上沒仔細研究過,所以也不會出現什麼專有名詞,只有很基礎的樣式語法和Plurk版面的標籤而已。

因為是很基礎的一篇,Plurk官方自己都寫了教學,不用就浪費了,所以這篇主要是參考官方那篇寫出來,再補充一些樣式語法而已。

不過我英文很爛,只有語法略懂一些,有些地方可能跟原文不太一樣,就不要太計較啦XD

一、基本構造:

Plurk的版面基本上分為三個部份。

  • body,html
    決定整個噗浪版面的背景、字型大小、顏色部份。
  • #timeline_holder
    時間軸的樣式、背景。
  • #plurk-dashboard
    下方的控制面板部份。

所以想改哪裡就在哪裡加上控制語法就行了。

那…語法要怎麼加呢?

二、加入樣式語法:

我們先以第一個「body,html」為範例,在後面空一個空白後加上{ },就會變成像下面這樣:

body,html {          }

總之,想像body,html是一個容器,把要裝飾這個容器的東西統統丟進去就對了。時間軸跟控制面板也是這樣做就好,要注意空白不能省略,還有前面的「#」也是。

容器做好之後就開始丟東西了,先試著來改一下整個版面的背景顏色和字體顏色吧。

body,html {
background:#000000; /* 背景顏色 */
color:#ffffff; /* 字體顏色 */
}

將這串語法貼到自訂css的欄位裡就行了。(如果已經使用從別人那裡下載來的版面時,請先把語法清空再貼,否則效果不會出現。)

要注意的是,每一個樣式中間都要用「;」隔開,否則語法會錯誤。

※Plurk中通常「color」屬性就代表「文字顏色」。

其實挺簡單的XD 可以自己去一些素材網站找css語法,把想要的效果貼進去就好了。時間軸和控制面板也是這樣改。

三、簡單樣式語法分享:

最後來貼一些我還蠻常用的樣式,大家可以自己加進去看看效果。

  • font-family
    設定字體樣式,像是新細明體或是標楷體之類的。可以同時指定多種字型,最前面的最優先使用。
    範例:「font-family:Tahoma,微軟正黑體,Verdana;」
  • font-size
    設定字型大小,單位為px。
    範例:「font-size:12px;」
  • background:none;
    去掉背景。
  • background: url(背景圖片網址);
    背景採用自己設定的圖片,這個語法會自動重複背景圖片。

嗯…其他的之後再做介紹XD(被打)基本上如果只是想改圖片背景、文字顏色和大小的話,這些就很夠用了。

以後有介紹到Plurk其他部份的語法時再追加一些特殊效果~

有問題請直接留言在這篇文章,或是透過Plurk來問我。

下一篇還不知道要教啥…有特別想知道哪個地方怎麼改的也可以告訴我。

留言

( 9 )
  1. hing 2011 年 01 月 17 日 9:31

    請問如何把#bottom_line(即時間條背景色)改為白色的透明色即顏色是白色但又可以看到頁面的背景,這個語法也能用在其他區上嗎?icon變為透明後(用上面語法)什麼語法是MOUSE一到ICON就變回原來的色,FAN及FD區的將XX加入好友有什麼語法可用?

    • Hinishi (管理員) 2011 年 01 月 22 日 0:52

      這位同學你好,其實同學你這樣像連珠砲似的問了一堆問題,讓膽小的我覺得很惶恐啊,
      我想我只能告訴你透明度的語法是「filter:alpha(opacity=數字)」,其餘的就要請你自己找了~
      透明度基本上只要你塞進去發現該區塊變成透明的就代表它能用了,所以請發揮實驗精神努力測試吧!
      至於滑鼠移過去變色應該是hover吧,不過噗浪並不是所有選擇器都有hover可以讓你玩,我也還在摸索中,所以大概無法幫上忙了。
      最後朋友區和粉絲區有什麼語法可用……這要說完大概要花一天一夜柳,而且同學你可以看看我最新寫的那篇文章,有人一直在尋找我是不是把他們的語法公佈出去耶,所以我真的不能說,想知道的話請去問他們吧~感謝你的留言喔!

  2. fanny 2011 年 09 月 29 日 21:56

    你好,請問打噗那位置叫甚麼?不是dashboard?

  3. fanny 2011 年 09 月 30 日 19:04

    再問一下,河道上留言箱(?噗?)是甚麼?plurk_box?

    • Hinishi (管理員) 2011 年 09 月 30 日 19:57

      第一,我聽不太懂你的表達方式。
      第二,與其花時間留言不如自行搜尋,有很多網站有寫教學,
      應該會比我在這裡直接回答你來得清楚明白。
      第三,請避免沒有必要的重複留言,避免版面混亂。(好歹這也是我的網誌,請尊重一下)

      謝謝。

      • fanny 2011 年 10 月 01 日 23:15

        造成不便不好意思了!剛好没一次過想到
        既然閣下也不會,有甚麼更好的教學網站可以推介一下嗎?

      • Hinishi (管理員) 2011 年 10 月 02 日 10:27

        你似乎誤會了,我說的是「我講解得不如教學網站清楚」,不代表我不會(不然我樣式怎麼寫出來的?)
        而且你形容得不清不楚,沒有附圖沒有網址沒有任何東西,
        要提問之前還要人花時間去找出你到底要問什麼,我覺得有點……
        至於教學網站,隨便搜尋一下就有吧?我這裡不也是搜尋來的?
        現在台灣很多自己寫樣式的人都會寫教學,
        打開你用的噗浪CSS裡面就會有網址了,
        自己動手會比在這邊一來一往的留言快很多。

  4. kaoru 2011 年 12 月 14 日 1:18

    自家噗浪的現狀
    -->http://i231.photobucket.com/albums/ee241/minne0324/sadsgfgger.png

    想變成這樣
    -->http://i231.photobucket.com/albums/ee241/minne0324/5289004995_50aa2b4072.jpg

    請問有辦法把"1 2 3"變成透明的嗎
    就是可以直接看的到背景 半透明也可以
    另外背景圖有辦法填滿嗎 向上面那張圖一樣
    背景圖原尺寸
    -->http://images.plurk.com/c03b64f8b41856de74c16d5606e4d210.jpg
    找了很多地方的語法都看不太懂OTZ

  5. 冰藤~ 2013 年 10 月 10 日 16:38

    我想知道要怎麼把下面那個放大頭貼的那一區塊變透明,但是如果滑鼠游標移到上面時它就會出現的那種特殊效果~謝謝~

發表迴響