Note：Pixnet comment-area CSS Style
Pixnet發表留言區塊CSS樣式表
發表留言區全透明CSS樣式
為了朝向單一背景圖的Shandow樣式發展
不在預設樣式表裡的發表留言區導致了一些不完美
花了一個晚上用Opera檢查元件功能偵測和測試
終於達到了自己對樣式的執著
只差「推」按鈕的那個大拇指圖片的背景是白的
也許哪天自己換一個去背的圖片上去
因為「推」在iframe裡面，所以沒得改，只好作罷
首先，發表回應區的網頁結構大概長這樣
本著作由Evan‧A‧D‧E製作
以創用CC 姓名標示-非商業性-禁止改作 3.0 Unported 授權條款釋出。
#comment-area /*發表回應區整個區塊*/
#comment-area-2 /*主要的發表回應區塊*/
.comment-identity/*登入資訊區塊*/
.openid-identity /*名稱*/
a.not-me /*登出連結按鈕*/
.comment-body /*留言區塊*/
.comment-textarea /*文字輸入區塊&悄悄話*/
textarea
.private-message /*悄悄話區塊*/
.captcha /*魔法數字*/
input
a.reload-captcha /*看不懂換張圖*/
.comment-extra /*其他選項*/
#comment-extra .extra /*其他選項 展開*/
input
以下CSS程式碼可以直接複製使用
因為有內建樣式，所以有編輯過的項目要加 !important
這裡只列出筆者修改過的部分
但請記得這段程式碼只包含發表回應區塊
不要把自己原本的樣式全部覆蓋掉
只需加在自己的樣式表後就可以了
背景(background)跟文字(color)都可以依照自己的需求修改
功能說明：
背景透明
文字輸入區塊&悄悄話：rgba(0, 0, 0, 0.350) (35%黑半透明)
輸入或按鈕 input #FFFFCC (米黃)
文字輸入區 textarea #FFFFFF (白)
連結 a #CCCCCC (淺灰)
拿掉「看不懂換張圖」的背景(圈圈箭頭圖片)
#comment-box input { /*留言列表區塊所有的input*/
background: none transparent !important;
color: #FFFFCC !important; /*顏色若為#FFFFFF，勾勾呈現黑色*/
}
#comment-area {/*發表回應區 整個區塊*/
background: none transparent !important;
color: #FFFFFF !important; /*似乎沒有文字套用到這個屬性*/
}
#container #main #content #user-post #comment-area * { /*全域屬性，主要用於改文字，寫全名是為了讓之後的文字可以自訂*/
color: #FFFFFF;
}
#comment-area-2 {/*完整的回應區塊*/
background: none transparent !important;
}
.comment-identity {/*登入資訊區塊*/
background: none transparent !important;
}
a.not-me { /*登出按鈕*/
color: #CCCCCC !important;
}
.comment-textarea {/*文字輸入區塊&悄悄話*/
background: none rgba(0, 0, 0, 0.350) !important;
}
.comment-textarea textarea {/*文字輸入區塊 文字方塊*/
BACKGROUND:none transparent !important;
color: #FFFFFF !important;
}
.private-message { /*悄悄話區塊*/
background: none transparent !important;
}
#comment-area-ad {
display:none;
}
.captcha { /*魔法數字區塊*/
background: none transparent !important
color: #FFFFFF !important;
}
.captcha input { /*魔法數字區塊 輸入區*/
background: none transparent !important;
}
a.reload-captcha { /*看不懂換張圖*/
background: none transparent !important; /*reload的圈圈箭頭圖片*/
color: #CCCCCC !important;
}
#comment-area button { /*送出留言按鈕*/
background: none transparent !important;
}
.extra { /*其他選項 (展開項目)*/
background: none transparent !important;
}
.extra input { /*其他選項 input (電郵、網頁)*/
background: none transparent !important;
}
系統預設原始樣式：
#container #main #content #user-post #comment-box #comment-area {
background: url("attachment:/452/attachment452.png") transparent;
border-radius: 5px;
clear: both;
color: #555555;
font-family: "Tahoma";
font-size: 12px;
line-height: 25px;
margin: 20px auto;
padding: 5px;
position: relative;
text-decoration: none;
width: 490px;
}
#container #main #content #user-post #comment-area * {
background: transparent;
border-bottom: 0px none currentColor;
border-left: 0px none currentColor;
border-right: 0px none currentColor;
border-top: 0px none currentColor;
color: #000000;
font-size: 12px;
font-weight: 400;
height: auto;
letter-spacing: 0px;
line-height: 18px;
list-style: none outside none;
margin: 0px;
padding: 0px;
text-align: left;
text-decoration: none;
width: auto;
}
#container #main #content #user-post #comment-box #comment-area-2 {
background: #F5F5F5;
border-top: 1px solid #DDDDDD;
width: 490px;
}
#container #main #content #user-post #comment-box #comment-area iframe {
border: 0px none currentColor !important;
height: 32px;
overflow: hidden;
position: absolute;
right: 10px;
top: 17px;
width: 86px;
}
#container #main #content #user-post #comment-box .comment-identity {
background: #E6E6E6;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-top: 1px solid #F3F3F3;
height: 44px;
padding: 6px 0px 0px 10px;
}
#container #main #content #user-post #comment-box .identity-login img.photo {
border: 1px solid #FFFFFF;
float: left;
height: 35px;
margin-right: 5px;
width: 35px;
}
#container #main #content #user-post #comment-box .openid-identity {
float: left;
margin-top: 6px;
overflow-wrap: break-word;
width: 320px;
}
#container #main #content #user-post #comment-box #comment-area a {
text-decoration: none;
}
#container #main #content #user-post #comment-box a.not-me {
color: #888888;
font-weight: 700;
padding: 0px 5px;
}
#container #main #content #user-post #comment-box .comment-body {
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-top: 1px solid #FFFFFF;
padding: 7px 10px 0px;
}
#container #main #content #user-post #comment-box .comment-textarea {
background: #FFFFFF;
border: 1px solid #E8E8E8;
border-radius: 5px;
margin: 5px 0px 10px;
width: 465px;
}
#container #main #content #user-post #comment-box .comment-textarea textarea {
background: #FFFFFF;
border: 0px none currentColor;
border-radius: 5px;
color: #000000;
font-family: "Tahoma";
font-size: 12px;
height: 100px;
line-height: 16px;
margin: 0px;
padding: 5px 0px 0px 10px;
width: 455px;
}
#container #main #content #user-post #comment-box .private-message {
background: url("attachment:/1085/attachment1085.png") transparent;
border-top: 2px solid #DDDDDD;
line-height: 12px;
margin: 0px 10px 8px 0px;
text-align: right;
}
#container #main #content #user-post #comment-box .private-message input {
bottom: -2px;
margin-right: 5px;
position: relative;
}
#container #main #content #user-post #comment-area #comment-area-ad {
margin: 5px 0px 10px;
}
#container #main #content #user-post #comment-box .captcha {
background: #FFFFFF;
border: 1px solid #E8E8E8;
line-height: 16px;
margin: 5px 0px;
overflow: hidden;
padding: 7px;
position: relative;
}
#container #main #content #user-post #comment-box .captcha img {
border: 0px none currentColor;
float: left;
margin-right: 18px;
}
#container #main #content #user-post #comment-box a.reload-captcha {
background: url("attachment:/453/attachment453.jpeg") 100% 4px no-repeat transparent;
color: #AAAAAA;
display: block;
font-size: 12px;
height: 22px;
padding-right: 15px;
position: absolute;
right: 10px;
top: 7px;
width: 80px;
}
#container #main #content #user-post #comment-box .captcha input {
margin-top: 5px;
width: 210px;
}
#container #main #content #user-post #comment-box .comment-extra {
cursor: default;
overflow: hidden;
padding: 0px 0px 5px;
}
#container #main #content #user-post #comment-box .comment-extra div {
float: left;
margin-top: 3px;
}
#container #main #content #user-post #comment-box #comment-area button {
background: url("attachment:/454/attachment454.jpeg") 0% 100% repeat-x #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 5px;
font-weight: 700 !important;
height: 25px;
padding: 0px 6px;
text-align: center;
}
#container #main #content #user-post #comment-box .comment-extra button {
float: right;
}
#container #main #content #user-post #comment-box .extra {
background: #FFFFFF;
border: 1px solid #E8E8E8;
margin-bottom: 10px;
padding: 7px 0px 7px 7px;
}
#container #main #content #user-post #comment-box .extra input {
margin-right: 7px;
}
#container #main #content #user-post #comment-box .captcha input, #container #main #content #user-post #comment-box .extra input {
background: url("http://front.pixfs.net/comment/images/input-text.jpg") repeat-x #FFFFFF;
border: 1px solid #E8E8E8;
border-radius: 5px;
height: 19px;
width: 197px;
}
#container #main #content #user-post #comment-box input {
color: #000000;
font-family: "Tahoma";
font-size: 12px;
padding: 3px 10px;
}
本著作由Evan‧A‧D‧E製作
以創用CC 姓名標示-非商業性-禁止改作 3.0 Unported 授權條款釋出。
文章標籤
全站熱搜
Black Novel (2)