修改痞客三欄版面

日期：
搬來這裡也有一段時間了，陸陸續續也做了一些版面，因為最近PIXNET推出的新功能都只能用於痞客版面居多，因為我比較愛用三欄，所以我有做了三個三欄的痞客版面，有需要的人在到這裡套用，套用後在修改一下就可以了。針對我這個版面，稍微解釋一下，希望有所幫助。ps我發現我做的痞客版IE6以下的版本看了會有點問題，所以比較適用於IE7和FIREFOX使用。首先是BANNER，在套用這個版面之後，到編輯CSS那邊，在找到下面這列文字，再把紅色的連結，換成你做的banner就可以了，BANNER大小是900*298。
no-repeat right top就是固定圖片再右上方的意思。
/* --------------------------------------------------------------- 頁首 ---------------------------------------------------------------*/

#header{
background:url('http://farm2.static.flickr.com/1410/1385161490_af9459df1e_o.jpg') no-repeat right top;
height: 266px;
width:px ;
    background:#;
    padding:20px;
margin: -10px -10px 0px 0px ;/*上、右、下、左*/
}



再來應該都有看到我版面有這個圖案，這個到CSS裡面的大範圍區塊，找整體設定來修改，就是把下列紅色的連結，改成你要的圖片就可以了。這裡我就沒有固定圖片，所以圖片會一直重複，如果你要固定的話，就要在連結後面再加上一個no-repeat，比如說background:url('http://farm2.static.flickr.com/1313/1235024837_e7e1743f7c_o.jpg') no-repeat;這樣就可以了。
/*------------------------------------------------------------------------------------------
    PIXNET template exemplar - by PrincessWow
    固定寬度版型 - 5
    三欄式 / 內文區靠中 / 側選單-1靠左 / 側選單-2靠右
------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------- 大範圍區塊 ---------------------------------------------------------------*/

/*--整體設定--*/
body{
    font-size:12px;
background:url('http://farm2.static.flickr.com/1313/1235024837_e7e1743f7c_o.jpg') ;
    font-family:"Arial","MS UI Gothic","porky's","Verdana",  "Helvetica", "sans-serif","新細明體","fiolex girls";
cursor:crosshair;
}

因為我不喜歡邊欄太長，可是像最新回應，或是最新文章等類似的邊欄，我又喜歡一次可以看很多個，所以我就改了一個語法，修改地方在側邊欄位區底下，有許多邊欄的語法，你找到你想改的那一個邊欄，然後在近期文章內容區塊裡面，再增加一欄 height:200px; overflow:auto ; (height就是欄位的高度)語法就可以了。
/*--近期文章--*/
#recent-article{}
/*--近期文章標頭--*/
#recent-article .box-title{}
/*--近期文章內容區塊--*/
#recent-article .box-text{height:200px;
    overflow:auto ;}
/*--近期文章文章標題--*/
#recent-article .box-text a{}



是不是很簡單呢!有問題在發問吧~
  • 留言者: 糖麻
  • Email:
  • 網址: http://blog.pixnet.net/mewmewo
  • 日期: 2007-09-15 09:27:59

謝謝妳 明天來試試看




  • 留言者: hueiling
  • Email: avboid@ms51.url.com.tw
  • 網址: http://blog.pixnet.net/hueiling
  • 日期: 2007-12-30 04:52:06

您好:
想請問我是套用你的另一個樣式
下面是我套用後的網址http://blog.pixnet.net/hueiling#article-area
有二個問題要請問
1.三欄式的,我要三欄並行.現在是只看到中間.二旁的都在下面要怎麼改css呢?
2.想請問自己喜歡的圖片,像素大概是多少呢?我怎麼調,都會有一角圖片被profile那行佔掉.
希望您能回覆我
謝謝




  • 留言者: Tiffany
  • Email: tiffany2450@yahoo.com.tw
  • 網址: http://blog.pixnet.net/endlessmusic2
  • 日期: 2008-01-27 10:08:52

很喜歡您設計的可愛3欄版面.想套用在我的blog.可是除了您介紹的換圖方法外,可否請您教我一下如何"隱藏"個別文章的人氣顯示呢?
我試過網路上的一些語法,可是都不行呀.只好拜託您了.感謝!!




  • 留言者: mygogo
  • Email:
  • 網址:
  • 日期: 2008-01-28 12:43:11

嗯.....阿.....我還沒研究到那邊噎......不好意思




  • 留言者: Tiffany
  • Email:
  • 網址:
  • 日期: 2008-01-30 05:56:11

還是謝謝你^^!我自己再慢慢試試看.




  • 留言者: Tiffany
  • Email:
  • 網址:
  • 日期: 2008-02-02 11:04:40

Dear mygogo,
搞定了!最後我是在"footer"那把顏色改成白色#fff來把"人氣"隱藏掉.其他項目顏色還好沒有變掉耶.^^




  • 留言者: linda750637
  • Email:
  • 網址: http://blog.pixnet.net/linda750637
  • 日期: 2008-02-28 01:49:00

我套用尼的版型語法，但是尼說側欄的部份，我也在CSS裡找，可是都找不到這一行，到底是要在那兒改呢??麻煩尼可不可以教教我呢??還有個問題，之前我在奇摩有欄位的限制，只有五個自定欄位，在痞客邦是否有欄位的限制呢??謝謝尼喲!




  • 留言者: mygogo
  • Email:
  • 網址:
  • 日期: 2008-02-28 05:52:22

就在CSS裡面的/*--側邊欄位區--*/
#links這一行，除非你套用的不是痞客版本，如果是GREY版，那側欄叫做#Sidebar

留言

張貼留言