200911041200《公告》日誌新版日誌CSS樣版

Dear Xuiter:
 
  為了讓大家閱讀瀏覽日誌時有更順暢的瀏覽速度,我們修改了日誌部分網頁架構,新版的架構將會優先呈現日誌文章的內文,避免邊欄或自由欄位的內容,影響文章呈現速度 。因應日誌網頁架構修改,對於新版日誌更動部份提出說明如下。
 
還請大家多多給予支持與指教。
感謝大家的支持!
 
Xuite.net 98.11.01

 


 

注意事項
  • 不論使用的日誌版型是自訂CSS樣式或使用系統預設樣式,在日誌系統更新新版CSS樣式之後,不影響平常的瀏覽日誌與文章閱讀
  • 新版CSS樣式上線後,將取消舊有的系統預設樣式,會有新版佈景樣式提供大家套用。
  • 若是使用自訂CSS樣式功能的日誌格友,日誌系統在您進行升級新版CSS動作時,將會為您先進行備份,並提供一組新的CSS樣式表方便進行修改與調整,或是也可以選擇已備份的舊版CSS進行修改
  • 套用新版日誌佈景主題的網友,目前尚未提供 樣式DIY精靈 功能 (舊版除外),由於推出新日誌架構緣故,我們需要觀察評估大家套用新版日誌佈景後的使用情形,以及所遇到使用上的疑問,在匯集大家的意見後進行 樣式DIY精靈 功能更新。

 


 

自訂CSS樣式
由於日誌CSS版本更新,在使用 自訂CSS樣式 功能時,建議可選擇預設新版的CSS進行套用,或是仍使用舊版的CSS來調整編輯。
 
步驟 ア:開啟 自訂CSS樣式 功能頁面,有加註提示警語『歡迎使用新版自訂CSS,如果自訂完成按下確認送出後,就直接升級為新版,請修正原本的自訂CSS,不然,會版型大亂喔 !!』 (如下圖)


步驟 イ:也有選擇使用預設新版的CSS或仍使用舊版CSS的選項 (如下圖)


 


 

匯入預設新版CSS
選擇確定使用匯入預設新版CSS功能時,日誌系統會提供預設的新版CSS樣式,作為套用。
 
步驟 ア:開啟 自訂CSS樣式 功能頁面 (如下圖)


步驟 イ匯入預設新版CSS 選擇 確定 選項 (如下圖)


步驟 ウ:編輯CSS樣式會匯入預設新版CSS (如下圖)


 


 

使用舊版未更新的CSS
選擇取消使用匯入預設新版CSS功能時,日誌系統帶入原來舊版的自訂CSS編碼。
 
步驟 ア:開啟 自訂CSS樣式 功能頁面 (如下圖)


步驟 イ匯入預設新版CSS 選擇 取消 選項 (如下圖)


步驟 ウ:編輯CSS樣式會帶入使用舊版未更新的CSS (如下圖)


 


 

修改暫存區舊版的備份檔CSS
在更新舊版的CSS過程當中,可使用暫存區日誌系統儲存的自訂CSS備份檔選項,來還原未更新的舊版CSS。
 
步驟 ア:開啟 自訂CSS樣式 功能頁面 (如下圖)


步驟 イ:選擇 暫存區的樣式自訂CSS備份檔 (如下圖)


步驟 ウ:編輯CSS樣式會帶入使用舊版未更新的CSS (如下圖)


 


 

還原舊版型
在更新舊版的CSS過程當中,若修改更新自訂CSS備份檔出現疑問,可使用點選功能來還原未更新的舊版CSS。
 
在選擇套用 自訂CSS樣式 功能樣式後,不可以直接點選 確認送出 (如下圖)


原本正常的位置 現在會出現側邊欄往下移到中間欄mid之下
※ 感謝狗貓大人提供教學及圖片,也請大家參考狗貓的研究教學。
  [98/11/04新版CSS]新版Blog CSS的幾個差異點分析心得


必須要在修改更新完成CSS後,才可以點選 確認送出 鈕 (如下圖)


編寫更新CSS過程中若遇到疑問,可使用還原舊版型功能回復成舊版日誌版型 (如下圖)


 


 

新版架構更新調整部份
依照 日誌頁面 & CSS 設定 的更動,對更新的架構進行說明
 
 
日誌頁面 - 更改 DOCTYPE 編寫方式
原先 DOCTYPE 的定義不完全
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

