金羽銀華

剛開始接觸噗浪版型，將入門的時候，何處下手比較好呢？要能發展出自己的噗版風格與編寫方式，
首先，簡單的基礎結構，一些些的變化，就能擁有一個獨特的自訂外觀

選好自己想要放的背景圖後，瞭解噗浪的基本結構，就能在基礎的變化當中，找到自己的型和樂趣～

以下列出基本的預設項目，只要掌握這幾處，同一個背景圖就可以變化出各式組合樣貌喔～

/*基礎項目-- plurk CSS*/
/*Organize by Be Myself Inc. M6*/

/*
    在表頭寫上噗版名稱、編寫者，
    背景圖來源與設計原始碼引用出處，
    養成尊重智財權與著作權的好習慣。
    （每個創作者授權的範圍不同，請務必注意並遵守喔）
*/

/*------------------------------------------------------*/

/*
    畫面佈景：全頁面背景圖
*/

body, html
{
    background:# url(http://) center top no-repeat;    /*1280x1024以上*/
    background-attachment:fixed ;   /*浮水印固定背景*/
}

/*
    時間軸主題：河道上的背景圖
*/

#timeline_holder
{
    background:none;  /*寬1280 高365-400*/
    border-top:0px solid #ccc !important;
    border-bottom:0px solid #ccc !important;
}

/*
    隱藏 噗浪生物
*/

#dynamic_logo ,#logo img {filter:alpha(opacity=0); opacity: 0;zoom:1;}
img#creature {filter:alpha(opacity=0); opacity: 0;zoom:1;}

/*
    時間顯示
*/

#timeline_bg .day_bg .div_inner,   /*底*/
#bottom_line,#time_show
{
    background:none;
    border:0 !important;
}

.day_start .bottom_start, .day_start .div_start,   /*字*/
#timeline_bg .bottom_start , .bottom_end,
#time_show span
{
    color:#FFF !important;
    font-size: 10px !important;
}

/*
    主控台主題
*/

div#dashboard_holder   /*發噗區+資訊區*/
{
    background:none;
}

div#plurk-dashboard   /*資訊區全區底圖*/
{
    background:#eee;
    border:0 !important;
    filter:alpha(opacity=88) !important;opacity:0.88 !important;zoom:1;    /*透明度*/
    -moz-border-radius: 10px;    /*圓角*/
    -khtml-border-radius: 10;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
}

div.dash-segment .segment-content     /*資訊區各區底圖*/
{
    background:#eee;
    border:0 !important;
    min-height:321px; /*221*/
    height:366px;  /*設定固定高度*/
    overflow:auto;  /*溢出高度的內容自動顯示捲軸*/
    width:px !important; /*210-225*/
    padding:15px 10px 5px;
    margin:5px;
}

#pane_plurk,   /*Plurk-搜尋區塊*/
#pane_search
{
    background:none;
    border:0 !important;
}

#toggle_tab li.tt_selected  /*正選*/
{
    background:none !important;
    border:0 !important;
    color:#444 !important;
}

/*
    輸入欄位
*/

textarea#input_big_private,  /*發送私密噗視窗*/
textarea#input_big_private.content,  
textarea#input_big,
textarea#input_permalink,
textarea#input_big.content
{
    background:none !important;
    border:0 !important;
    color:#111 !important;
    height:100px;  /*增加輸入欄位高度*/
}

在「編輯」> 「個人設定」的「自訂外觀」裡面，「進一步運用 CSS 來自訂您的個人頁面」欄位中，

以上面的原始碼來分段練習，仔細看各部份的變化，藉此瞭解各CSS項目影響的內容，就是很好接觸噗版設計的開始。

（如果原先有套用其它樣式，記得先按欄位右下方「清除樣式」的紅字，將內容清空再開始喔～^^）

「設計一二三START」

1- 原本的預設樣式

2- 放上全頁面背景圖

3- 拿掉時間軸背景圖與噗浪生物

