修改天空部落格CSS樣式

蘋果曰：

基本上在樣版設計小幫手中能修改的相關內容就不提了！有這小幫手還不拿來用就太對不起自己了唄！ 下面這些都是蘋果在做自己的部落格時就順便整理上來的（應該只有我自己看的懂）∼所以如果想要轉載散佈此文前請先閱讀並遵循 Creative Commons License 的著作權聲明唷！ 這樣才是乖寶寶！

                                                                      

常用語法說明：語法中有看到相同的我就不贅述嚕！

font-family:標楷體 字型
font-size :12pt 字體大小
font-weight: bold 粗體字
line-height:3em  行高
text-decoration: underline 文字有底線
text-decoration: none  文字無底線

text-align: left

文字對齊方式
color :#D1A4FF  顏色
margin：5px 外距
padding：5px 內距
background-color:#DDEEFF 背景顏色
background: url(http://pics.webs-tv.net/themes/alley/images/bg.gif)
　		 背景圖片
border-color: #FF9297 框線顏色
border-style: dotted 框線樣式
border: 5px 框線粗細
width：215px 寬度
height：30px 高度
top 上
bottom 下
left 左
right 右
center 中

：修改語法方式

：天空部落CSS樣式表．快速索引相關內容（點擊展開文字．請用IE瀏覽器）：


============================
整體設定
============================

超連結顏色
a:link, a:visited { color: #376098; text-decoration: none;}
a:hover, a:active { color: #4F8ADC; text-decoration: underline;}
捲軸顏色
HTML
{
SCROLLBAR-FACE-COLOR: #93C53E;
SCROLLBAR-HIGHLIGHT-COLOR: #F9ED01;
SCROLLBAR-SHADOW-COLOR: #FEFF99;
SCROLLBAR-3DLIGHT-COLOR: #F9ED01;
SCROLLBAR-ARROW-COLOR: #F9ED01;
SCROLLBAR-TRACK-COLOR: #93C53E;
SCROLLBAR-DARKSHADOW-COLOR: #FEFF99;
}
個人資料圖片設定
img.profile
{
border: 0px ;
margin-bottom: 5px;
}
分隔線設定
hr
{
height: 1px;
color: #808080;
text-align: center;
width: 99%;
}


Top
============================
上面大區塊
============================

隱藏版面廣告
#p_id_11,#p_id_31,#companyBar,#copyright
{DISPLAY: none;}
天空連結設定
div#companyBar {
position: absolute;
top: 14px;
right: 14px;
z-index: 20;
}
#companyBar span.logo
{
position: absolute;
background: url(../../images/logo_w.gif) no-repeat;
width: 19px;
height: 12px;
left: -25px;
}
div#companyBar a {
color: #fff;
}
部落格標題設定
#banner div.bannerTitle
{
position: absolute;
top: 50px;
right: 20px;
font-size: 26px;
font-weight: bold;
}
#banner div.bannerTitle a
{
color:#fff;
}
部落格描述設定
#banner div.description {
position: absolute;
top: 90px;
right: 20px;
}
廣告連結設定
#adText
{
position: absolute;
top: 142px;
right: 12px;
}
#adText a
{
color: #fff;
}
頻道選擇
#navBar
{
position: absolute;
left: 14px;
top: 141px;
font-weight: bold;
}
#navBar a
{
color:#fff;
border: 0;
}
登入連結設定
#navBar #linkLogin {
position: absolute;
top: -125px;
left: 0;
color: #fff;
font-weight: normal;
}
#navBar span.navLink {
display: block;
float: left;
}
#navBar span.navLink span {
display: none;
}
#navBar span.navLink a {
display: block;
padding-bottom: 5px;
margin-right: 20px;
}
#navBar span.navLink a:hover {
border-bottom: 3px solid #ddd;
text-decoration: none;
}

Top

============================
中間的大區塊
============================

文章日期
#articleBlock div.articleTopTitle
{
color: #6c6063;
font-family: georgia, verdana, arial;
font-size: 18px;
}　
文章標題設定