改為 依照w3c的規範將 DOCTYPE 定義完全
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 
CSS 設定 - 增加 ul、li、h1、h2、h3 定義
ul { padding: 0px; margin: 0px; }
li { list-style-position:inside; }
h1, h2, h3 { padding: 0px; margin: 0px; font-weight: normal; }

 
日誌頁面 & CSS 設定 - #mid 先出 再出 #linksLeft 和 #linksRight
新版日誌架構會先讀取文章區域(#mid),在讀取左右欄位區域(#linksLeft、#linksRight),避免邊欄或自由欄位的內容,影響文章呈現速度

CSS 更動部份:
[兩欄-左欄式]
#linksLeft { margin: 距左邊和上面的距離; float: left; display: inline; }
#linksRight { display: none; }
#mid { padding: 可維持原先的; width: 改為固定寬度(必須大於650px); float: right ; margin: 原先的拿掉; margin-right: 距右邊距離 ; display: inline;}
[兩欄-右欄式]
#linksLeft { display: none; }
#linksRight { margin: 距右邊和上面的距離; float: right; display: inline;}
#mid { padding: 可維持原先的; width: 改為固定寬度(必須大於650px); float: left ; margin: 原先的拿掉; margin-left: 距左邊距離; display: inline;}
[三欄式]
#linksLeft { float: left; left: 距container左側的距離; margin: 可維持原先; }
#linksRight { float: left; left: 距linsLeft的距離; margin: 可維持原先; position: relative; }
#mid { position: relative; float: right; width: 寬度; right: 距container右側的距離; padding: 可維持原先; }

 
日誌頁面 & CSS 設定 - .blogname <div> 改成 <h1>
原先定義 <div class="blogname">
改為 <h1 class="blogname">

CSS 更動部份:
因為 h1 h2 h3 有預設的 margin & padding,字體預設是粗體,所以有加上定義
h1, h2, h3 { padding: 0px; margin: 0px; font-weight: normal; }

 
日誌頁面 & CSS 設定 - .description <div> 改成 <h2>
原先定義 <div class="blogname">
改為 <h1 class="blogname">

CSS 更動部份:
因為 h1 h2 h3 有預設的 margin & padding,字體預設是粗體,所以有加上定義
h1, h2, h3 { padding: 0px; margin: 0px; font-weight: normal; }

 
日誌頁面 & CSS 設定 - .title <div> 改成 <h3>
原先定義 <div class="title">
改為 <h1 class="title">

CSS 更動部份:
因為 h1 h2 h3 有預設的 margin & padding,字體預設是粗體,所以有加上定義
h1, h2, h3 { padding: 0px; margin: 0px; font-weight: normal; }

 
日誌頁面 - 移除<wptpass>定義

 
日誌頁面 & CSS 設定 - 取消 .sideTitle 裡的 <li> 定義
無法用原先 li 做 icon 的 list-style-image方式,要改用 background 的方式來做 icon

CSS 更動部份 - 例:
.sidetitle{
padding-top: 12px;
padding-left: 50px;
font-weight: bold;
background: url(http://s.blog.xuite.net/_image/skin/windows/279/sidetitle.gif) no-repeat;
........
}
 
日誌頁面 & CSS 設定 - 取消 .commenttitle 裡面的 <li>
無法用原先 li 做 icon 的 list-style-image方式,要改用 background 的方式來做 icon,

CSS 更動部份 - 例:
span.commenttitle{
color: #ac1904;
padding-left: 20px;
background: url(http://s.blog.xuite.net/_image/bulletMessageList.gif) no-repeat;
width: auto;
}

/* 取消 span.commenttitle li 定義 */
span.commenttitle li{
}


 
日誌頁面 - 相關文章 隨機文章 歷史上的今天 <div> 改成 <ul>
原先定義
<div id="articleExt_relate_title">
<div id="articleExt_random_title">
<div id="ArticleTodaySide">

改為
<ul name="articleExt_relate_title">
<ul name="articleExt_random_title">
<ul name="ArticleTodaySide">

 
CSS 設定 - 取消 .blogrank 裡面的 <li> 定義
/* 取消 .blogran li 定義 */
.blogran li{
}


 
日誌頁面 & CSS 設定 - 將 .counter 裡面的 <div> 改成 <span>
原先定義 <div class="counter">
改為 <span class="counter">

CSS 更動部份:
無法用原先 li 做 icon 的 list-style-image方式 ,要改用 background 的方式來做 icon,因為分類字數長度不一定,所以 width: auto; 來設定,移除原先 CSS 裡面 counter 和 mail 很多都有設 height 定義
/*文章瀏覽數*/
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;
}
/*好文轉寄*/
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;
}

 
日誌頁面 - 將 .clouddiv 外的 <ul> 改放到裡面

 
日誌頁面 - 將 .hotArticleSide 加上 <ul>

 
日誌頁面 & CSS 設定 - 取消 .avatar 裡的 <li> 定義
無法用原先 li 做 icon 的 list-style-image方式,改用新的 .avatar 區塊樣式 (如下圖)


 
日誌頁面 & CSS 設定 - 取消 .morebtn 裡的 <li> 定義
無法用原先 li 做 icon 的 list-style-image方式,要改用 background 的方式來做 icon

CSS 更動部份 - 例:
.morebtn{
background: url(http://s.blog.xuite.net/_image/blog037.gif) no-repeat;
width: auto;
padding-left: 20px;
float: right;
}

此外,因為.morebtn float: right,所以要在底下的 posted 加上 clear: both,才不會有版型移位的情形
.posted{
width: 100%;
text-align: right;
color: #999999;
font-family: "細明體";
font-size: 13px;
font-weight: normal;
clear: both;
}

其他有改的地方
/*瀏覽方式切換*/
.ArticleShowMode {
margin-bottom: 10px;
}
/*列表模式 */
.singleArticle{
}
.singleArticle ul{
padding-left: 20px;
}
.singleArticle li{
list-style-position: inherit;
line-height: 200%;
}

 
CSS 設定 - 將 .personallink 改 <ul> 定義 & 原來的 .pfriend .pphoto .pvlog .pboard 改 <li> 定義

#avatarContent { width: 99%; text-align: center; display: block; word-break: break-all; }
#avatarAddMe { width: 96px; height: 2em; margin: 0px auto; }
#avatarAddMe img { float: left; }
#personalLink { height: 6em; width: 94px; padding: 0px; margin: 10px auto; display: block; }
#personalLink li { list-style-type: none; float: left; height: 1.7em; margin: 0px 4px 0px 0px; padding: 2px 0px 0px 16px; 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; }

 
日誌頁面 - 修改 .rank & .bookmark 定義方式
原先定義
<div><span class="rank">
<div><span class="bookmark">

改為
<div class="rank">
<div class="bookmark">

/* 2009/08 相關文章 */
.articleExt {
clear: both;
padding-top: 10px;
border-top: 1px solid #cccccc;
font-size: 13px;
}
/* 2009/09 推推 bookmark 區塊 */
.bookmark{
float: right;
}

 


 

回應
關鍵字
活動小天使
    沒有新回應!





Powered by Xuite