【夢痕自製筆下傳情留言版語法分享】預設版面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. 教學圖解後補!

arrow
arrow
    全站熱搜

    lavendersky168 發表在 痞客邦 留言(1) 人氣()