You are here: Home // Plurk // Plurk自訂版面第二發(進階版)

Plurk自訂版面第二發(進階版)

Posted by ㄚ帕契 on 七月 25, 2008 | 25 Comments

經過一夜的測試，再歸納一些plurk的css語法，
也順便介紹幾個簡單的css的語法，

1. color:red….改變字的顏色red，前面如果有a表示那是個連結

2. font-size:12px…..字的大小12

3. background:url(圖片網址)…..加入底圖

4. background-color:red…..背景顏色red

5. border:1px solid red…..加框，寬度是1px，顏色red

另外就是不能用display:none把某個東西隱藏，這個是被禁止的。

補充：目前用float也是禁止的，但未來是否會依照karma值調整呢？我也不確定

其他就看我底下的範例囉~

引用內容 引用內容
/* USE_DARK_ICONS */
/*整個頁面設定，含背景圖更改*/
body, html { font-family: Verdana, Arial; background:url(http://farm4.static.flickr.com/3293/2701035262_fb241996cf_o.jpg) top left }

/*上方BAR*/
#top_login {background-color:#FFF; margin:0 ;padding:0;height:30px;line-height:25px;background:url(http://ipk.tw/plk/top_login.png) 0px -18px repeat-x ;}
#top_login a{color:#030;}
/*上方BAR的左半邊*/
#top_bar .content a{color: #030; font-weight: normal ;}
#top_bar .content a:hover{color:red; font-weight: normal ;}
#top_bar .content a#edit_link{color:#FFF; font-weight: bold ; background-color:#a0a;} /* edit的修改 */

/*時間軸的左下方更新通知欄*/
#updater {border:0; }
#updater #noti_np #noti_np_text{color:#00C; } /*左半邊*/
#updater #noti_np a{color:#C00;}
#updater #noti_re #noti_re_view #noti_re_text {color:#00C} /*右半邊*/
#updater #noti_re #noti_re_view a{color:#C00;}

/*時間軸*/
#timeline_holder {margin:0 ;padding:0 ; border:0 ; background: none; background-color:#FFF; }
#timeline_holder #timeline_cnt #time_show {}
#timeline_holder #timeline_cnt #display_options_holder {}
#timeline_holder #timeline_cnt .day_start {background-color:#FFF} /*換日線*/
#timeline_holder #timeline_bg .bottom_start , .bottom_end {color:#C00} /*時間條字的顏色*/
#timeline_holder #bottom_line {background-color:#FFF; border:0px ;} /*時間條背景色*/
#timeline_holder #dynamic_logo {}/*時間軸的右上方的動物logo圖*/

/*時間軸裡的每個人寫的plurk內容*/
.plurk_cnt {background-color:#add589 ; border-color:#030 ;}
a.name{color: #030;}
.text_holder {color: #555;}

/********下方的個人資料大區塊*********/
/*右上方觀看3個小區塊，所有plurk、我的plurk，私密plurks*/
#filter_tab a {background-color: } /*已選擇的*/
#filter_tab a.off_tab {border:0px} /*未選擇的*/

/*Plurk 顯示名稱 及 填寫plurk處*/
#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{}

/****第一區塊~ 第四區塊 ****/
#plurk-dashboard{ background:none; border:1px dotted #090;} /*他是一張底圖，要去掉必須先 background:none;*/

/*第一區塊*/
/*個人全名*/
#dash-profile p#full_name{color:#369}
/*個人年紀、性別*/
#dash-profile #span_years , #m_or_f{font-size:12px;}
/*個人來自國家，這邊可以加上國旗*/
#dash-profile #location{padding-left:30px;background:url(http://farm4.static.flickr.com/3110/2697323733_f587dd7620_o.jpg) no-repeat; }
/*個人額外自填的自我介紹*/
#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;}

/*第二區塊 stats*/
#dash-stats{}
#dash-stats h2{color:#FFF; background-color:#369;padding:3px;} /*區塊名稱*/
#dash-stats #karma {color:#C00;font-family: Arial} /*Karma數字*/
#dash-stats table tbody tr th{} /*下方左半邊*/
#dash-stats table tbody tr td{font-weight:bold;} /*下方右半邊*/

/*第三區塊 朋友 friends*/
#dash-friends {}
#dash-friends h2{color:#FFF; background-color:#369;padding:3px;font-weight:normal;} /*區塊名稱*/
#dash-friends #friend_holder{border:1px solid #aaa ;} /*朋友群大頭照*/

/*第四區塊 粉絲 fnas*/
#dash-fans{}
#dash-fans h2{color:#FFF; background-color:#369 ;padding:3px;font-weight:normal;} /*區塊名稱*/



歷史上的今天...

推薦到其他網站：
  • Facebook
  • plurk
  • Twitter
  • Google Bookmarks
  • del.icio.us

Tags: , , ,

25 Responses to " Plurk自訂版面第二發(進階版) "

  1. Knuckles 說道：
    2010/05/18 at 18:37

    請問Plurk 可以用z-index把換日線藏到河道後面嗎?
    我想把換日線作成動態的背景,讓使用者拉動時可以橫向移動

    回覆回覆
    回覆
    • ㄚ帕契 說道：
      2010/05/19 at 00:16

      @Knuckles:
      換日線藏到後面去，不就不能顯示你要放的動態背景了吧？！

      回覆回覆
  2. 米 說道：
    2010/03/13 at 19:44

    如果要把區塊改成透明 要怎樣改

    回覆回覆
    回覆
  3. bluesky 說道：
    2010/01/22 at 11:12

    謝謝版主，回頭研究去！^____^

    回覆回覆
    回覆
  4. bluesky 說道：
    2010/01/21 at 01:05

    站長您好，想向您請教，如何隱藏「邀請或尋找您在plurk上的朋友」以及「分享您的plurk頁面」兩個元素要件？這是我之前貼入的隱藏語言，但不知為何，突然不能使用，又整個推擠到粉絲框。麻煩了。這是我的plurk：http://www.plurk.com/blueskytalk，謝謝！

    /* 隱藏邀請 */
    a#dashboard-invite,#invite_url,a#mobile-gfx,a#widget-gfx, a#twitter-gfx {opacity:0;filter:alpha(opacity=0);}

    /* 隱藏分享 */
    #sharePlurk {opacity:0;filter:alpha(opacity=0);}

    回覆回覆
    回覆
    • ㄚ帕契 說道：
      2010/01/21 at 14:26

      我是用firefox瀏覽器，css如下：
      /* 隱藏邀請 */
      a#dashboard-invite,.dash-icon {opacity:0 !important;}
      /* 隱藏分享 */
      #sharePlurk {opacity:0 !important;}

      如果你用IE系列的話，應該改成：
      /* 隱藏邀請 */
      a#dashboard-invite,.dash-icon{filter:alpha(opacity=0) !important;}
      /* 隱藏分享 */
      #sharePlurk {filter:alpha(opacity=0);}

      回覆回覆
  5. 展 說道：
    2010/01/17 at 21:41

    謝謝分享… 我拿來用嚕>W<

    回覆回覆
    回覆
  6. chen_james 說道：
    2009/08/30 at 09:11

    請問要如何調整自我資料中profile的大小

    回覆回覆
    回覆
  7. moon 說道：
    2009/08/03 at 22:12

    是的~再附上一張其他大大改過的圖~
    http://www9.speedyshare.com/data/547645235/17878701/80909145/02.JPG
    不知道這個要如何去修改呢~~
    謝謝您喔!!!

    回覆回覆
    回覆
  8. Moon 說道：
    2009/08/03 at 02:57

    http://www7.speedyshare.com/data/218710399/17868924/82067619/01.JPG
    附上圖片~
    就是這個地方~
    我看有些大大會將它改成一個鑰匙的形狀~
    不知道這邊是如何去修改~~
    謝謝您的回答!!感謝!!!!

    我沒改過這一塊耶，那邊不是消音功能的地方嗎？

    回覆回覆
    回覆
  9. Moon 說道：
    2009/07/29 at 23:37

    您好~~看了您的噗浪CSS教學~學到了很多~~
    不過小女子想請教一下~~
    像是在河道上發的浪旁邊都會有顯示有幾個人回覆或者是有…~
    那個不知道要如何去修改~也爬過您回覆的文章~
    您也只說用圓角設定~那請問一下CSS語法是要如何去寫呢???

    這個回覆數顯示，請改
    .new .response_count{ 這邊是要改的語法 }
    若要呈現圓角效果請再加入用 -moz-border-radius：2px
    但是這語法只有Firefox有用，其他瀏覽器不會有效果

    還有看了很多大大的面板~
    像是有些面板在各個河道上的浪都會有個橘色往右邊的小箭頭~
    他們都會修改成像是鑰匙的樣式~那這個請問又要如何用CSS修改呢??

    這邊不太懂你的意思，方便放圖說明嗎？

    不好意思~~很多問題~~我也找了很多的文章~可是也沒有這方面的教學~
    如不好在這裡解答~我的E-MAIL:moonmei＃seed.net.tw~~謝謝!!!

    回覆回覆
    回覆
  10. gg 說道：
    2009/05/26 at 20:37

    感謝回答 那我只好選一張OK的

    那不好意思在麻煩版主 請益一個問題 ^^”

    朋友; 統計跟粉絲三個區塊

    我可以任意更動他們的”位置”嗎？

    我的目的是不想區塊擋到圖 圖壞了區塊的文字

    如果以X代表區塊

    可以這樣 XXX

    或是 X
    X
    X

    或是 X
    XX

    這樣做調整嗎？

    #dash-friends {}
    block-position right-top

    有這樣寫的嗎？ 分成九宮格？ 左上 左中 左下 中上 中中 中下 右上 右中 右下
    不是很懂.. @@a 再次感謝…^^

    回覆回覆
    回覆
  11. gg 說道：
    2009/05/25 at 23:59

    對
    不過我的意思是
    河道上#timeline_holder{background:url(圖片網址)}
    的算是”上”

    因為我在body貼的圖是細長的 放在bottom
    算”下”

    所以在body 的中間有點空 想在body ,html 在貼一張放在middle “中”

    但這樣body算貼兩張 我的問題是 有辦法在body貼兩張並且個別控制他們的位置
    在”中”跟”下”嗎？

    不知道你看不看的懂 ^^” 感謝回答

    body不能放兩張，所有的”層”(layer)都只能有一張背景圖

    回覆回覆
    回覆
  12. gg 說道：
    2009/05/25 at 00:18

    請問如果追加背景圖

    一張放底部 一張放中間

    是否可以兩張圖一起出現？

    最下層底圖放這，
    body, html {background:url(圖片網址) }
    一個放河道上#timeline_holder{background:url(圖片網址)}

    回覆回覆
    回覆
  13. Kurumi 說道：
    2009/05/21 at 23:10

    謝謝你的整理分享～
    對想要自己編輯CSS來說很有用呢！

    回覆回覆
    回覆
  14. 蘇打 說道：
    2009/04/25 at 21:47

    請問可以使用您的範例作修改來套用在我的撲浪嗎^^?

    沒問題，不過你可以直接安裝我最新的佈景去改，因為發表這篇到現在，plurk有些css定義有更動過了。

    回覆回覆
    回覆
  15. Circus™ 說道：
    2009/03/25 at 00:37

    背景圖要怎樣放大??

    背景圖太小張只好設定重複出現了，不然你自己要重新弄一張比較大張一點的

    回覆回覆
    回覆
  16. mypicola 說道：
    2008/11/12 at 06:42

    thank you

    回覆回覆
    回覆
  17. Carol 說道：
    2008/08/02 at 22:58

    Thank you very much.

    回覆回覆
    回覆
  18. Carol 說道：
    2008/08/01 at 17:19

    請問婚姻狀況那部份的語法要如何寫?

    dash-marriage ?

    寫入底下兩行，就知道該怎麼改了
    #relationship_container{color:#FF0000;}
    #relationship {color:#00FF00; }

    回覆回覆
    回覆
  19. ㄚ帕契 說道：
    2008/07/31 at 01:28
    引用來自 全國e網 引用來自 全國e網
    CSS，我正在學習中。

    加油~~

    回覆回覆
    回覆
  20. 全國e網 說道：
    2008/07/29 at 11:31

    CSS，我正在學習中。

    回覆回覆
    回覆
新迴響 »

Leave a Reply

Copyright © 2009 ㄚ帕契的部落格. All rights reserved.
Designed by Theme Junkie. Powered by WordPress.