2008/7/25

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

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 #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月

19 則留言:

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

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

    回覆刪除
  3. 謝謝 !! 我用ㄌ你ㄉ面板嚕!!


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

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

    回覆刪除
  5. 我聽不懂你的問題耶,可以給我網址嗎?

    回覆刪除
  6. 圖片網址應該放圖片的網址...不是放無名或臉書的網址喔!

    回覆刪除
  7. 不好意思 我想請問

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

    視需要多少呢

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

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

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

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

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

    回覆刪除
  9. 圖片貼在背景可不可以不要垂直水平都是
    可不可以一個就好 ?

    新手 ^^ 麻煩 ~

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

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

    回覆刪除
  12. 不錯不錯

    筆記下來

    回覆刪除
  13. 套用成功囉!! 感謝你

    回覆刪除
  14. 請問上最上方 那些首頁.個人檔案.登出那類要怎麼改顏色呢?謝謝

    回覆刪除
  15. 那個....我目前發現有一個錯誤

    /*控制面板頭像和年紀、位置標示處*/
    #dash-profile p#full_name{color:#369}
    #dash-profile #span_years , #m_or_f{font-size:14px;}

    再這段css中,那個p是多餘的
    沒有p才能讓css正常顯示

    回覆刪除
  16. 真的耶!
    已改正~~
    謝謝喔!!

    回覆刪除
  17. 可以幫我弄一下嗎?(我不太會弄ㄟ)
    信箱:cat160006087@yahoo.com
    圖片網址:http://www.pixiv.net/member_illust.php?mode=big&illust_id=29933640

    回覆刪除
  18. @匿名我沒有在幫忙做版面啦,要我做的話要收費喔XD

    回覆刪除