昨天在改自訂樣式CSS,所以抓出幾個修改舊的自訂樣式CSS的重點[自己的心得],先整理一下跟Xuiters分享一下。11/18修改:注意,如果你是使用IE6的瀏覽器的話,在container這定位框的部份一定要記得加上position:relative;,否則可能會發生左側欄位、中間欄位、右側欄位跟檔頭banner區塊的位置不對齊的問題!!12/03補上漏改的留言小圖示。99/04/30再增加tab_service服務切換鈕的設定

建議修改的步驟

步驟一:加三段語法到舊的自訂樣式中,這些是原本不存在的CSS定義
第一段語法是↓
ul {padding:0;margin:0;}
li {list-style-position:inside}
h1, h2, h3 { padding:0;margin:0; font-weight:normal;}

將它插入原本的樣式中,建議在原本的html主體與body之間,likes下面那段紅色字↓
/*主體*/
html{
 scrollbar-face-color:#E9DBCB;
 scrollbar-highlight-color:#CDB7B5;
 scrollbar-shadow-color:#CDB7B5;
 scrollbar-3Dlight-color:#E9DBCB;
 scrollbar-arrow-color:#CDB7B5;
 scroll-track-color:#E9DBCB;
 scroll-darkshadow-color:#E9DBCB;
}
ul {padding:0;margin:0;}
li {list-style-position:inside}
h1, h2, h3 { padding:0;margin:0; font-weight:normal;}
body{ 
    margin:0px 0px 0px 0px;
    text-align: center;
    background-color: #FFFFFF;
    font-family: Comic Sans MS,arial,helvetica,sans-serif;
    color: #000000;
    font-size: 15px;
   line-height:150%;
    word-wrap: break-word;
}

第二段很短,是一個位於定位框container前的wrap,下面的紅色字部份
/*定位框*/
#wrap {
}
#container {
 position:relative;
 text-align: left;
 width:1215px;
 margin:0px auto;
 align:center;
 padding: 0px 0px 0px 0px;
background:#FFFFFF url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/17545208/25.jpg) top right no-repeat;
}
11/18修改:注意,如果你是使用IE6的瀏覽器的話,在container這定位框的部份一定要記得加上position:relative;,否則可能會發生左側欄位、中間欄位、右側欄位跟檔頭banner區塊的位置不對齊的問題!!

