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

 

 

 

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

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

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

 #infozone {display:none;}

 

 

 

** 建 隨意窩 Xuite日誌 要領

          請參考1 ==>  適用於多家部落格的 "免費網路空間"

       * 文章之中可插入多種格式的檔案,

          再以 "html模式" 檢視網址( 空間穩定且反應快速, 適合存動圖/背景圖 ) .

 

 

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

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

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

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

 

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

 A0:

 /*

      [日誌管理]==>[面版樣式(佈景+CSS)] ==>
     [佈景主題] 擇一:
"適用三欄適用兩欄左欄適用兩欄右欄" ==> [套用]
     再==>[自定CSS樣式] 開始改 CSS 內容

 */

 

/* 定位框 */
#wrap{
    width:1280px; /* 部落格寬1280=8+160+8 +800+ 8+280+16 */
    margin:0px auto 0 0/*0: 各欄不會因瀏覽器拉寬而右移*/;

     /*margin:0px auto;   若上一行改用此行, 則各欄會因瀏覽器拉寬而右移*/

    text-align:left;
}

 

 

/*左欄*/

#linksLeft{  color:#ffff00; /* 字色 */

    background-color:#fff;      /*底色 */
    /*background:url(http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/64125590/5.gif) repeat; */  

    /* 底圖 */

 

    width:160px; /* 左欄寬 */

    padding:464px 8px 8px 8px; /* 左欄留白 上 右 下 左 */

    float:left;
}

  

/* 右欄 */

#linksRight{ color:#ffff00; /* 字色 */

    /* background-color:#fff; */     /*底色 */
    background:url(http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/64125590/5.gif) repeat; /* 底圖 */

    width:280px; /* 右欄寬280有利於 "播放器" 的放寬,

      請參考:  http://blog.xuite.net/sweetmay168/blog/85315454 */

    padding:464px 16px 8px 8px; /*右欄留白 上 右 下 左 */

    float:left;
    position:relative;
    left:800px; /* 中欄寬800 */
}

 

/*中間欄*/
#mid{  color:#ffff00;
    width:800px;/* 中欄寬 */

    padding:740px 0 8px 0; /* 中間欄留白 上 右 下 左 */

    float:right;
    position:relative;
    right:304px; /* 304 = 8+280+16 */
}

 


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:
.blogbody{
   ......

   
    /* 文字顏色 */ color:#333333; /* 灰色 */
   /* 若要設定底色 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:
/* 側欄 "最新文章" 標題前放 "小圖" */
.articleSide li{

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

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

 

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

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/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/41.gif

 

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

 

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

 

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

 

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

 

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

 


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

 


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

 

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

 

*/

 


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

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

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

 

*/

 

 
 

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

.articleSide li a:link, .articleSide li a:visited{color:#ffff00;}


Q6.隱藏 大LOGO
A6:
#xuitelogo{display:none;}



Q7.隱藏上方 [日誌 相簿 ...]
A7:
.tab_service {display:none;}


 Q8.隱藏 [相關文章]
A8:
.articleExt {display:none;}
#articleExt_relate_content{display:none;} 

 

 

Q9.隱藏 [欄位名稱]
A9:
.sidetitle{
    font-soze:0px;width:0px;

 

    ...

 

    ...

 

}

 

 

 

Q10.隱藏 [日曆下方的(文章依月) "列表顯示" ] "改圖片"
A10:

 

/* 隱藏日曆下方的 "列表顯示" */

.calendarbutton {display:none;}

 


 

/*  圖片改成200x24 "列表展開|收合" */

.calendarbutton  a#calendarbutton {display:block;width:200px;height:24px;z-index:500;position:relative;left:-72px;bottom:2px;margin-top:32px;
background:url(http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/123700756/11.jpg) no-repeat;} 

 

 

 

 

Q11.[我要回應] "改圖"
A11:

 

/*  "我要回應" 圖片 取左邊64px便可 */

.comment  a.commentbutton {display:block;width:64px;height:34px;z-index:500;position:relative;right:24px;top:18px;
background:url(http://2.blog.xuite.net/2/3/1/9/25043832/blog_3331499/txt/123700756/14.gif) no-repeat;}  /* 我要回應 */

 

 

 

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

 

/* 游標樣式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(紅心): 原創:中欄文章內的連結 */

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

 

 

 

註:

 

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

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

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

 

 

 

Q13.各篇文章音樂一起自動播放,顯得很吵雜?
A13:

 

解法1: [編輯]含播放器的文章==> (下方)[進階設定] ==>[文章摘要]==>

                   [ ]

                   [ ]

                   [v] 使用自訂摘要 ( 在摘要中輸入一個 "全型中文空白" )

                 ==>[確定發表] ( 此篇文章在首頁將不會出現 "播放器" 或 "文字" )

 

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

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

 

 

 

Q14.Xuite部落格2014/11/07改版可能導致 "前景下調26px"

 

A14:

/* 若要將前景上調26px: 請在CSS修改 body{...}, 

     ( 註:不排除日後Xuite會再改回舊模式  ) */

body

{

/* margin: 0;    2014/11/07之前其值為0;  改成下一行  */

margin: -26px   0   0   0;  /* 2014/11/07之後, 自行調高前景26px */

......

......

}

 

 

 

 

 

 

 

 

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

 

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

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

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

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

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

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

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

 

 

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

 

 

* 如何設定電腦游標

 

 

哈部落登錄部落格:

http://funp.com.tw/blogs/

 

Google登錄部落格:

http://blogsearch.google.com/ping

 

Google登錄網站:

http://www.google.com/addurl/?hl=zh-TW

 

 

 

* [CSS 語法教學]  痞客邦 PIXNET 面版樣式(CSS) 設定(問/答) ==>

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

 

 

 

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

 

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

文章標籤
創作者介紹

tools241 異次元空間幻境

tools241 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • 王昆
  • 好棒ㄉ教學...善知識午安吉祥
  • f30917
  • 好棒ㄉ教學
找更多相關文章與討論