Plurk版型任你換之CSS簡易教學

Posted on 2008年7月25日 星期五 by katejane12 in , , ,


Plurk真的越來越好玩了,現在還可以開放Karma25以上的噗浪客自行修改版型,不過必須會基本的CSS才可以,今天我大概把玩了一下,真的很有趣。許多噗友也躍躍欲試,希望可以交流一下修改版面的方法,只是小妹我正在上班阿,只能先寫個簡單的教學,希望大家別棄嫌阿(笑)

從我的檔案旁邊的edit進入,再選自訂外觀,編輯CSS的地方就在下圖圈選處。把下方的語法複製貼上後,開始照自己想要的顏色、圖片修改就OK啦!!



看看我的噗浪版面!!





/*全頁面背景修改*/

body, html {

background-image: url(圖片網址);

background-repeat: repeat;

color: black;

}



/*頁首的BAR左半部*/

#top_bar .content a{color:#ff0099[字的顏色]; font-weight: normal ;}

#top_bar .content a:hover{color:#ff0099; font-weight: normal ;}

#top_bar .content a#edit_link{color:#ff0099; font-weight: bold ;}



/*頁首的BAR右半部*/

#top_login a{color:#ff0099;}



/*河道底色或圖案*/

#timeline_holder {

background-image: url(背景圖網址);

background-repeat: repeat; background-color:#ffffcc[底色]

}

#timeline_holder #timeline_cnt #time_show {}

#timeline_holder #timeline_cnt #display_options_holder {}

#timeline_holder #timeline_cnt .day_start {background-color:#F09} /*換日線*/

#timeline_holder #timeline_bg .bottom_start , .bottom_end {color:#111} /*時間軸柱的顏色*/

#timeline_holder #bottom_line {background-color:#FFF; border:0px ;} /*時間軸柱背景色*/



/*河道上浪友發的浪*/

.plurk_cnt {background-color:#ffffff ; border-color:#f09 ;}

a.name{color: #111;}

.text_holder {color: #1aa;}



/*河道下方更新通知*/

#updater {border:0; }

#updater #noti_np #noti_np_text{color:#f09; }/*左*/

#updater #noti_np a{color:#fff;}

#updater #noti_re #noti_re_view #noti_re_text {color:#fff}

#updater #noti_re #noti_re_view a{color:#f09;}



/* 整個控制面板底圖 */

#plurk-dashboard

{

background: #000000 url(底圖網址);

background-repeat: repeat;

}



/*控制面板鍵入訊息處*/

#main_poster .qual_holder{color:#004080; font-wight:bold ; font-size:20px[字型大小];}



/*控制面板更改plurk私密、語系和選項等等*/

#more_options {border:0px solid #CCC;}

#more_options a#more_options_link {}

#more_options #plurk_to{color:#000;}

#more_options #more_options_holder{}



/*控制面板頭像和年紀、位置標示處*/

#dash-profile p#full_name{color:#369}

#dash-profile #span_years , #m_or_f{font-size:14px;}





/*控制面板自介*/

#dash-additional-info {font-family: Verdana, Arial;}

#dash-additional-info #about_me{color:#00C}

#dash-additional-info #about_me a{color:#F06}

#dash-additional-info #about_me a:hover{color:#C00;font-size:14px;}



/*控制面板STATS欄位(Karma等等數據欄位)*/

#dash-stats{}

#dash-stats h2{color:#FFF; background-color:#666}

#dash-stats #karma {color:#C00;font-family: Arial}

#dash-stats table tbody tr th{}

#dash-stats table tbody tr td{font-weight:bold;}



/*控制面板朋友 friend 欄位*/

#dash-friends {}

#dash-friends h2{color:#FFF; background-color:#666}

#dash-friends #friend_holder{border:1px solid #aaa ;}



/*控制面板粉絲 FANS欄位*/

#dash-fans{}

#dash-fans h2{color:#FFF; background-color:#666 }



如果發懶而想直接套用我的版型,請直接按這個連結囉!

[ 套用凱特|該該的版型 ]

成功了嗎?操作起來若有問題再留言討論囉!我繼續上班XD

統一發票7 8月

12 意見:

easonni 提到...

我偷用你的版型了
感謝(羞)

Anonymous 提到...

background-image: url(圖片網址);
大大您好
我想請問的問題是,所謂的圖片網址是指什麼?
是我必需先放一張圖到某個網站上面,然後寫下它的位址
之後再放在url後面(把網址放在這裡)
是這個樣子的嗎?
我的信箱loowxfdl@yahoo.com.tw
不好意思嘿!我新手,要麻煩您教教了

Anonymous 提到...

謝謝 !! 我用ㄌ你ㄉ面板嚕!!


對ㄌ~關於面板ㄉ製作~我不怎麼會用!! 哈
希望有新ㄉ面板可通知一下嚕
http://www.plurk.com/DanteAlighieri

Anonymous 提到...

請問圖片網址..我用無名跟臉書都無法顯示 請問要怎解除這問題 另外還有下面控制面板的朋友 粉絲 統計 那個連結顏色該怎樣改變..超新手 麻煩幫解答 robbie0919967047@hotmail.com 麻煩大大幫解疑惑.

凱特打結 提到...

圖片網址應該放圖片的網址...不是放無名或臉書的網址喔!

凱特打結 提到...

我聽不懂你的問題耶,可以給我網址嗎?

Mark 提到...

不好意思 我想請問

你在河道(時間軸上)的圖片 他所需要的尺寸 跟 像素

視需要多少呢

因為我把我的圖片 放上去 都會變成

一張圖片在中間 另外 左右 各是被ㄎㄚ的 一半的圖片

不然就是 重疊很多張ˊ.ˇ

可以幫幫我嗎 是我語法打錯 還是???

http://blog.pixnet.net 提到...


我沒等級那ㄇ高

Anonymous 提到...

妳好呀~~感謝妳的分享,我有照妳的作了,但是~~~為何只出現四分之三的圖,其它都沒有>"<~~http://www.plurk.com/LOVEKAME0223
這是我的噗浪,麻煩妳了,謝謝^^

Anonymous 提到...

圖片貼在背景可不可以不要垂直水平都是
可不可以一個就好 ?

新手 ^^ 麻煩 ~

噗浪客xd 提到...

欸抖....那...連結的顏色怎麼換呢
就是http://xxxxxxxxx (XX)←這個
有語法嗎?.....

凱特打結 提到...

@噗浪客xd
.plurk a.ex_link {color: 連結色碼}
.plurk a.ex_link:hover{color:滑鼠移到連結時色碼}

張貼留言