【夢痕自製
筆下傳情留言版語法分享】預設版面Ocean Love解析
今天終於將留言版設計完成, 挺有成就感! ....我幫留言版取了一個名字【筆下傳情】您喜歡我家的【筆下傳情留言版】嗎? ....夢痕將語法分享給大家, 也希望您用心將您的家佈置好, 等待貴客臨門!...願大家在痞客落腳, 每一天都有好心情!
如何改變留言版樣式呢? 首先輸入您的帳號和密碼登入Pixnet後, 點選留言版, 進入管理介面, 點選版面管理, 再點選編輯CSS, 然後將下列語法複製, 貼到原始的CSS語法中, 覆蓋原始的CSS語法, 按更新, 再將您喜歡的圖檔一一輸入語法中的紅字部份的圖片網址, 再按更新, 最後點選檢視中的重新整理, 您會發現您家中的留言版已經煥然一新!
趕快動手做看看喔!...痞客好好玩耶!
夢痕設計的【筆下傳情留言版】語法如下:
/*留言版背景圖設定*/body {
font-size: 12pt;
font-family: "細明體";
background: #fff url(http://lavendersky.myweb.hinet.net/pixmessage001.jpg) repeat-x 0px -150px fixed; margin: 0px 0px 0px 0px; }
ul { padding: 0px; margin: 0px; }
li { padding: 0px; margin: 0px; list-style: none; }
img { border: none; }
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #000;
}
/*留言版尺寸設定*/
#Container {
position: relative;
width: 700px;
margin: 300px auto;
}
/*header山頭*/
#pageHeader {background: url(http://lavendersky.myweb.hinet.net/dreamer01x300.gif) no-repeat;}
#navbar {
height: 20px;
text-align: middle;
color: #ffccff;
}
#navbar a {
color: #ffffff;
}
#navbar a:hover {
color: #000;
}
/*山頭圖*/
#gbheader {
height: 300px;
background: url(http://lavendersky.myweb.hinet.net/pixmessage002.jpg) no-repeat; filter:alpha(opacity:50) ;
border-top: 1px solid #FA00F7;
}
/*留言版介紹字體顏色間距設定-緣起緣滅*/
.gbTopic {
width: 300px;
font-family: "新細明體";
height: 168px;
overflow: hidden;
}
.rssIcon { vertical-align: middle; }
.gbDescr {
width: 300px;
height: 50px;
overflow: hidden;
word-break: break-all;
line-height: 25px;
color: #ffffff;
margin: 25px 0px;
padding-left: 50px;0px 5px;
}
/*gbbody留言版底圖*/
#gbbody {
position: relative;
background: url(http://lavendersky.myweb.hinet.net/f520.jpg) ;repeat-y fixed; filter:alpha(opacity:30) ;
}
.userPanel {
position: absolute;
top: -25px;
right: 0px;
width: 300px;
padding-right: 1px;
}
.userPanel span {
display: block;
float: right;
}
.userPanel span a {
display: block;
width: 90px;
height: 25px;
font-size: 14px;
letter-spacing: -2px;
text-indent: -5000px;
}
/*部落格,名片底圖*/
.userCard a:hover { background: url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/1182593944.gif) no-repeat -181px 0px; }
.userAlbum a:hover { background: url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/1182593944.gif) no-repeat -91px 0px; }
.userBlog a:hover { background: url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/1182593944.gif) no-repeat -1px 0px; }
span.link-separator { display: yes; }
.userComment {
padding: 10px 10px;
}
/*我要留言*/
.userComment span a {
display: block;
width: 100px;
height: 40px;
font-size: 0px;
letter-spacing: -2px;
text-indent: -5000px;
background: url(http://lavendersky.myweb.hinet.net/message001.gif) no-repeat center;
}
/*頁數底圖設定*/
.pageSelector {
height: 25px;
text-align: center;
color: #9bd;
background: url(http://lavendersky.myweb.hinet.net/06004074.gif) repeat-x center;
padding: 5px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.pageSelector span {
}
.pageSelector a {
color: #000;
}
.pageSelector a:hover {
color: #369;
text-decoration: underline;
}
a.styleLinkNow {
color: #999;
font-size: 12pt;
}
/*直幅*/
.gbBox {
clear: both;
width: 600px;
background: none;
margin: 20px auto;
}
/*logo底圖*/
.gbBoxLeft {
float: left;
width: 130px;
background: url(http://lavendersky.myweb.hinet.net/rainbow002.gif) repeat 0px 0px;
}
.ImgTd {
width: 110px;
height: 101px;
text-align: center;
background: url(http://lavendersky.myweb.hinet.net/100x50p.gif);
padding-top: 9px;
margin: 10px 0px 0px 10px;
}
/*使用者名稱底圖size130*/
.ImgTd img { border: 1px solid #fff; }
.UsernameTd {
height: 20px;
color: #000;
background: url(http://lavendersky.myweb.hinet.net/pen130.gif) no-repeat;
padding: 5px 0px 0px 5px;
margin: 10px 0px 0px 1px;
}
.UsernameTd img { display: none; }
.UsernameTd a { color: #fff; }
.UsernameTd a:hover { color: #000; }
.UserlinkTd table {
text-align: center;
margin: 0px auto;
}
.UserlinkTd a { color: #258; }
/*橫幅*/
.gbBoxRight {
float: right;
width: 450px;
overflow: hidden;
background: url(http://lavendersky.myweb.hinet.net/heart8-1.jpg) no-repeat right 0px;
}
table.InnerBox {
width: 450px;
background: #fff;
border-collapse: collapse;
margin: 0px auto 0px auto;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);-moz-opacity: 0.6;
}
.fieldName {
text-align: left;
line-height: 25px;
vertical-align: top;
color: #666;
border-bottom: 1px solid #65a9dd;
padding: 0px 0px 0px 5px;
}
.field {
width: 80%;
line-height: 25px;
word-break: break-all;
border-bottom: 1px solid #65a9dd;
padding: 0px 5px;
}
.spacerDiv {
clear: both;
height: 70px;
background: url(http://lavendersky.myweb.hinet.net/bflyline001a.gif) no-repeat bottom;
}
#gbfooter {
display: none;
}
/*private*/
.PrivateMsg {
display: block;
height: 25px;
font-size: 0px;
color: #ffffff;
background: url(http://lavendersky.myweb.hinet.net/penx130.gif) no-repeat;
border-bottom: 1px solid #b6d7f3;
}
/*signform*/
#signForm .gbBox { background: none; }
#signForm .InnerBox {
width: 600px;
background: #3e94d4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity: 1.0;
}
#signForm .fieldName { color: #b2d4ee; }
#signForm .field { text-align: left; color: #000; }
#signForm .field input {
font-size: 10pt;
font-family: "Arial";
border: none;
}
#gComment {
font-size: 10pt;
font-family: "Arial";
border: none;
height: 102px;
}
/*footer*/
#pageFooter {
height: 55px;
color: #999;
border-bottom: 1px solid #ccc;
background: url(http://lavendersky.myweb.hinet.net/line-107.gif) no-repeat bottom;
padding: 45px 0px 0px 10px;
margin: 0px;
}
#pageFooter a {
color: #fff;
}
您只要將紅字部份換成您喜歡的圖檔網址, 就可以很容易的幫您的家變裝,
請花點時間裝潢您的家, 這樣訪客上門才會身心愉悅!
p.s. 教學圖解後補!
