X-Space的模板修改。[2.0版]
本文只介紹♁六號棺材♁v.3.6的CSS語法部分。（大致上和舊版的不會差太多。）
進入空間管理，點選『高級CSS編輯』。
/*頁面捲軸，顏色請自行修改*/
html {
scrollbar-arrow-color: #FFF;
scrollbar-face-color: #000;
scrollbar-darkshadow-color: #FFF;
scrollbar-highlight-color: #000;
scrollbar-3dlight-color: #FFF;
scrollbar-shadow-color: #000;
scrollbar-track-color: #000; }
/*頁面設定，間距、字體、背景、游標等等皆在此設定*/
body {
margin: 0;
padding: 0;
font: 12px Georgia, Helvetica, Arial, sans-serif;
color: #C0C0C0;
background: #000 url(背景圖片網址);
cursor: url(游標圖片網址);
text-align: center; }
/*表單相關的字體設定*/
input, textarea, select, button {
color: #000;
font: 12px Helvetica, Arial, sans-serif; }
/*容器的寬度、框線、背景等之設定，數據請自行修改*/
#wrap {
margin: 0px auto;
text-align: left;
width: 777px;
border: 2px solid #2E2E2E;
background: #000;
overflow: hidden; }
/*頂部banner的背景、高度等設定*/
#header {
background: #000 url(背景圖片網址) no-repeat;
height: 200px;
margin-bottom: 0px; }
/*空間名稱的字體設定，數據請自行修改*/
#spacename * {
font: 12px Helvetica, Arial, sans-serif;
font-weight: bold;
color: #7B0000; }
/*空間名稱的位置*/
#xspace-spacename {
margin-left: 110px;
top: 20px;
width: auto; }
/*公告文字的背景及字體顏色*/
#announcement {
border: none;
background: #000 url(背景圖檔網址) no-repeat 0;
color: #C300A2; }
/*選單的文字設定，數據請自行修改*/
#menu {
background: none;
width: auto;
height: 28px;
margin-top: 83px;
line-height: 28px; }
#menu ul {
margin: 0; }
#menu li a {
color: #FFBF00;
padding: 0;
height: 28px;
background: none !important; }
#menu a:hover {
color: #7B0000;
text-decoration: none;
background: none !important; }
#menu li a:hover {
color: #C40000;
text-decoration: none;
background: none !important; }
/*側邊欄位的相關設定，數據請自行修改*/
.sidearea {
background: #000;
padding: 5px;
overflow: hidden; }
.xspace-blocktitle {
overflow: hidden;
font-size: 12px;
height: 28px;
line-height: 32px;
padding-left: 0.5em; }
.sidearea .xspace-blocktitle {
background: #181818;
color: #FFF;
border: 1px solid #464646;
height: 24px;
line-height: 26px;
padding-left: 0.8em; }
/*主欄位的相關設定，數據請自行修改*/
#mainarea {
padding: 5px; }
#mainarea .xspace-blocktitle {
background: #000;
border: 1px dotted #C40000;
color: #C40000;
height: 26px;
line-height: 28px;
padding-left: 1.0em; }
/*連結字體的相關設定，數據請自行修改*/
a {
color: #C0C0C0; text-decoration:none; }
a:visited {
color: #C0C0C0; text-decoration:none; }
a:hover {
color: #C40000; text-decoration:none; }
/*文章列表*/
.xspace-list2col li {
border-bottom: 1px dotted #666;
width: 99%; }
/*用戶菜單的設定*/
#xspace-action li {
margin-left: 18px;
letter-spacing: 3px; }
/*日曆的設定*/
#xspace-calendar td {
color: #666; }
/*我的最新圖片*/
.xspace-imgstyle { background: #000; border-color: #464646; }
/*圖片的邊框*/
#xspace-avatar img {
border: 1px solid #C0C0C0;}
/*側邊選單的設定*/
#xspace-aplist .xspace-ontop td, table.xspace-page td.xspace-current {
color: #FFF;
border: 1px solid #464646;
background: #000; }
/*頁數*/
table.xspace-page a, table.xspace-page td.xspace-totlerecord, table.xspace-page td.xspace-totlepages, .xspace-listtab a {
background: #181818; }
/*文章標題的字體顏色*/
.xspace-title {
color: #C40000; }
/*文章的發布日期、時間、心情、天氣等字體設定*/
.xspace-smalltxt, .xspace-smalltxt a {
font: 12px Helvetica, Arial, sans-serif;
color: #464646;
text-align: right; }
/*文章列表的標題文字*/
.xspace-entrytitle a {
color: #C40000; }
/*文章列表的統計文字*/
.xspace-itemlinks {
text-align: right; }
雖然打了這篇教學文章但又好像根本沒教的感覺:p
反正，新版和舊版的差別就是部分id或class的名稱有所改變，然後，整個後台的管理變得非常簡易，基本上也用不到CSS來撰寫整個部落格的模板樣式，除非是要針對很小很小的地方加以修飾，否則不需要懂這篇文章在寫啥....
其他相關問題請提出，後續補充。
TAG: X-Space
標題搜索
日曆
|
|||||||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
| 1 | 2 | 3 | 4 | 5 | |||||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 | |||
| 13 | 14 | 15 | 16 | 17 | 18 | 19 | |||
| 20 | 21 | 22 | 23 | 24 | 25 | 26 | |||
| 27 | 28 | 29 | 30 | 31 | |||||
我的存檔
數據統計
- 訪問量: 47646
- 日誌數: 322
- 圖片數: 60
- 影音數: 1
- 書籤數: 69
- 建立時間: 2006-05-27
- 更新時間: 2008-07-10
