培迪 的痞客邦部落格

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

** Yahoo/無名 面版樣式(CSS) 隱藏 "置頂公告"

/* 隱藏 Yahoo 置頂公告 */
.in-product-message {display:none;width=0px;height=0px;}

/* 隱藏 無名 置頂公告 */

#infozone {display:none;}

註:
1.本人已從 Yahoo 搬到 Xuite.
2.本人已建立Pixnet部落格:  http://tools241.pixnet.net/blog  

    暫時做為測試之用(回答 "Yahoo知識家" 問題).

3.在修改CSS內容前請先依日期備份.

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

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

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

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

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;
}

/*三欄式的第一欄( 若不使用, 其內容可設成 display:none; )*/
#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 ,距右8px, 距左方176px = 8+左欄寬160 +8  */
}

/* 文章內容 */
#content{
float:left;
width: 800px; /* 文章寬800  */
}

/* 文章標題 */
.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;}



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

list-style-image:url( "http://s.blog.xuite.net/_image/blogIcon19.gif"); 

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

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

http://s.blog.xuite.net/_image/blogIcon19.gif

http://s.blog.xuite.net/_image/portal/mood/mind_s5.gif

http://s.blog.xuite.net/_image/portal/mood/mind_s1.gif

http://s.blog.xuite.net/_image/portal/mood/mind_s3.gif

http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/110351276/23.gif

http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/110351276/22.gif

http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/110351276/21.gif

http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/110351276/20.gif

http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/110351276/19.gif

http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/110351276/18.gif

http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/110351276/17.gif

http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/110351276/10.gif

*/

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

#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.隱藏 [站方公告]
A8:
#announce { display:none; }
 
Q9.隱藏 [活動快報]
A9:
#events { display:none;  }

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

Q11.(儘量不要)隱藏 [底行]
A11:

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

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

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

  "儘量不要" 隱藏底行:

#bottom { display:none;  }

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

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

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

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

Q12.游標 (在IE模式才有效果,游標樣式的網址副檔名不一定要為ani)
A13:

/* 游標樣式1(4星): 沒有連結時 */

body{cursor:url(http://bbs.flash2u.com.tw/skins/myspace/userskins/skin_472043/201012278195013231.png);}

/* 游標樣式2(閃心): 側欄的連結 */

a:hover{cursor:url(http://bbs.flash2u.com.tw/skins/myspace/userskins/skin_472043/201012277423951482.png);}

/* 游標樣式3(藍心): 原創:中欄 "文章標題" 的連結 */

.title a:hover{cursor:url(http://blog.roodo.com/tools_241/4c17f94d.xls);}

/* 游標樣式4(紅心): 原創:中欄文章內的連結 */

.article-body a:hover{cursor:url(http://blog.roodo.com/tools_241/6b873501.xls);}

註:

     上列游標係由 *.ani 改副檔名為 *.png 或 *.xls 然後再上傳,

     但此變通取巧方式目前在多數網站會因檔案結構不合導致上傳失敗.

     上列網站仍會保留檔案, 網友可直接套用或下載後再上傳到他處.

Q13.點選「文章分類」會呈現全文，音樂一起自動播放，顯得很吵雜?
A13:

 解法1: 在 "首頁" 或 "文章分類" 只顯示文章的前0行 ,

           [管理後台]==> [基本/進階設定] ==>[首頁文章顯示模式]==>

                   [ ] 視單篇文章之設定

                   [ ] 顯示全文

                   [v] 顯示前[ 0]行摘要( 或0改成2, 在文章開頭空2行後再插入 "播放器語法" ).

 解法2: 文中不插入播放器語法, 改在側欄插入 "隨機(或依序)+多曲" 播放器語法 ==>

     [原創]部落格小玩意 "可隨機/依序播多首的MP3播放器2語法貼紙" -- 使用playlist

Q14.隱藏 [廣告]

A14: 略.
   隱藏上方廣告: 有 "數種" 隱藏廣告的方法, 但不保證永遠有效.

  隱藏文末廣告: 找出 "廣告" 的 "id", 但 "id" 可能會不定期變更, 或被濾掉.

** 除了 "隱藏" , 何不 "加料" ?

1.本人在舊址http://tw.myblog.yahoo.com/tools-241

   已同時使用了4種游標, 在此特別公開用法.

2.滑鼠移到天使變蝙蝠 ,再按左鍵回首頁.

3.多數blog對版面的 "絕對位置" 管控較為寬鬆, 例如:

   "前景動圖" 可以置頂, 座標負數可能有效, 但在Yahoo則受限,

   本人以獨特 "CSS HACK" 語法突破此限制,

   請參考舊址 "流星雨" 位置.

* 色碼表 ==>：http://nthucad.cs.nthu.edu.tw/~yyliu/color.html

* 如何設定電腦游標

* 隨意窩 Xuite 面版樣式(CSS) 設定(問/答) ==>

http://blog.xuite.net/tools241/blog/112234512

本文出自1: http://blog.xuite.net/tools241/blog/112182670  (內容隨時補充)

本文出自2: http://tools241.pixnet.net/blog/post/261572942  (內容隨時補充)