像素風格噗浪佈景!
複製本體CSS,貼到 自訂佈景
-> 自訂佈景風格
欄位
更新版本時,可以繼續使用自己的 /* 參數設定 */
區塊,但請留意區塊內是否有增加新的變數,並複製到自己的參數設定中。
- 2024-04-17:
新增了不再需要,已移除/* 頂端列參數(僅 Chrome 有效)*/
區塊,如有修改--pixel-size
變數,需一併修改這個區塊的數值。 - 2023-04-16: 新增了
--timeline-avatar-size
變數 - 2023-11-25: 因應Firefox新版的改動更新了區塊語法。 如果想延用之前的設定,需將開頭的
/* 參數設定 */
:is(url({)), html, :is(url(})) {
更改為
/* 參數設定 */
'{:is('{'), html /*}'*/ {
對河道、噗文、頂端列、浮動視窗、主控面板、發噗介面等,都盡可能做了完整的處理
可以依喜歡的風格,自由選擇背景色與邊線色彩
本體 CSS 中的 /* 參數設定 */
區塊提供了數個設定選項,方便調整樣式:
預設為黑色邊線,可以修改 --pixel-color
的數值來指定想要的顏色。例如:
--pixel-color: #009487;
預設為白色,可以修改 --plurk-background-color
的數值來指定想要的底色:
--plurk-background-color: 色碼;
有將底色更改為深色的話,為了避免文字變得不好閱讀,可以配合以下語法,將噗文及黑色暱稱的字色更改為淺色:
/* 噗文字色 */
:is(url({)), .text_holder, :is(url(})) {
color: white;
}
/* 暱稱預設字色 */
:is(url({)), .name, :is(url(})) {
color: #eee;
}
可以修改 --timeline-background-image
來指定背景圖的網址:
--timeline-background-image: url(圖片網址);
可以修改 --timeline-avatar-size
來指定河道上噗文頭像的尺寸。
預設值為 40px
,想恢復為噗浪原始大小的話,可以修改成 20px
:
--timeline-avatar-size: 20px;
可以加入以下語法來做設定:
/* 主控台背景色 */
.segment-content {
background-color: 色碼;
}
如果是使用噗浪的經典佈景的話,可以再加入以下這段,去除主控台外圍的背景:
/* 去除主控台外圍背景 */
#plurk-dashboard {
background: none;
border: none;
}
也可以使用疾患大的噗浪語法產生器來做更詳細的設定。
- NES.css: 像素風語法參考
- 俐方體11號/Cubic 11: 像素風字型
- CSS-Tricks:
conic-gradient
語法