[CSS 語法教學] 痞客邦 PIXNET 面版樣式(CSS) 設定(問/答) (2014/10/10更新)－tools241 異次元空間幻境

痞客邦 PIXNET 面版樣式(CSS) 設定(問/答)

_________________________________________________________________

** 由於新版Firefox有bug, 本人的blog首頁有些動畫未出現, 或者無法上下左右移動.

在Chrome可看到blog首頁動畫的 "正常效果".

_________________________________________________________________

請將下列橫向座標(left, right, padding中的第2及第4個數)

"儘量" 定位在8的倍數, 在顯示圖/文時可減少虛耗CPU時間。

若您的 "自訂欄位" 要同時使用在Pixnet及Xuite, 則

本文提供的欄寬設定方式將有助於達成兩者版面的一致性!

Q0:欄寬設定(請記得依日期備份CSS檔)。

A0:

[管理後台]==> [自訂樣式] ==>
[自訂樣式簡易版] 擇一："三欄式或

二欄式側欄靠左 或 二欄式側欄靠右" ==> [預覽]/[儲存套用]
再==> [自定樣式]==> 開始[CSS原始碼編輯]

/* 背景圖, 請參考 Q4. */

/*中欄底圖, 請自行改圖或改成底色 background:#ff0; 或隱藏 */
/*
#body-div{
width:970px;
background:url(http://pic.pimg.tw/pixnetvisual/49dad6603e76f.png) left top repeat-y;
position: relative;
margin:0 auto 20px;
}
*/

/* 部落格寬 */
#container{
min-width:1280px; /* 部落格寬1280=8+160+8 +800+ 8+280+16 */

max-width:1848px;
margin:28px 0 0 0;
position:relative;
/*border:1px solid #999 ; 實線*/
}
/* container 三個之中只要設一個便可, 否則可能出現兩條 "直虛線"
#container2{
}
#container3{
}
*/

/* blog上方標題圖, 請自行 "改圖" 或 "repeat改成no-repeat" 或 "隱藏" */
/*
#header{
background:url(http://pic.pimg.tw/pixnetvisual/49dad6613375c.png) left top no-repeat;
height: 190px;
}
*/

/*"側欄區" 請換成下列內容 */
#links{}
#links-row-1 ul, #links-row-1 li,
#links-row-2 ul, #links-row-2 li {
list-style:none;
margin: 0;
padding: 0;
}

/*三欄式的第一欄*/
#links-row-1{
width: 160px ; /* 第一欄寬160 */
margin-left: -800px; /* 調整此 "負數(-920px至-800px)", 將本欄左右移至適當位置,

若在 "二欄式右欄" : 本欄應為正數,

或改用#links-row-2 */
float:left;
/*background:#fff ;*/
padding:200px 8px 8px 8px; /* 本欄留白: 距上方200px 距右8px 距下8px 距左8px */
}
#links-row-1 li{color:#000;}/* 側欄字顏色 "黑色", (例: "本日人氣") */

/*三欄式的第二欄( 若不使用, 其內容可設成 display:none; )*/
#links-row-2{
width:280px; /* 第二欄寬280 */
margin-left:176px; /* 調整此 "正數(56px至176px)", 將本欄左右移至適當位置,

或直接計算此數 = 8+160+8 +800 + #links-row-1中的margin-left值,

= 8+160+8 +800 +( -800 ) = 176 */

float:left;
/*background:#fff ;*/
padding:200px 16px 8px 8px; /* 本欄留白: 距上方200px 距右16px 距下8px 距左8px */
}
#links-row-2 li{color:#000;} /* 字黑色 */

/* 文章區 */
#article-area {
color:#000; /* 字黑色 */
position:absoult;
z-index:500;
width:800px; /* 文章寬800 */
padding:200px 0 0 176px;/* 距上方200px ,距右0px, 距左方176px = 8+左欄寬160 +8 */
}

/* 文章內容 */
#content{
float:left;
width: 800px; /* 文章寬800px ; 若設width:100% 可能導致第二欄會被文章區往下排擠 */
}

