噗浪的自訂佈景功能，有基本的預設選項組合，也可以上傳自己的背景圖使用，我們如果只是要使用喜歡的圖片當背景，現在的噗浪已經能滿足此要求。除此之外，我們也可用CSS語法來替換上想要使用的背景，並修飾一些小地方，讓整體噗版看起來更清爽乾淨，也能使背景圖片更突顯。
選擇預設值黑色底的背景來做演示：
原先的佈景_畫面背景_黑.png
在自訂佈景的下拉選單裡有基本不同顏色的預設噗版可以選擇：
佈景選項.png
點選「上傳您的背景圖片」即可使用自訂的圖片當背景，背景圖會是固定、而主控台會隨著捲軸上下移動，所以若用網頁截圖功能可能會顯示如下：
用上傳背景圖.png
如果想要整體佈景畫面能固定住，並且去掉一些元素，讓噗版看起來更清爽，我們可以使用CSS來達成：
簡單清爽乾淨的背景.png
整理過的版面會如上圖。接下來就一步步來說明使用的語法。
首先，在「自訂佈景風格」的欄位裡面，放上以下這段語法，更換上自己想要使用的圖片當背景：
/*----------畫面佈景----------*/
/*去除預設背景*/
._lc_, ._lch_, div.bar-color,
footer.clearfix,
#footer
{
background: none !important;
border: 0 !important;
}
html
{
background: #222 url( 這裡放要使用的圖片網址，注意要使用圖片的直接連結網址喔！) center top repeat !important;
background-size: cover !important; /*自動符合瀏覽器大小*/
}
放上語法後記得按「儲存並更新」按鈕，就可看見噗版的變化。
用語法放背景.jpg
上圖是再次用網頁截圖功能截下的畫面。
用捲軸上下移動，整體背景是整個固定住的。
然後再放上隱藏語法，將噗版裡部分不需要的元素隱藏起來：
/*----------隱藏項目----------*/
#dynamic_logo, #logo img, img#creature, /*噗浪生物*/
#div_loading, .loading, .loading_div, /*噗浪loading圖*/
div#empty_timeline_fg img, div#empty_timeline_bg img, /*設為私密狀態時的噗浪肉骨獸*/
div#footer, /*頁尾*/
#getting_started, .login_to_see a,
.red_link, .login_to_see, #reply #not_logged_in,
#validate_email, #sign_up_small, #registerToday,
div.feed-link, div.help, #fan_holder.friend_holder span, /*登入註冊噗浪說明相關*/
.nick_name, /*@暱稱*/
#span_years, /*年齡*/
#m_or_f, /*性別*/
#relationship_container, /*感情狀態*/
#karma_arrow, .link_arrow, .cmp_points-arrow,
.cmp_karma_up, .cmp_karma_down,
a.link_arrow, a.link_arrow link_badges, /*卡馬小箭頭*/
div.show_mutual_friends, .show_all_friends, /*列出朋友、共同朋友、粉絲*/
#dash-award, /*小徽章*/
.snowflake, /*雪花*/
#plurk_ads, div.adsense, #cbox_ads, #sliderAds,
div#resp_banner_ads, div#resp_banner_ads.show,
section.adsense, .sliderAds, section.adsense h3 /*廣告*/
{ display : none !important; transform: scale(0); }
#plurk_ads a { overflow: hidden;_overflow: none; }
這段語法裡的項目可以根據個人喜好選擇哪些要隱藏、哪些要保留。
放上語法後同樣按儲存並更新，可以看見畫面更清爽些了：
加上隱藏項目語法.png
再來調整一些時間軸上的細節，像是日期時間的標示，以及所有訊息選單列，並更換過於龐大的往前往後箭頭圖示，換成自己想用的圖片：
/*----------時間軸----------*/
div#timeline-holder, /*時間軸背景*/
div.timeline-holder, /*時間軸背景*/
div#bottom_line /*時間軸底線*/
{
background: none !important;
border: 0 !important;
}
/*時間*/
.bottom_start
{
top: 0px !important; /*移至上方*/
background: none !important;
border: 0 !important;
color: #002233 !important;
font-size: 0px !important;
}
/*日期*/
.day_start
{
color:#bbb !important;
}
/*每則噗的對應時間*/
#time_show
{
background: rgba(0,0,0,0.5) !important;
border: 0 !important;
padding: 2px 12px !important;
border-radius: 12px !important;
}
#time_show span
{
color: rgba(255,255,255,0.7) !important;
font-size: 10px !important;
font-weight: 400 !important;
}
/*沒有未讀訊息、顯示所有訊息*/
#empty_timeline_fg, #empty_timeline_bg
{
color: rgba(255,255,255,0.8) !important;
font-size: 15px !important;
text-shadow: 0px 0px 0px rgba(0,0,0,0.3);
}
#empty_timeline_fg a, #empty_timeline_bg a
{
color: rgba(255,255,255,0.7) !important;
}
#empty_timeline_fg a:hover, #empty_timeline_bg a:hover
{
color: rgba(255,255,255,1) !important;
}
#empty_timeline_bg { display : none !important; }
/*----------訊息選單列----------*/
a#all_plurks.filter_selected.bottom_line_bg, /*所有訊息*/
a#own_plurks_tab_btn.off_tab, /*我發表的訊息*/
a#private_plurks_tab_btn.off_tab, /*私人訊息*/
a#responded_plurks_tab_btn.off_tab, /*回應過的訊息*/
a#replurked_plurks_tab_btn, /*轉噗的訊息*/
a#favorite_plurks_tab_btn.off_tab, /*喜歡的訊息*/
#filter_tab a.off_tab, /*未選*/
#filter_tab a.filter_selected /*正選*/
{
background: none !important;
color: rgba(255,255,255,0.5) !important;
font-size: 12px !important;
float : left !important;
}
div#updater a, /*檢視未讀訊息*/
a#noti_re_text,
a#mark_all_link,
a#view_all_plurk
{
background: none !important;
color: rgba(255,255,255,0.5) !important;
font-size: 12px !important;
}
#updater a:hover, #updater a:hover span
{
text-decoration: none !important;
border-bottom: 0 !important;
}
.unread_generic /*未讀噗的數目*/
{
background: rgba(0,0,0,0.5) !important;
border: 0 !important;
color: rgba(255,255,255,0.5) !important;
font-weight: 400 !important;
font-size: 12px !important;
border-radius: 15px !important;
}
/*滑鼠移至效果*/
#filter_tab a.off_tab:hover,
#filter_tab a.filter_selected:hover,
#updater a:hover
{
background: rgba(0,0,0,0.5) !important;
color: rgba(255,255,255,1) !important;
text-decoration: none !important;
border-radius: 15px !important;
}
/*訊息選單前的小圖示*/
i.pif-messages, i.pif-message-my, i.pif-message-private, i.pif-message, i.pif-replurk, i.pif-like
{ opacity: 0 !important; display : none !important; transform: scale(0); }
/*檢視未讀訊息選單前的小圖示*/
i.pif-message-new, i.pif-check, i.pif-cancel
{ opacity: 0 !important; display : none !important; transform: scale(0); }
/*----------河道瀏覽前後箭頭----------*/
/*更換往前往後按鈕*/
.cmp_arrow_right
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/gray_dark/arrow_right_alt1_32x32.png);
width:32px; height:32px;
}
.cmp_arrow_left
{
background: url(http://i614.photobucket.com/albums/tt230/m66660000/_ic/gray_dark/arrow_left_alt1_32x32.png);
width:32px; height:32px;
}
/*透明度變化*/
.cmp_arrow_right,
.cmp_arrow_left,
.cmp_back_to_today
{
opacity: 0.1; zoom:1;
transition: opacity 1.5s ease;
}
.cmp_arrow_right:hover,
.cmp_arrow_left:hover,
.cmp_back_to_today:hover
{
opacity: 0.9; zoom:1;
transition: opacity 1.5s ease;
}
.browse_button .cmp_arrow_right:before,
.browse_button .cmp_arrow_left:before,
.browse_button .cmp_back_to_today:before
{ opacity: 0 !important; }
div.cmp_back_to_today.pif-arrow-left, /*左方回到最前*/
div.cmp_back_to_today.pif-arrow-right /*右方回到最前*/
{
font-size: 10px !important;
color:#777 !important;
background: none !important;
margin-left: -10px !important;
}
div.cmp_back_to_today.pif-arrow-left::before,
div.cmp_back_to_today.pif-arrow-right::before
{
font-size: 10px !important;
color: #777 !important;
}
同樣的，記得按儲存並更新喔！
語法中「沒有未讀訊息，顯示所有訊息」指的是這個部分：
沒有任何未讀訊息原始.jpg
上圖是原先的樣貌，下圖是使用該部分語法後的樣貌：
沒有任何未讀訊息更正.jpg
再配上所有訊息選單列的語法，讓畫面更協調：
所有訊息選單列.jpg
在日期與時間的顯示選擇上，可以有幾種調整方式，語法中是將字的大小設定為“0”，將之隱藏起來，因為滑鼠移至每則噗後下方還是會有顯示該則噗的日期時間，所以可以選擇把時間軸線上的日期時間隱藏起來，如果希望顯現的話，調整字型大小這行，font-size: 9px !important; 設定數值，就會出現了。
日期與時間標示.jpg
為了不讓背景圖中央因為時間軸上的日期時間而隔斷，所以我語法設定讓它移至上方，如果希望放在原先的位置，則只要刪去 top: 0px !important; /移至上方/ 這行語法即可。
滑鼠移過去每則噗，會出現的時間標示：
每則噗的對應時間.jpg
使用本文以上幾段語法後，可以整理出較為簡單清爽的背景：
簡單清爽乾淨的背景.png
接下來，會另外發文說明「浪上的噗」以及「主控台」各個項目的背景與細節呈現。
想要更進階掌握玩噗版CSS的方式，調整噗版使之更符合自己的使用需求，可以再參考之後的幾篇文喔～
_
原文刊載自：金羽銀華-Blog
同步刊登於：金羽銀華-Medium
网友评论