版權所有+保留所有權利_+_+_
© 2010-2018 Created by 如我協力創意工作室 Be Myself Inc.
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用,請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原CSS碼出處),其它使用方式均未授權,還請務必注意,勿侵權喔~--

問/Q:
請問是否可以按照自己的喜好,
將個人資料的部份分成一塊一塊的呢?
我比較喜歡圓角的區塊:)
請問有辦法嗎?

答/A:

噗浪預設的主控台背景:

0原本的主控台長這樣.png

以下列出幾種基本的背景變化方式和所使用的語法,請選擇自己喜好的來試著調整看看 ^ ^

/*-------------------------------/ 1 / 換底色 --------------------------*/

1換底色111.png

div#plurk-dashboard
{
    background:#111;
}

 

/*-------------------------------/ 2 / 放圖片 --------------------------*/

2放圖片980.png

div#plurk-dashboard
{
    background:url(http://圖片網址) center center no-repeat;  /*水平置中對齊 垂直置中對齊 不重複排列*/
}

 

/*-------------------------------/ 3 / 分區顯示 --------------------------*/

3分區顯示111.png

div#plurk-dashboard
{
    background:none;  /*拿掉原本底色*/
    border:0;  /*拿掉框線*/
}

div.dash-segment .segment-content  /*各區*/
{
    background:#111; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
}

 

/*-------------------------------/ 4 / 分區顯示加圓角 --------------------------*/

4分區顯示加圓角.png

div#plurk-dashboard
{
    background:none;  /*拿掉原本底色*/
    border:0;  /*拿掉框線*/
}

div.dash-segment .segment-content  /*各區*/
{
    background:#111; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;

}

 

/*-------------------------------/ 5 / 各資料區塊 --------------------------*/

6各資料區塊圓角.png

div#plurk-dashboard
{
    background:none;  /*拿掉原本底色*/
    border:0;  /*拿掉框線*/
}

#dash-profile,  /*個人基本資料*/
#dash-additional-info,   /*關於我自己描述*/
#dash-stats,  /*統計*/
#dash-friends ,   /*朋友*/
#dash-fans   /*粉絲*/

{
    background:#111; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
}

/*-------------------------------/ 6 / 各資料區塊加圓角 --------------------------*/

5各資料區塊.png

div#plurk-dashboard
{
    background:none;  /*拿掉原本底色*/
    border:0;  /*拿掉框線*/
}

#dash-profile,
#dash-additional-info,
#dash-stats,
#dash-friends ,
#dash-fans
{
    background:#111; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;

}


/*-------------------------------/ 7 / 分區加單資料區塊 --------------------------*/

7各區加單變化.png

div#plurk-dashboard
{
    background:none;  /*拿掉原本底色*/
    border:0;  /*拿掉框線*/
}

div.dash-segment .segment-content  /*各區*/
{
    background:#111; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
}
#dash-additional-info  /*關於我自己描述*/
{
    background:#333; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
}

 

/*-------------------------------/ 8 / 分區加各資料區塊 --------------------------*/

8分區加各區.png

div#plurk-dashboard  /*主控台全區*/
{
    background:none;  /*拿掉原本底色*/
    border:0;  /*拿掉框線*/
}

div.dash-segment .segment-content  /*各區*/

{
    background:#111; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
}
#dash-profile  /*個人基本資料*/
{
    background:#333; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
}
#dash-additional-info   /*關於我自己描述*/
{
    background:#333; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
}
#dash-stats  /*統計*/
{
    background:#666; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
}
#dash-friends   /*朋友*/
{
    background:#39c; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
}
#dash-fans   /*粉絲*/
{
    background:#c00; /*底色*/
    padding:12px;   /*內間距*/
    margin:3px;   /*外邊界*/
    -moz-border-radius:22px;  /*圓角*/
    -khtml-border-radius:22px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:22px;
    -webkit-border-bottom-right-radius:22px;
    -webkit-border-bottom-left-radius:22px;
}

 

八種基本的組合方式,就可以變化出多彩多姿的個人化背景囉~

進一步請參考 常用CSS清單 來調整背景、框線、圓角、文字等各項CSS設定喔 ^W^

顏色的色碼表(#)可以參考 colorschemer 這個網站

 

如果已經有套用現成的佈景主題,想改變它的呈顯方式,請找出相關的項目,再放入想要的設定就可以囉~

創作者介紹
創作者 M6 的頭像
M6

金羽銀華

M6 發表在 痞客邦 留言(17) 人氣()


留言列表 (17)

發表留言
  • 三日月
  • 非常謝謝大大的熱心提供!!
    趁著假日有空要來好好研究調整了。
    感激不盡~~^^
  • ^w^

    M6 於 2010/12/31 18:14 回覆

  • 阿K
  • 你好~這是在IE8跑框的樣子 在左上角~謝謝您~

    http://d.imagehost.org/0673/1_36.jpg

    還有在火狐樣式左上方的個人編輯那行 消音 刪除 的字都變好小 有被切到耶

    GOOGLE字不會變小耶..O A O 謝謝你=D


  • 我想應該是
    /*--------------------------------------------------------------整體外框*/
    .block_cnt .plurk_cnt ...
    這段的設定 ie無法正確解讀的原因?
    請拿掉這段試試看喔

    我用火狐3.6x看,左上方的字11px,不會切到,
    那邊的CSS項目是 #top_bar, #top_bar a /*頁首左邊文字*/
    請調整看看大小或是邊界設定喔 ^^

    M6 於 2011/01/01 21:19 回覆

  • kiki
  • 您好:想請教一下,我的自我介紹欄位,文字已經都設定置中了,我想放入一個youtube的影片,但影片都靠左,看起來很突兀,有沒有語法可以讓放入的影片也是置中呢??謝謝^^
  • 試試看用圖片邊界的語法:
    p#about_me img /*影音圖片*/
    {
    padding-left:60px!important;
    }
    p#about_me img:hover
    {
    border:0 !important;
    }

    60 數值可以視情況調整

    M6 於 2011/04/07 19:29 回覆

  • 情
  • 請問要怎麼讓主控台上的頭貼大小變小呢?
  • /*個人圖像*/
    #profile_pic
    {
    width:80px;
    }

    數值可自行調整。

    M6 於 2011/08/04 12:43 回覆

  • 婇蝶
  • 版主你好~
    我自己本身喜歡設計自己的噗浪
    版主的文章真的讓我學到好多~

    我想請問一下
    我想把我的個人圖片從方形改成圓形的
    不知道語法要怎麼寫呢?
  • #profile_pic
    {
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    }

    用火狐或是Google瀏覽器較新的版本就可看到圓角。ie則不支援。

    M6 於 2011/08/20 09:17 回覆

  • 婇蝶
  • 了解了...感激不盡^^
  • 悄悄話
  • girl89098
  • 您好~
    我覺得我的問題是...我找不到主控台的語法在哪裡?
  • 如果原本語法中沒有找到文章裡面的項目的話,就需要自己複製語法然後貼到自訂佈景欄位做修改囉~

    M6 於 2011/11/27 10:39 回覆

  • 神無月 桐
  • 妳好我是之前那個桐 我又有一點問題了哈哈><
    就是那個人資訊大頭貼的框線顏色要怎麼改呢?
    就是你上文那個白線的地方
    謝謝!!
  • #profile_pic {border-color:# !important;}
    填入想使用的色碼即可。

    M6 於 2012/01/08 10:32 回覆

  • qccxy
  • 您好~
    請問有辦法將個人資料.統計.朋友.粉絲這四欄的高度往下調整嗎?
    謝謝
  • 可以用上邊界的語法(margin-top)來調整,
    例如 margin-top:30px; 就會往下移動30px。

    M6 於 2012/04/21 09:59 回覆

  • 暮陽
  • 您好,參照使用了第7項,並搭配隱藏物件+滑鼠移過去會顯示的語法設計了主控台。想請教有辦法將個人資料區與另外三項(卡馬、朋友、粉絲)分開設定透明度嗎?
    希望能保留個人資料約50%透明度(移過去變不透明),然後另外三項是完全透明,移過去才顯示^^"
    謝謝您!
  • 那就把 #dash-profile 再另外加上透明度50%的語法。

    M6 於 2012/05/15 07:46 回覆

  • moe 御萌君
  • 你好
    請問在主控台中 自我介紹一欄內
    貼圖片時,有辦法控制圖片顯示的大小嗎?
    感謝您
  • 試試看這個語法:
    p#about_me img { max-width: 80px !important; max-height: 60px !important; }

    寬與長的數值可以自行調整。

    M6 於 2012/07/12 19:58 回覆

  • Beyond Thompson
  • 你好 不好意思想請問要如何將這個人資料+卡碼+粉絲+好友的黑色背景去掉
    讓它變透明能看的道背景圖呢><?
    非常感謝您!
    http://i.imgur.com/96Xzopy.png
  • div.dash-segment .segment-content { background: none !important; border: 0 !important; }
    將這行語法放在所有語法之前或最後試試看。

    M6 於 2014/09/12 06:54 回覆

  • Beyond Thompson
  • 可以了!非常感謝您!