第三段語法則是加到原本的CSS樣式最後面,接上去!紅色字部份
/* 2009/09 新 關於我 區塊 */
#avatarContent {width:99%;text-align:center;display:block;word-break:break-all ;}
#avatarAddMe {width:96px;height:2em;margin:0 auto;}
#avatarAddMe img {float:left;}
#personalLink {height:6em;width:100%;padding:0px; margin:5px auto;display:block;}
#personalLink li {list-style-type:none;float:left;height:1.7em;margin:0 5px 0 5px;padding:2px 0 0 38px;width:auto;display:block;}
#personalLink li img {margin:1px 2px 0px 0px;vertical-align:top;}
li.pblog{background:url(
http://img.xuite.net/portal/common/icons/blog.gif) no-repeat center left;}
li.pphoto{background:url(
http://img.xuite.net/portal/common/icons/photo.gif) no-repeat center left;}
li.pvlog{background:url(
http://img.xuite.net/portal/common/icons/vlog.gif) no-repeat center left;}
li.pboard{background:url(
http://img.xuite.net/portal/common/icons/gbook.gif) no-repeat center left;}
li.pfriend{background:url(
http://img.xuite.net/portal/common/icons/friend.gif) no-repeat center left;}
li.plink{background:url(
http://img.xuite.net/portal/common/icons/card.gif) no-repeat center left;}

/* 2009/09 新 回應 區塊 */
#commentSide{margin:4px 0px 4px 8px;padding:0px;}
li.commentBox {list-style-type:none;margin-left: 0 !important;margin-bottom: 5px;height:36px;text-indent:0 !important;}
li.commentBox img{width:32px;height:32px;border-style:solid;border-color:gray;border-width:1px;float:left;}
li.commentBox .content {margin-left: 36px;}
div.commentBody{font-size:1.2em;width:140px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;}
div.commentAuthor{font-size:0.8em;width:140px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;}

/* 2009/08 相關文章 */
.articleExt {
clear:both;
padding-top:10px;
border-top:1px solid #ccc;
font-size:13px;
line-height: 100%;

}
.articleExt li{
list-style-position:inside;
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
/* 2009/09 推推 bookmark 區塊 */
.bookmark{
float:right;
}

步驟二;調整版型的Mid, linkLeft, linkRight位置,就是中間欄與兩邊側欄的顯示位置!基本上在做完第一步驟後,我個人經驗是幾乎側邊欄的內容顯示是正常的!就是版面會出現像下圖的情形↓
原本正常的位置→
現在會出現側邊欄往下移到中間欄mid之下

這個主要的原因就是新的Blog顯示語法的順序是先顯示mid,再顯示左右欄,於是會讓左右欄被擠壓到下面去!!這個是因為原本的position設定為relative等現象。

所以要修正欄位位置,第一個會變的是中間欄的寬度不能再是變動寬度!!一定要固定大小!!所以要改很多地方的大小設定,包括有:
/*定位框*/ #container {}
/*檔頭*/ #banner{}
/*左欄*/ #linksLeft{}
/*右欄*/ #linksRight{}
/*中間欄*/ #mid{}
/*檔尾*/ #footer{}

11/08修改這裡特別再提一下#container的部份,因為之前的Xuite Blog版型有的有可以隨瀏覽器的寬度而改變Blog顯示寬度[主要是中間欄的寬度],它多半是在#container這裡面多了一個像下面紅色字的部份的expression運算式子↓,以及一個最低寬度min-width的定義
#container{
....
behavior:expression(this.style.width=(document.documentElement.offsetWidth<990)?"990px":"99%");
min-width:990px;
....
}
這裡就要直接改變,不能再隨著瀏覽器寬度而改變了,直接設定固定寬度變成
#container{
....
width:990px;
....
}
/* end of 11/08修改部份  */
如果要保持隨螢幕寬度改變container的寬度大小,可以參考另外一篇文章(11/14)的說明↓
http://blog.xuite.net/jeanson61/xuite/28439946

它們都需要加上一個width: ###px;這樣的設定,基本上#container {} #banner{} #footer{}三個的寬度可以一樣,這是比較單純的,大概就設定990px;[或是960px;]寬就可以適合現在1024x768寬螢幕的瀏覽。

至於中間欄與左欄、右欄的寬度就要相加不大於#container {} 它的寬度。也要考慮中間欄與左右欄間的留白寬度。我分別用mid(570px), linksLeft(200px), 以及linksRight(200px)為範例來說明。這樣570+200+200=970,小於990px的container寬度。所以我以三欄式的版型來做範例說明

請先改mid,增加寬度的定義,likes width: 570px;以及改其位置顯示為靠右浮動float: right; 距離右邊為210px[right:210px;]
/*中間欄*/
#mid{
position:relative;
width: 570px;
float:right;
right:210px;
padding: 0px 0px 0px 0px;
}
這樣的動作就是要讓中間欄與右側有一個210px寬的距離,而這個留白空間要給右側欄來顯示資料用的[右側欄寬為200px,所以留白寬度夠寬]

再來調整左邊欄與右邊欄,我看到Xuite的三欄式的範例是讓這兩個側欄都採靠左浮動float: left; 我們先看左欄,將左欄靠左邊擺放,距左邊5px[left: 5px;]
/*左欄*/
#linksLeft{
width: 200px;
position: relative;              
float: left;
left: 5px;
 
}

然後我們再來看看右欄,這部份要放右欄,就是要跟左欄之間的留白空間足夠大到不會卡到先前的中間欄mid,所以定義右欄與左邊的浮動區塊的距離寬到足夠大於mid的寬度(570px;)
/*右欄*/
#linksRight{ 
width: 200px;
position:relative;
float: left;
left: 580px;

margin: 0px;
}

用圖來解釋一下看看會不會比較清楚↓

如上圖,mid藍色框區塊靠右邊210px; 然後linksLeft, linksRight兩個紅色框區塊都靠左邊放,第一個左欄距離左邊5px,第二個右欄則是距離左邊區塊580px寬,所以就形成如上圖的樣子,各個區塊間都有5px的留白寬度。這就是我想要的結果。

調整完第二個步驟後基本上大致上是都差不多完成"重點"了,剩下來的是一堆小圖示的部份,這些多半是中間文章欄位裡面的一些分類、評分、瀏覽計算次數這些的小地方。

步驟三:直接找到span.counter, span.category, span.mail這些地方,因為原本的圖示是用li的方式中的 list-style-image去定義圖示,現在改為背景圖片方式。所以除了字體顏色不動外,其他可以照Copy
/*文章瀏覽數*/
span.counter{
background: url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif) no-repeat;
float: right;
margin: 5px;
padding: 2px 0px 0px 20px;
width: auto;
color: #cc0000;
}
/*文章分類*/
span.category{
background: url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif) no-repeat;
float: right;
margin: 5px;
width: auto;
padding: 2px 0px 0px 20px;
}
/*留言名稱 12/03留言的小圖示*/
span.commenttitle{
 background: transparent url(http://s.blog.xuite.net/_image/bulletMessageList.gif) no-repeat;
 padding-top: 3px;
 padding-left: 20px;
}
/*好文轉寄*/
span.mail{
background: url(http://s.blog.xuite.net/_image/skin/list/email_forward.gif) no-repeat;
float: right;
margin-top: 5px;
padding: 2px 0px 0px 20px;
width: auto;
}
還有同樣也是取消li的有,more的文字按鈕,將這個照Copy就好,然後因為改more要牽動的是posted這個CSS樣式class的設定,加一個clear: both;否則more跟posted這兩個會擠一團打架!!
.morebtn{
background: url(http://s.blog.xuite.net/_image/blog037.gif) no-repeat;
width: auto;
padding-left: 20px;
float: right;

}
.posted{
width: 100%;
text-align: right;
color: #999999;
font-family: "細明體";
font-size: 13px;
font-weight: normal;
clear: both;
}

04/30補充:服務切換tab語法更改名稱
簡單的作法是直接再加上一段
/*服務切換tab*/
#service-list{  /* 這個原名為.tab_service */
        position: absolute;
        width: 215px;
        top: 215px;
        left: 750px;
        clear: both;
}
#service-list a{ /*這個原名為.tab_service li */
        margin: 0px 1px 0px 0px;
        display: block;
        float: left;
        list-style-type: none;
        padding:3px;
        color: #ffffff;
        cursor: pointer;
        background-color: #717171;
}
#service-list li {  /* 新增加的 */
        float : left;
        margin : 0px;
        padding : 0px;
}
再不然就是去找到.tab_service 換成#service-list
.tab_service li換成service-list a
然後加上
#service-list li {  /* 新增加的 */
        float : left;
        margin : 0px;
        padding : 0px;
}

11/09修改[Option選項執行]步驟四, 修改兩邊的側欄的標題圖示
如果你的部落格原本的自定樣式CSS中有針對每一個側邊欄位標題的小圖示進行調整修改的,那就必須再多做這一個步驟去改設定。我先說明一下要怎麼改的範例,因為原本的標題小圖示是在.xxxTitle li { list-style-image: url(圖示網址); }裡面去定義,例如原本的最新文章的小圖示CSS語法↓
/*最新文章*/
.articleTitle li{
 list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletArticleList.gif);
}
現在新版的圖示不能再用li的定義去設定小圖示,所以要變成透過背景圖片去設定,就變成↓
/* 最新文章的小圖示 */
.articleTitle {
   background: transparent url(http://s.blog.xuite.net/_image/skin/list/bulletArticleList.gif) no-repeat left center;
   padding-left: 20px;
}
所以要變成改.articleTitle {}這裡面的設定,而非.articleTitle li{},然後原本的小圖示就要變成背景圖片,所以改成background: transparent url(http://s.blog.xuite.net/_image/skin/list/bulletArticleList.gif) no-repeat left center;這樣的語法!
另外還要加上一段padding-left: 20px;是要讓標題文字距離左側留白20px個空間來顯示小圖示。所以需要逐一去改這些與標題相關的設定!我已經整理好了,如果是套用原本舊版所設定的小圖示的部落客,可以直接將下面這一段語法[紅色字的部份]Copy貼到你的新的自定樣式語法的最後面,因為後面的定義會蓋過前面的設定,所以就可以不用去改原本的設定,這樣改起來會快一點
/* 兩側欄位標題小圖示 ---- 2009-11-09 狗貓Modify*/
/* 關於我的小圖示 */
.pTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/bulletPersonal.gif) no-repeat left center;
   padding-left: 20px;
}

/* 文章分類的小圖示 */
.categoryTitle{
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletCategory.gif) no-repeat left center;
   padding-left: 20px;
}
/* 日曆的小圖示 */
.calendarTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletCalendar.gif) no-repeat left center;
   padding-left: 20px;
}
/* 搜尋文章*/
.searchTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletSearch.gif) no-repeat left center;
   padding-left: 20px;
}
/* 我的哈拉室*/
.chatTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletChat.gif) no-repeat left center;
   padding-left: 20px;
}
/* 已建立的日誌*/
.bloglistTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletBlogList.gif) no-repeat left center;
   padding-left: 20px;
}
/* 訂閱電子報*/
.epaperTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletEpaper.gif) no-repeat left center;
   padding-left: 20px;
}
/* 自由欄位*/
.customTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletCustom.gif) no-repeat left center;
   padding-left: 20px;
}
/* 日誌使用資源*/
.resourceTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletBlogResource.gif) no-repeat left center;
   padding-left: 20px;
}
/* 留言塗鴉版*/
.paintTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletPaint.gif) no-repeat left center;
   padding-left: 20px;
}
/* 日誌背景音樂的小圖示 */
.BackgroundMusicTitle {
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletMusicBox.gif) no-repeat left center;
   padding-left: 20px;
}
/* 最新文章的小圖示 */
.articleTitle{
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletArticleList.gif) no-repeat left center;
   padding-left: 20px;
}
/* 最新留言的小圖示 */
.messageTitle{
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletMessageList.gif) no-repeat left center;
   padding-left: 20px;
}
/* 參觀人次統計的小圖示 */
.countTitle{
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif) no-repeat left center;
   padding-left: 20px;
}
/* 我的訂閱的小圖示 */
.rssrollTitle{
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletRssRoll.gif) no-repeat left center;
   padding-left: 20px;
}
/* 日誌評價的小圖示 */
.rankTitle{
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletRank.gif) no-repeat left center;
   padding-left: 20px;
}
/* 已建立的相簿的小圖示 */
.albumTitle{
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletAlbum.gif) no-repeat left center;
   padding-left: 20px;
}
/* 最愛連結的小圖示 */
.linkTitle{
   background: transparent url(
http://s.blog.xuite.net/_image/skin/list/bulletLink.gif) no-repeat left center;
   padding-left: 20px;
}
/* 我的發燒文  列表小標示*/
.hotArticleTitle {
   background: transparent url(
//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/28203049/14.gif) no-repeat left center;  
   padding-left: 20px;
}
/* 留言版的小圖示 */
.gbookTitle {
   background: transparent url(
http://img.xuite.net/portal/common/icons/gbook.gif) no-repeat left center;
   padding-left: 20px;
}
/* 我的親友團的小圖示 */
.myChannelTitle {
   background: transparent url(
//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/28203049/13.gif) no-repeat left center;
   padding-left: 20px;
}
/* 最愛日誌的小圖示 */
.LoveBlogTitle {
   background: transparent url(
http://img.xuite.net/portal/common/icons/blog.gif) no-repeat left center;
   padding-left: 20px;
}
/* 我的好友、我的好友樹的小圖示 */
.friendTitle {
   background: transparent url(
http://img.xuite.net/portal/common/icons/friend.gif) no-repeat left center;
   padding-left: 20px;
}

 

以上是我的修改心得,印象中就是改過這些地方就完成了。如有遺漏我會再補,再修改這篇文。也歡迎留下你修改的心得,彼此交流一下啦。

對了,這一篇沒有講只有兩欄[就是只有左欄與中間欄,中間欄與右欄]的位置調整法,我想我後續會再改我之前設計的版形,一定會遇到這些Case,會再跟大家講心得的。我猜,以我前面講的方式來擺放的話,應該都不是問題,精神就是左右欄都靠左放,中間欄靠右邊放,注意它們的距離左邊或右邊的距離就可以了!

P.S.另外要提醒大家,瀏覽器有cache暫存問題,所以我換公司電腦看我已經改完正常的版時,它還是會是亂的喔!所以要按一下Ctrl-F5,強制重新整理頁面資料!

P.S.改成新版的過程可以按確定或是預覽, 看它的成效如何, 如果一直改還是不成功, 可以按
下面這張圖裡面的[還原舊版型]按鈕, 就會回復正常了

當然在恢復舊版型前, 你也可以將改一半的語法先存到暫存區裡, 下次再去呼叫出來接著改!!



隨機文章


  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。