文章標題/引用/留言/發表你的留言 這些文字樣式會一起更改
div.articleTitle
{
font-size: 16px;
font-weight: bold;
}		 標題大小與粗細
div.articleTitle a:link,
div.articleTitle a:visited {
color: #3E3E3E;
border: 0;
}		 標題顏色
div.articleTitle a:hover,
div.articleTitle a:active {
text-decoration: underline;
}		 滑鼠滑過標題的顏色與樣式
.articleTitleDiv{
background-image: url(http://only/love/beyond.gif);
}		 文章標題加背景圖
文章標題下面的小分類與日期時間
div.articleCategory
{
margin-left: 5px;
color: #808080;
border-bottom: 1px solid #E3E3E3;
padding-bottom: 3px;
}		 如果不想要下面那條橫線把

border-bottom: 1px solid #E3E3E3;

這段刪除
.articleCategoryDiv{
font-family: "新細明體";
font-size: 10pt;
color: #000000;
}		 設定文字樣式
文章摘要設定
div.articleSummary {
height:100%;
padding-left: 8px;
}
文章內文設定
div.articleBody {
height:100%;
padding-left: 8px;
font-size: 15px;
line-height: 1.6em;
}
  文章發表資訊設定
div.articleLink {
border-bottom: 1px solid #C9C9C9;
padding: 10px;
}		 如果不想要下面那條橫線把

border-bottom: 1px solid #C9C9C9;

這段刪除
div .articleLinkDiv{
font-family: "新細明體";
font-size: 10pt;
color: #000000;
}		 設定文字樣式
div.rightPage
{
text-align: center;
margin-bottom: 10px;
}		 |主頁| 兩字的樣式
input{
BACKGROUND: #000000; COLOR: #6699ff;
}		 複製引用鈕與旁邊引用網址的底色與字色
表單內容與表單輸入
input.text, textarea {
font-size: 12px;
color: #6F6F6F;
font-family: Arial, 新細明體, sans-serif;
border: 1px solid #999;
}		 就是發表你的留言下方的內容框

與輸入驗證碼的框框
 確定/取消按鈕
input.btn {
padding: 3px;
font-size: 12px;
font-family: sans-serif, arial;
border: 1px solid #B2B2B2;
background: #E6E6E6;
color: #6F6F6F;
}
設定板主回覆（文章留言的板主回覆）
.bmreply
{
color:red;
border: 1px dotted black;
background-color: #fff;
padding: 10px;
}		 red：回覆的字色

1px：邊框粗細

black：邊框顏色

fff：板主回覆區背景色

Top

============================
個人資料
============================

個人資料
#articleBlock #profile div.title
{
background-color: #ddd;
font-weight: bold;
height: 16px;
padding: 5px 26px;
color: #666;
border: 1px solid #bbb;
margin-top: 10px;
margin-bottom: 10px;
}		 個人資料頁的大項目標題設定（部落格資料/個人介紹/自我介紹）
#articleBlock #profile th{
background-color: #eee;
padding: 5px;
width: 90px;
font-weight: normal;
text-align: center;
}		 個人資料頁的小標題設定（部落格分類/暱稱/性別欄）
#articleBlock #profile td{
background-color: #eee;
padding: 5px;
width: 90px;
font-weight: normal;
text-align: center;
}		 個人資料頁的內容設定（E.ting/女/台北縣）
#articleBlock #profile div.introduce
{
line-height: 22px;
}		 個人資料頁的自我介紹內容文字

============================
留言板
============================

留言板我要留言這四個字
#articleBlock div.childMenu
{
font-size: 18px;
font-weight: bold;
line-height: 30px;
color: #826C55;

}

Top

============================
旁邊區塊設定
============================

旁邊大區塊顯示捲軸
#sideBlock{overflow: scroll;} 旁邊大區塊要設定高度才會顯示
旁邊小區塊標題設定
#sideBlock div.sideTitle,
#sideBlock span.sideTitle
{
font-size: 12px;
padding-top: 10px;
padding-bottom: 4px;
padding-left: 4px;

color:#3E3E3E;
letter-spacing: 2px;
font-weight: bold;
}
　		 如果不想要下面那條橫線把

border-bottom: 1px solid #C9C9C9;

這段刪除

　
旁邊小區塊內容設定
#contentBlock div.sideContent
{
line-height: 18px;
padding: 7px;
}		 旁邊小標題下的內容的文字樣式
隱藏系統公告
#systemAnnounce{
display: none;
}
隱藏搜尋
#boxSearch{
display: none;
}
隱藏日曆
#boxCalendar{
display: none;
}
訂閱浮動視窗
#navmenu li ul {
display: none;
position: absolute;
padding-top: 5px;
color: #444;
top: 1em;
left: 0;
}		 標題文字設定
#navmenu li ul li.title
{
text-align: center;
background: #ccc;
}		 標題背景設定
#navmenu li ul li
{
clear: left;
width: 130px;
background: #FFFFFF;
padding-top: 5px;
}
　		 選單背景設定
#navmenu li ul li a:hover
{
background: #000000;
color: #FFFFFF;
}		 選單滑鼠滑過文字設定
好友列表
.friendlist {
float: left;
height: 150px;
width: 120px;
text-align: center;
margin: 4px;
padding: 4px;
}		 設定好友列表樣式
.friendlist .buddyicon img{
border: 1px solid #000000;
}		 好友列表圖框樣式

Top

 ============================
底層的大區塊(版權宣告)
============================

