噗浪的自訂佈景功能,有基本的預設選項組合,也可以上傳自己的背景圖使用,我們如果只是要使用喜歡的圖片當背景,現在的噗浪已經能滿足此要求。除此之外,我們也可用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; /*自動符合瀏覽器大小*/
}

放上語法後記得按「儲存並更新」按鈕,就可看見噗版的變化。

用語法放背景.png

上圖是再次用網頁截圖功能截下的畫面。

用捲軸上下移動,整體背景是整個固定住的。

然後再放上隱藏語法,將噗版裡部分不需要的元素隱藏起來:

/*----------隱藏項目----------*/
#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;

}

同樣的,記得按儲存並更新喔!

語法中「沒有未讀訊息,顯示所有訊息」指的是這個部分:

沒有任何未讀訊息原始.png

上圖是原先的樣貌,下圖是使用該部分語法後的樣貌:

沒有任何未讀訊息更正.png

再配上所有訊息選單列的語法,讓畫面更協調:

所有訊息選單列.png

在日期與時間的顯示選擇上,可以有幾種調整方式,語法中是將字的大小設定為“0”,將之隱藏起來,因為滑鼠移至每則噗後下方還是會有顯示該則噗的日期時間,所以可以選擇把時間軸線上的日期時間隱藏起來,如果希望顯現的話,調整字型大小這行,font-size: 9px !important; 設定數值,就會出現了。

日期與時間標示.png

為了不讓背景圖中央因為時間軸上的日期時間而隔斷,所以我語法設定讓它移至上方,如果希望放在原先的位置,則只要刪去 top: 0px !important;  /*移至上方*/ 這行語法即可。

滑鼠移過去每則噗,會出現的時間標示:

每則噗的對應時間.png

使用本文以上幾段語法後,可以整理出較為簡單清爽的背景:

簡單清爽乾淨的背景.png

接下來,會另外發文說明「浪上的噗」以及「主控台」各個項目的背景與細節呈現。

想要更進階掌握玩噗版CSS的方式,調整噗版使之更符合自己的使用需求,可以再參考之後的幾篇文喔~

 

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