[分享]我的噗浪(Plurk)的CSS自訂佈景主題設定

最近重新花了點時間好好整理我的噗浪佈景主題的 CSS 碼
之前只是複製了別人的東西然後改了一行背景就沒管了
沒想到因此少了很多東西(被隱藏) =w=a

先來簡單說明一下 CSS 設定的原理與語法：
首先, " /* " ... " */ " 表示註解
舉例來說： /* 這邊的東西會被忽略 */

.class_name - 用 " . " 表示類別名稱(CLASS)

#id_name - 用 " # " 表示自定名稱(ID)

{} - 用 " { " " } " 來框住整組的設定值

elem_name: elem_value; - 表示 [元素屬性]: [設定值];
" : " 用來分隔屬性與設定值, " ; " 表示宣告的結尾

就拿大張的 Loading 圖來改好了，以下是修改語法：



/* 大張 Loading... 圖 */
.cmp_loading {
background-image: url(你的圖片網址) !important; /*圖片*/
width: 400px;
height: 300px;
background-repeat: no-repeat;
background-position: 0px 0px;
}

稍微變色一下：

.cmp_loading {
background-image: url(你的圖片網址) !important; /* 圖片 */
width: 400px;
height: 300px;
background-repeat: no-repeat;
background-position: 0px 0px;
}

這樣看起來有沒有更清楚一些呢？:)
後方的 !important 註記，表示這是重要的屬性
其他人之後不能再變更或是覆蓋此屬性這樣

以下是我目前正在使用的內容, 有興趣的可以一段一段丟進去自己的設定裡嘗試

/* 大張 Loading... 圖 */
.cmp_loading {
background-image: url(http://i35.tinypic.com/2qmoy9w.jpg) !important; /* 圖片的網址 */
width: 500px; /* 圖片的寬度 */
height: 703px; /* 圖片的高度 */
background-repeat: no-repeat; /* 是否重複貼滿 */
background-position: 0px 0px; /* 圖片的座標 */
}

/* 小張 Loading... 圖 */
#lang_from_page {
background-image: url(http://i35.tinypic.com/2rgm6qd.jpg); /* 圖片的網址 */
}
.loading img {
filter: alpha(opacity=0); /* 透明遮罩 */
opacity: 0.00; /* 透明度 */
width: 0px; /* 寬 */
height: 0px; /* 高 */
}
.loading {
background-image: url(http://i25.tinypic.com/ak7qz8.jpg); /* 圖片的網址 */
height: 150px; /* 預設 150px */
background-repeat: no-repeat; /* 是否重複貼滿 */
background-position: center 0px; /* 圖片的座標 */
}

/* 主頁以及背景 */
body, html {
background: url(http://i32.tinypic.com/a12yjl.jpg); /* 背景圖片的網址 */
background-repeat: repeat; /* 背景圖片是否重複貼滿 */
background-color: #000000; /* 背景顏色 */
/* background-attachment: fixed; */ /* 背景圖片是否定在左上 */
/* background-position: center; */ /* 背景圖片對齊位置 */
color: #FFFFFF; /* 顏色(文字) */
/* font-size: 14px; */ /* 字型大小 */
/* font-family: 微軟正黑體, Verdana; */ /* 使用字體 */
bottom;
}
body.language-large-font {
/* font-size:14px !important; */
/* font-family: 微軟正黑體, Verdana; */
}

/* 標題列 */
#page_title {
color: #004A7F; /* 顏色(文字) */
}

/* 時間軸背景(透明化隱藏) */
#timeline_holder {
background: url();
border: none;
background-position: center;
transparent;
}
#timeline_holder #timeline_cnt #time_show {
background: transparent;
}
#timeline_holder #timeline_cnt #display_options_holder {}
#timeline_holder #timeline_cnt .day_start {
background: transparent;
}

/* 自訂換日線 */
#timeline_holder #timeline_bg .bottom_start, .bottom_end {
background: transparent;
color: #0094FF;
}
#timeline_holder #bottom_line {
background: #0094FF;
border: none;
filter: alpha(opacity=10);
opacity: 0.1;
-moz-opacity: 0.1;
}
#timeline_bg .day_bg .div_inner {
background: #cae7fd;
width: 20px;
border: none;
filter: alpha(opacity=80);
opacity: 0.8;
}
#timeline_holder #timeline_cnt .day_start, #timeline_holder #timeline_cnt #time_show {
background: transparent;
}

/* 換日線特效 */
#timeline_holder #timeline_cnt .day_start {
background-color: #FFFFFF;
width: 10px;
filter: alpha(opacity=20);
opacity: 0.2;
-moz-opacity: 0.2;
}

/* 控制面板輸入訊息處 */
#plurk_form {
background: #FFFFFF;
color: #000000;
/* font-size: 14px; */
-moz-border-radius: filter: alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;
}

/* 控制面板輸入訊息處連結顏色(建議與底色相反) */
#plurk_form a:link {color:#0094FF;} /* unvisited link */
#plurk_form a:visited {color:#004A7F;} /* visited link */
#plurk_form a:hover {color:#4800FF;} /* mouse over link */
#plurk_form a:active {color:#0000FF;} /* selected link */

/* 控制面板全域及背景 */
#plurk-dashboard {
background: transparent;
border: 0px;
padding: 2px;
}
#dash-stats h3, #dash-friends h3, #dash-fans h3 {
color: #333;
font-size: 25px;
line-height: 110%;
text-align: left;
border: 0;
font-weight: none;
}

/* 每一則噗中的 loading... 圖 */
#div_loading {
text-align: center;
}

/* 河道上的噗點開後框內的背景 */
.plurk_box .list {
background-image: url(http://i37.tinypic.com/11bsx7o.jpg);
background-position: top center;
margin-top: 0px;
background-repeat: no-repeat;
filter: alpha(opacity=90);
opacity: 0.90;
}

/* 變更 Plurk 生物外觀 */
#dynamic_logo img, #logo a img {
filter: alpha(opacity=0);
opacity: 0.0;
}
#dynamic_logo, #logo {
width: 450px; /* 寬 */
height: 450px; /* 高 */
margin-top: 450px; /* 距離頂部的位置 */
margin-left: 20px; /* 距離右邊的位置 */
background-repeat: no-repeat; /* 不重覆 */
background-image: url(http://i42.tinypic.com/21no0ft.jpg); /* 圖片網址 */
}

你也來打造一個屬於自己的噗浪背景主題吧!! XD

追加：我的噗浪佈景主題的分享連結

以上 ノシ