底層的大區塊
div#copyright {
clear: both;
border-top: 1px solid #B0B0B0;
background: #fff;
letter-spacing: 0.15em;
text-align: center;
color: #B0B0B0;
padding: 8px;
}		 copyright(底層大區塊) 設定
div#copyright a:link,
div#copyright a:visited {
color: #B0B0B0;
border-bottom: 1px dotted #B0B0B0;
}		 連結顏色
div#copyright a:hover,
div#copyright a:active {
color: #000;
border-bottom: 1px dotted #000;
text-decoration: none;
}		 滑鼠滑過連結文字設定
div#copyright img {
margin-left: 16px;
margin-right: 2px;
}		 圖片
span.highlight {
font-weight: bold;
}		 行高

============================
相簿設定
============================

 相簿一覽
div.usersAlbumTitle,
span.usersAlbumTitle
{
color: #2E2E2E;
font-size: 16px;
letter-spacing: 2px;
font-weight: bold;
line-height: 30px;
margin-left: 10px;
}		 誰誰誰的相簿標題設定
div.usersAlbumTitle a:link
{
color: #c93;
}		 滑鼠滑過誰誰誰的相簿標題文字設定
#contentBlock #bodyFrame div.albumTitle
{
width: 100%;
color: #955;
height: 14px;
font-size: 13px;
text-align: center;
}		 每本相簿標題設定
#bodyFrame div.date
{
color: #aaa;
}		 每本相簿發表時間設定

　

相簿旁的資訊

#adFrame div.rightColumn
{
padding: 4px;
margin: 7px 1px 8px 1px;
padding-bottom: 5px;
letter-spacing: 1px;
}		 相簿旁邊資訊設定
#adFrame div.rightTitle
{
font-size: 12px;
padding-top: 10px;
padding-bottom: 4px;
padding-left: 2px;
border-bottom: 1px solid #C9C9C9;
color:#3E3E3E;
letter-spacing: 2px;
font-weight: bold;
}		 相簿旁邊標題設定
#adFrame div.rightContent
{
line-height: 18px;
padding: 9px;

}		 相簿旁邊內容區塊設定

　

相片一覽
#rightBlock
{
height:100%;
float: left;
text-align: left;
margin: 2px;
margin-left: 15px;
overflow: hidden;
}		 相片大區塊設定
div.bigNote
{
color: #aaa;
}		 所在分類設定
td.albumShow
{
text-align: center;
height: 120px;
width: 125px;
color: #2e2e2e;
}		 相片內頁相框設定
td.albumDes
{
text-align: center;
width: 125px;
border-bottom: 1px dotted #e5e5e5;
color: #808080;
}		 相片名稱
.statistic
{
margin:15px 0 15px 0;
text-align: right;
}		 相簿當日人氣設定

　

檢視單張相片
#p_id_12, #p_id_13{display: none;}
 隱藏相簿中廣告
div #mainFrame2{
background: #ffffff;
}		 相簿整頁背景
#contentBlock2{
background: #ffffff;
}		 基本主體相簿背景
div.pageCtrl,
span.pageCtrl
{
font-size: 12px;
text-align:right;
}		 相簿連續播放... 快速鍵...
hr .albumsep｛
color: #FF9297;
｝　		 改相簿分隔線顏色
div.albumTitle
{
width: 100%;
color: #955;
height: 14px;
font-size: 13px;
text-align: center;
}		 大相片名稱
div.albumPhoto
{
text-align: center;
}		 大相片展示區塊設定
div.albumPhoto img {
border: 1px solid #333;
}		 大相片邊框
.albumCache{
 border-color: #FF9297;
 border-style: solid;
 border: 1px;
}
改變天空部落觀看單張相片時的下方縮圖框線顏色的方法
table.albumCache
{
margin-top: 20px;
margin-bottom: 20px;
}		 大相片下面預覽小相片全部展示區塊設定
td.albumCache
{
color: blue;
height: 125px;
width: 125px;
font-size: 13px;
}		 大相片下面預覽小相片個別區塊設定
td.albumCache img {
border: 1px solid #2e2e2e;
}		 大相片下面預覽小相片個別區塊相片邊框設定

#contentBlock2
{WIDTH: 780px; POSITION: relative; TEXT-ALIGN: left;padding: 20px;}
讓相片的留言位置別緊貼邊緣的方法
div.imageBody
{
font-size: 13px;
line-height: 22px;
}		 留言區塊(不包含標題)
div.albumMenu
{
font-size: 18px;
font-weight: bold;
line-height: 30px;
color: #2e2e2e;

}		 留言與發表你的回應的文字樣式
div.commentBody {
font-size: 13px;
padding: 8px 0 8px 0;
}		 已發表的留言內容的文字樣式

Top