主控台是噗浪中顯示個人資訊的地方，分為自介、發噗、統計、朋友、粉絲幾個區塊，原本噗浪預設的主控台形式如圖：
原本的主控台
如果我們有使用自己的背景圖的話，會被遮擋住大部分，這時就需要用語法來將背景做些改變：
去除預設背景.jpg
拿掉黑色背景的語法：
/*去除預設背景*/
div.segment-content
{
background: none !important;
border-radius: 0px !important;
border: 0 !important;
}
div#plurk-dashboard
{
background: none !important;
border-radius: 0px !important;
border: 0 !important;
}
/*去除統計、朋友、粉絲標題*/
div.segment-content h2
{
background: none !important;
border-radius: 0px !important;
display: none !important;
}
也一併將標題隱藏了起來。
再來，將原本密集且不統一的字型，以及行距、字距等做些調整：
調整字型與連結.jpg
語法：
/*主控台字型*/
div#plurk-dashboard,
p#about_me
{
font-family: 微軟正黑體 !important;
font-weight: normal !important;
font-size: 12px !important;
line-height: 2em !important;
letter-spacing: 0.14em !important;
color: #ddd !important;
}
/*姓名*/
div#full_name
{
font-size: 13px !important;
color: #fff !important;
}
/*主控台的連結*/
div#plurk-dashboard a,
p#about_me a
{
color: #fff !important;
text-decoration: none !important;
border: 0 !important;
}
/*滑鼠移至的連結*/
div#plurk-dashboard a:hover,
p#about_me a:hover
{
color: #ddd !important;
text-decoration: none !important;
border-bottom: 0 !important;
}
/*卡馬*/
#karma
{
font-family: 微軟正黑體 !important;
font-weight: normal !important;
font-size: 18px !important;
color: #fff !important;
text-shadow: rgba(211,120,16,0.6) 0 0 6px;
}
.karma_hover
{
font-family: 微軟正黑體 !important;
font-weight: normal !important;
font-size: 18px !important;
color: #ccc !important;
}
/*統計*/
#dash-stats table th, /*項目*/
#dash-stats table td /*數值*/
{
font-size: 11px !important;
color: #ccc !important;
}
字型做了調整，圖形也可以相應做適當變化：
調整圖片與按鈕.jpg
噗主的頭貼，朋友、粉絲的代表圖，以及加入朋友與關注等按鈕，語法設置如下：
/*大頭貼*/
.dash-segment img.profile-pic
{
width: 100px !important;
height: 100px !important;
border: 2px solid #ddd !important;
border-radius: 60px !important;
}
/*朋友粉絲圖*/
.friend_holder .user_link,
.friend_holder img
{
width: 25px !important;
height: 25px !important;
border: 0 !important;
border-radius: 60px !important;
}
/*朋友粉絲按鈕*/
a.friend_man
{
background: rgba(255,255,255,0.3) !important;
border: 0 !important;
border-radius: 24px !important;
font-size: 12px !important;
color: #fff !important;
transition: background 0.6s ease;
}
a.friend_man:hover
{
background: rgba(255,255,255,0.1) !important;
border: 0 !important;
border-radius: 24px !important;
text-decoration: none !important;
color: #ddd !important;
transition: background 0.6s ease;
}
上圖是登入前看見的自己的噗浪畫面，沒做變化前，加入朋友與粉絲等按鈕原本的樣子：
未調整前的按鈕.jpg
所以做了顏色上更調和的語法設計，版面會更清爽。
原本的發噗區.jpg
登入後，會出現的發噗區，這裡的圖示也可以調整，像是選擇表情符號、上傳資料以及發噗按鈕。
原本的各個五顏六色和大大的 Plurk 橘色發噗鈕。可以改成：
改造後的發噗區.jpg
單色系的感受。語法：
/*各圖示*/
.pif-emoticon.cmp_emoticon_off, /*表情符號*/
.pif-media.cmp_media_off, /*分享資訊*/
.pif-sync.cmp_sync_off, /*同步更新*/
.pif-anynomous.cmp_anynomous_off, /*偷偷說*/
.pif-privacy.cmp_privacy_off /*私人訊息及隱私選項*/
{
font-size: 1.1em !important;
color: #bbb !important;
width: 20px !important;
opacity: 0.6 !important;
zoom: 1;
transition: opacity 0.3s ease;
}
/*各圖示滑鼠移至效果*/
.pif-emoticon.cmp_emoticon_on,
.pif-media.cmp_media_on,
.pif-sync.cmp_sync_on,
.pif-anynomous.cmp_anynomous_on,
.pif-privacy.cmp_privacy_on
{
font-size: 1.1em !important;
color: #ddd !important;
width: 20px !important;
opacity: 1 !important;
zoom: 1;
transition: opacity 0.3s ease;
}
/*浪上的噗內發噗區小圖示*/
.cmp_emoticon_mini_off.pif-emoticon,
.pif-media.cmp_media_mini_off
{
color: #666 !important;
font-size: 0.98em !important;
opacity: 0.6 !important;
zoom: 1;
transition: opacity 0.3s ease;
}
.cmp_emoticon_mini_on.pif-emoticon,
.pif-media.cmp_media_mini_on
{
color: #333 !important;
font-size: 0.98em !important;
opacity: 1 !important;
zoom: 1;
transition: opacity 0.3s ease;
}
/*去除表符圖示背景*/
.pif-emoticon.cmp_emoticon_off::before,
.pif-emoticon.cmp_emoticon_off::after,
.pif-emoticon.cmp_emoticon_on::before,
.pif-emoticon.cmp_emoticon_on::after,
.cmp_emoticon_mini_off.pif-emoticon::after,
.cmp_emoticon_mini_on.pif-emoticon::after
{ background: none !important; }
/*plurk按鈕*/
.submit_img
{
background: rgba(0,0,0,0.4) !important;
border-radius: 25px !important;
color:#fff !important;
font-size: 1.4em !important;
text-shadow: 0px 0px 3px rgba(255,255,255,0.4) !important;
transition: background 0.6s ease;
}
.submit_img:hover
{
background: rgba(0,0,0,0.7) !important;
transition: background 0.6s ease;
}
/*下拉箭頭*/
.pif-dropdown::before { transform: scale(0.4); }
這裏一併調整了浪上的噗回應列表下方的按鈕。位置在：
浪上的表符按鈕.jpg
然後寫寫噗浪訊息的欄位，未改造前會是像這樣：
輸入區.jpg
字有點比例過大，顏色可能會與我們的背景圖衝突，也可以用語法來改變：
改過的輸入區.jpg
放上這段語法：
/*發噗區*/
div.input_holder, #input_big
{
background: none !important;
border: 0 !important;
}
textarea#input_big_private, textarea#input_big,
textarea #input_big .content, textarea#input_permalink,
input#current_query
{
background: rgba(255,255,255,0) !important;
border: 0 !important;
min-height: 50px;
line-height: 24px;
color: #fff !important;
font-size: 16px !important;
border-radius: 5px !important;
padding: 4px 2px 3px 2px !important;
box-shadow: 0pt 0px 0pt rgba(0,0,0,0.02), 0pt 0px 0px rgba(0,0,0,0.01) inset;
transition: background 0.6s ease;
}
textarea:hover, textarea#input_big_private:hover, textarea#input_big:hover, textarea#input_permalink:hover, input#current_query:hover
{
background: rgba(255,255,255,0.5) !important;
box-shadow: 0pt -1px 0pt rgba(0,0,0,0.02), 0pt 1px 2px rgba(0,0,0,0.01) inset;
color: #000 !important;
transition: background 0.6s ease;
}
textarea:focus, textarea#input_big_private:focus, textarea#input_big:focus,textarea#input_permalink:focus,
input#current_query:focus
{
background: rgba(255,255,255,0.7) !important;
box-shadow: 0pt 1px 2px rgba(0,0,0,0.03) inset, 0pt 1px 0pt rgba(255,255,255,0.02);
color: #000 !important;
transition: background 0.6s ease;
}
這裡有三段變化，滑鼠移至該處（hover）、滑鼠點開（focus），以及未移至時。未移至時如上圖。
滑鼠移至的輸入區.jpg
這是滑鼠移至時。
打開後的輸入區.jpg
這是點開。底色透明度降低，看得更清楚。
目前改造後的主控台顯示如下：
目前改造後的頁面.jpg
已較原先噗浪預設畫面清爽且整體統一感好多了。我們想要更完整呈現背景圖的話，可以把主控台隱藏起來。
像這樣：
隱藏主控台.jpg
使用的語法：
/*主控台整體隱藏*/
div#plurk-dashboard
{
opacity: 1 !important;
zoom: 1;
transition: opacity 0.6s ease;
}
div#plurk-dashboard:hover
{
opacity: 1 !important;
zoom: 1;
transition: opacity 0.6s ease;
}
滑鼠移至整個主控台才會呈現。
也可以選擇分區呈現，移至各區的效果像是：
分區隱藏.jpg
僅呈現個人資訊。
各區滑鼠移至才呈現.jpg
僅呈現發噗區。
各區滑鼠移至才呈現.jpg
僅呈現統計資料。
使用各區隱藏的語法，取代上方的主控台整體隱藏的語法：
/*主控台分區隱藏*/
div.dash-segment.dash-segment-profile, /*自介區*/
div.dash-segment.dash-segment-stats, /*統計區*/
div.dash-segment.dash-segment-friends, /*朋友區*/
div.dash-segment.friendsList.dash-segment-fans, /*粉絲區*/
div.plurkForm /*發噗區*/
{
opacity: 0 !important;
zoom: 1;
transition: opacity 0.6s ease;
}
div.dash-segment.dash-segment-profile:hover,
div.dash-segment.dash-segment-stats:hover,
div.dash-segment.dash-segment-friends:hover,
div.dash-segment.friendsList.dash-segment-fans:hover,
div.plurkForm:hover
{
opacity: 1 !important;
zoom: 1;
transition: opacity 0.6s ease;
}
隱藏起主控台的設計讓背景圖呈現的面積擴展許多：
完整隱藏的頁面.jpg
也可以進一步將浪上的噗一起隱藏起來，就會像是桌布畫面：
浪上的噗也隱藏.jpg
滑鼠移過去才出現：
移過去再出現.jpg
加上這段語法：
/*浪上的噗也隱藏*/
#timeline_holder
{
opacity: 0 !important;
zoom: 1;
transition: opacity 0.6s ease;
}
#timeline_holder:hover
{
opacity: 1 !important;
zoom: 1;
transition: opacity 0.6s ease;
}
然後整體頁面會像是這樣：
整體畫面.jpg
幾乎完整呈現了我們要的背景（除了噗浪預設不行更動的頁首橫條外）。
需要使用噗或看噗的時候再把滑鼠移過去就好了。
主控台的形式變化有許多玩法，之前試過把這區塊移至左側、右側或上方、下方的方式，動態效果也試過許多，多多嘗試，你也會發現最適合自己的玩法和形式，組裝設計成自己的主控台樣貌。
接下來我就要把心中新的玩法，變現出來，新樣式，新噗版，設計好後會發在 D+，喜歡的話記得去下載喔！
每個新噗版的出現也會發在噗浪和噗浪版型研究社通知大家，有什麼想要問的，想用語法實現的樣子，都可以跟我說，除了自己動手玩噗，有需要的話可以去D+數位生活品項裡訂製噗版，我會排時間幫你把它做出來～
D+數位生活，客製噗版：http://bit.ly/2IuOU5I
常玩噗，常逛D+，祝大家生活充實、愉快～
_
原文刊載自：金羽銀華-Blog
同步刊登於：金羽銀華-Medium
