組成噗浪使用者介面的主要三個元素叫做「畫面背景」、「時間軸」、「主控台」,這三個部分是使用者能夠發揮想像力和創意自行編寫組成的不同模式。頁首則是固定的目前無法用自訂佈景改變。
如下圖,橘色框是頁首和頁尾,綠色框是畫面背景,紅色框是時間軸,藍色框是主控台。
如果只是想將各區塊改成自己喜歡的顏色,或是換成想使用的背景圖,而不僅是選用噗浪預設的組合,可以試著簡單地用自訂語法做到。
在「自訂佈景風格」的欄位裡編寫填入欲使用的語法,按儲存並更新就可以看見效果了。
像是將整體背景換成純白色,可以寫入如下的語法:
body {background: #FFF !important;}
這行語法裡面,body代表畫面背景項目名稱,{}裡面就是該項目的CSS內容,background: 指的是背景,#FFF是白色的顏色代碼,!important; 則是加強指定引用這個優先設定,藉以覆蓋原本噗浪預設使用的語法。
放上這行語法並儲存更新後,整體畫面背景就會呈顯白色:
如果將顏色代碼換成純黑色,黑色的色碼為#000,將語法中的#FFF換成#000,就會變成黑色為背景底色:
要明亮背景或暗色背景,就可透過自訂語法來做決定。
如果要改時間軸或是主控台的底色,只要將畫面背景的項目名稱 body 換成表示時間軸的div.timeline-holder,或表示主控台的div.segment-content,就可以看見不同呈現效果了。
那如果想放背景圖片呢?整體畫面背景放入自訂圖片網址的語法可以這麼寫:
body {background: url(https://i.imgur.com/GaH3sC1.png) repeat !important;}
url就是網址的意思,把要使用的圖片連結貼入()中即可呈現。目前放的為範例背景圖的網址,代換成實際想使用的圖片直接連結網址即可。範例背景圖語法儲存更新後會呈現如下:
這樣又是不一樣的感覺。
透過組合畫面背景body、時間軸div.timeline-holder及主控台div.segment-content三個部分不同的語法元素,可以創造出自己獨一無二的噗版模樣,只改變三部分的背景顏色或圖片就可發揮各種好玩的組件模式。把三個部份的背景語法一起寫出來,放上色碼或圖片玩玩看吧!
body {background: url(https://i.imgur.com/GaH3sC1.png) repeat !important;}
div.timeline-holder {background: #000 !important;}
div.segment-content {background: #FFF !important;}
這樣的一段語法,儲存更新後會呈現如下:
簡單即能打造出自己看得順眼用得順心的噗版樣式,換背景圖片或顏色就能改變使用噗浪的心情。
提供一個網頁圖片色碼查詢的小工具:https://www.degraeve.com/color-palette/
看見配色不錯的圖片,想使用圖片裡面的顏色來配置自己的噗版,可以參考。