{ plurk css } 主控台的形式

主控台是噗浪中顯示個人資訊的地方,分為自介、發噗、統計、朋友、粉絲幾個區塊,原本噗浪預設的主控台形式如圖:

原本的主控台

如果我們有使用自己的背景圖的話,會被遮擋住大部分,這時就需要用語法來將背景做些改變:


去除預設背景.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

你可能感兴趣的:({ plurk css } 主控台的形式)