4- 拿掉時間底線

4-1 或用透明度呈現時間軸

5- 設主控台全區底色、圓角及透明度

6- 設主控台各資訊分區底色、高度、圓角與透明度

7- 原本的發噗輸入區樣貌

7-1 去掉背景與框線的發噗區

7-2 輸入欄位去除背景

7-3 加上透明度與圓角的輸入區

經過以上幾個步驟，一步一步更改、檢視改變後的狀況，就能透過實際的操作演練，初步熟悉噗版的CSS設計。

最後的成品是「範例一」，CSS碼內容如下：

/*
    噗版名稱：範例一
    編寫者：66660000
    背景圖來源：photo by 66660000
    原始碼出處：Be Myself Inc. M6
*/

/*------------------------------------------------------*/

/*
    畫面佈景：全頁面背景圖 橘色放背景圖網址
*/

body, html
{
    background:#DDD url(http://farm5.static.flickr.com/4130/5013678373_7efa5dcfe6_o.jpg) center top no-repeat;
    background-attachment:fixed ;   /*浮水印固定背景*/
}

/*
    時間軸主題：河道上的背景圖 要放全頁面圖請記得此處背景設none
*/

#timeline_holder
{
    background:none;
    border-top:0px solid #ccc !important;  /*值設0就能去除框線*/
    border-bottom:0px solid #ccc !important;
}

/*
    隱藏 噗浪生物
*/

#dynamic_logo ,#logo img {filter:alpha(opacity=0); opacity: 0;zoom:1;}
img#creature {filter:alpha(opacity=0); opacity: 0;zoom:1;}


/*
    時間顯示
*/

#timeline_bg .day_bg .div_inner,   /*底*/
#bottom_line,#time_show
{
    background:none;  /*去背景*/
    border:0 !important;  /*去框線*/
}

.day_start .bottom_start, .day_start .div_start,   /*字*/
#timeline_bg .bottom_start , .bottom_end,
#time_show span
{
    color:#FFF !important;  /*字顏色*/
    font-size: 10px !important;  /*字大小*/
}

/*
    主控台主題
*/

div#dashboard_holder   /*發噗區+資訊區*/
{
    background:none;
}

div#plurk-dashboard   /*資訊區全區底圖*/
{
    background:none;      /*要以分區背景呈現則此處請設none*/
    border:0 !important;
}

div.dash-segment .segment-content     /*資訊區各區底圖*/
{
    background:#eee;      /*底色*/
    border:0 !important;
    min-height:321px; /*221*/
    height:366px;  /*設定固定高度*/
    overflow:auto;  /*溢出高度的內容自動顯示捲軸*/
    width:px !important; /*210-225*/
    padding:15px 10px 5px;
    margin:5px;
    filter:alpha(opacity=88) !important;opacity:0.88 !important;zoom:1;    /*透明度*/
    -moz-border-radius: 10px;    /*圓角*/
    -khtml-border-radius: 10;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
}

#pane_plurk,   /*Plurk-搜尋區塊*/
#pane_search
{
    background:none;
    border:0 !important;
}

#toggle_tab li.tt_selected  /*正選*/
{
    background:none !important;
    border:0 !important;
    color:#444 !important;
}

/*
    輸入欄位
*/

textarea#input_big_private,  /*發送私密噗視窗*/
textarea#input_big_private.content,  
textarea#input_big,
textarea#input_permalink,
textarea#input_big.content
{
    background:#FFF !important;
    color:#111 !important;
    height:100px; /*增加輸入欄位高度*/
    filter:alpha(opacity=70) !important;opacity:0.7 !important;zoom:1;    /*透明度*/
    -moz-border-radius: 10px;    /*圓角*/
    -khtml-border-radius: 10;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
}

來操作看看吧～ 對照更改前後的CSS碼有什麼不同，然後，試著改變其中的值，進一步練習改成自己想要的樣子囉～