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來問我。
下一篇還不知道要教啥…有特別想知道哪個地方怎麼改的也可以告訴我。
請問如何把#bottom_line(即時間條背景色)改為白色的透明色即顏色是白色但又可以看到頁面的背景,這個語法也能用在其他區上嗎?icon變為透明後(用上面語法)什麼語法是MOUSE一到ICON就變回原來的色,FAN及FD區的將XX加入好友有什麼語法可用?
這位同學你好,其實同學你這樣像連珠砲似的問了一堆問題,讓膽小的我覺得很惶恐啊,
我想我只能告訴你透明度的語法是「filter:alpha(opacity=數字)」,其餘的就要請你自己找了~
透明度基本上只要你塞進去發現該區塊變成透明的就代表它能用了,所以請發揮實驗精神努力測試吧!
至於滑鼠移過去變色應該是hover吧,不過噗浪並不是所有選擇器都有hover可以讓你玩,我也還在摸索中,所以大概無法幫上忙了。
最後朋友區和粉絲區有什麼語法可用……這要說完大概要花一天一夜柳,而且同學你可以看看我最新寫的那篇文章,有人一直在尋找我是不是把他們的語法公佈出去耶,所以我真的不能說,想知道的話請去問他們吧~感謝你的留言喔!
你好,請問打噗那位置叫甚麼?不是dashboard?
再問一下,河道上留言箱(?噗?)是甚麼?plurk_box?
第一,我聽不太懂你的表達方式。
第二,與其花時間留言不如自行搜尋,有很多網站有寫教學,
應該會比我在這裡直接回答你來得清楚明白。
第三,請避免沒有必要的重複留言,避免版面混亂。(好歹這也是我的網誌,請尊重一下)
謝謝。
造成不便不好意思了!剛好没一次過想到
既然閣下也不會,有甚麼更好的教學網站可以推介一下嗎?
你似乎誤會了,我說的是「我講解得不如教學網站清楚」,不代表我不會(不然我樣式怎麼寫出來的?)
而且你形容得不清不楚,沒有附圖沒有網址沒有任何東西,
要提問之前還要人花時間去找出你到底要問什麼,我覺得有點……
至於教學網站,隨便搜尋一下就有吧?我這裡不也是搜尋來的?
現在台灣很多自己寫樣式的人都會寫教學,
打開你用的噗浪CSS裡面就會有網址了,
自己動手會比在這邊一來一往的留言快很多。
自家噗浪的現狀
-->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