/* 文章標題底圖 */
.article-head{
......

......
/* 文章區放寬後, 原 "文章標題底圖" 的 "寬度不足",

若不改圖則可利用原圖 "先右貼+再左貼" 重疊 "拉長" */
background:url(http://pic.pimg.tw/tony25852/034b6937b5c994206e5f141f0d9a5543.png) top left no-repeat, /* 文章標題底圖 "再左貼" */
url(http://pic.pimg.tw/tony25852/034b6937b5c994206e5f141f0d9a5543.png) top right no-repeat; /* 文章標題底圖 "先右貼" */
}

/* 文章標題 */

.title {
/*font-family:標楷體;*/
float:left; /* 靠左或 float:right; 靠右 */
width:696px; /* 約 = 文章寬800 -104 */
font-size:15px;
}

Q1.部落格上的連結字，都換顏色。
A1: 找出 a, a:link, .text { ......

a, a:link, .text{
   ......

    /* 連結顏色 */ color:#005bae;

   }

Q2.文章標題連結更換顏色。
A2:
      /*文章標題列*/
.title a:link, .title a:visited{
    position:relative;
    /* 標題顏色 */ color:#005bae;
    /* 若要設定底色 background:#FAEDB7; width:800px; hright:36px; */
   }

Q3.文章內容顏色, "(繼續閱讀...)" 換顏色。
A3:
.article-body{
   ......

    /* 文字顏色 */ color:#ffff00; /* 黃 */
   /* 若要設定底色 background:#000000; 黑色 */

   }

Q4.圖 "橫向重複"
A4:body {background-image:url(https://sites.google.com/site/toolsdn3/pl/tools-241-26.jpg);
background-repeat:repeat-x;background-attachment:fixed;

} /* 請在 1920x1080 螢幕解析度之下試按兩次 [F11]鍵,

避免下方留白, 所以本人背景圖採 1280x1064 而非 1280x1024 */

Q5. 側欄 "最新文章" 標題。
A5:
/* 側欄 "最新文章" 標題前放 "小圖" */
#recent-article.hslice.box li{

list-style-image:url( "https://pic.pimg.tw/tools241/1681708235-716148970-g.gif");

margin-left:24px;/* 調整到適當位置,以免蓋到中欄 */
}

/* 下列提供18個小圖的網址:

https://pic.pimg.tw/tools241/1681708235-716148970-g.gif

https://pic.pimg.tw/tools241/1681708270-3989926718-g.gif

https://pic.pimg.tw/tools241/1681708287-326403435-g.gif

https://pic.pimg.tw/tools241/1681708310-383940858-g.gif

https://pic.pimg.tw/tools241/1681708332-284613091-g.gif

https://pic.pimg.tw/tools241/1681708398-154641555-g.gif

https://pic.pimg.tw/tools241/1681708418-2819238687-g.gif

https://pic.pimg.tw/tools241/1681708433-2050159423-g.gif

https://pic.pimg.tw/tools241/1681708447-3180000187-g.gif

https://pic.pimg.tw/tools241/1681708463-2842179664-g.gif

https://pic.pimg.tw/tools241/1681708489-1425889045-g.gif

https://pic.pimg.tw/tools241/1681708501-112982855-g.gif

https://pic.pimg.tw/tools241/1681708516-2728365079-g.gif

https://pic.pimg.tw/tools241/1681708531-330838630-g.gif

https://pic.pimg.tw/tools241/1681708549-3524463195-g.gif

https://pic.pimg.tw/tools241/1681708581-173858138-g.gif

https://pic.pimg.tw/tools241/1681708620-1306124504-g.gif

https://pic.pimg.tw/tools241/1681708654-390471508-g.gif

/* 超過1000款小圖/動圖的網址:

小小圖素材 ~ღ 文章前可愛小小圖 ღ~ :

http://rita589768.pixnet.net/blog/post/256043897

/* 側欄 "最新文章" 標題顏色 */

#recent-article.hslice.box li a:link, #recent-article.hslice.box li a:visited{color:#00ffff;}

Q6."版主回覆:" 前面的 *日期* 改顏色
A6:

.trackback li {


    color:#666666;

   }

Q7.隱藏 [部落格/相簿/名片/留言版]
A7:
#navigation { display:none; font-size:0px; }

註: 可在 "自訂欄位" 中利用 "圖片"+"超連結" ,

將 [部落格/相簿/名片/留言版] 修改成個人風格

Q8.刪除 [文章間的dash --------------------------- ]
A8:
.article-footer {
...

...
/*border-top:1px dashed #bbb; 文章間的dash*/
...

...
}

Q9.隱藏 [文章分類前的 "+ -" 號圖示]
A9:
.box-more{ display:none;}

Q10.(儘量不要)隱藏 [底行]
A10:

有人網頁在 IE? 模式下 "底行" 會跳上來重疊到其他地方,

請試調 "line-height減少1px或降低百分比" ,

或找出 "各欄的欄寬" 是否設定上有問題?

"儘量不要" 隱藏底行:

#bottom { display:none; }

註: 當底行被設為 "不可覆蓋", 而您的其他區塊重疊到底行,

則底行會被排擠到未知位置.

"中間欄" 在不同瀏覽器的實際高度可能有異, 若要達成

一致可能top須調降32px, 請上網搜尋 "CSS HACK".

Q11.文末[發表留言(我要回應)] "改圖"
A11:

/* "發表留言" 圖片 請取左邊64px便可 */

/* "發表留言" 換成下列內容 */
.post-comment {
font-size:0px;
text-align:right;
float:right;
}
div.post-comment a{display:block;width:64px;height:34px;z-index:127;position:relative;top:-24px;right:24px;
background:url(https://pic.pimg.tw/tools241/1681708700-1466920823-g.gif) no-repeat;
}