原文:
http://patrick.hardcorecoders.net/tutorials/前言這是教您如何製作SMF論壇的佈景主題教學. 在閱讀這篇教學前請確定您有以下項目:
- 安裝於支援PHP程式和SQL的SMF論壇.
- 16進位的顏色表格.
單元 1基本操作開始製作佈景前, 請先安裝SMF論壇或到已安裝完成的論壇裡. 首先到您的管理中心裡面然後到論壇設定裡的佈景及配置設定.
然後到安裝新佈景主題. 選擇 "將預設佈景複製成新的佈景:" 然後給個新的名稱. 我使用的範例名稱是 GOA. 然後點安裝.
將新的佈景安裝完成之後您可以修改佈景的 CSS (Cascading Style Sheet), CSS是用來設定網頁顏色, 字型, 及樣式. 在修改佈景的CSS樣式前請到您之前安裝新佈景的頁面, 在"佈景設定"區裡選您新安裝的佈景.
在這裡您會看到新安裝的佈景的配置設定. 您可以選擇其他的選項來修改您的佈景, 但是現在先點選"修改 style.css 檔 (顏色, 字型等等.)", 在"編輯佈景"裡面.
單元 2CSS如同單元1裡所描述的, CSS是用來設定網頁顏色, 字型, 及樣式的網頁語言. 您現在應該在修改CSS的頁面裡.
我現在會大概的介紹CSS的設定及用途. 以下看到的CSS樣式都會出現在SMF論壇提供的style.css檔案裡.
/* Normal, standard links. */
a:link
{
color: #000000;
text-decoration: underline;
}
a:visited, a:hover
{
color: #323232;
text-decoration: underline;
}
您在圖片裡看到的是用來控制連結的顏色及風格. 裡面的CSS表示網頁裡的連結顏色為黑色, 和使用底線風格. 然後已點過和滑鼠移上的連結為#323232顏色, 和使用底線風格.
/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
font-weight: bold;
color: #cc3333;
text-decoration: underline;
}
上面看到是用來設定巡覽連結的樣式. 您可以看到上面所顯示的巡覽連結及點過的連結都是以黑色和無底線來代表. 上面的 "Welcome to SMF!" 連結是用滑鼠移上的樣式來代表. 滑鼠移上的樣式裡也顯示用粗體, 使用底線及黑色字體.
我要跳過 "Table should show empty cells too." 因為現在越來越少人用表格來做網頁了
/* By default (td, body..) use Tahoma in black. */
body, td
{
color: #000000;
font-size: small;
font-family: Tahoma, arial, helvetica, serif;
}
您在上面看到的是非常重要的CSS樣式. 上面的樣式是用來設定論壇首頁的文字, 標頭及註腳, 和論壇裡的主要文字. 您可以看到的預設值為黑字, 小字型, 及用Tahoma, Arial, Helvetica, and Serif fonts為字型.
[Note: 為了顯示效果, 我把預設的顏色(#000000)改為(#01D901)].
body
{
background-color: white;
margin: 0px;
padding: 0px;
}
上面的CSS樣式可能對您沒有什麼太大用途. 上面的樣式是用來設定論壇後面的顏色. 因教學效果, 我把背景顏色從白色改成#FD8739, 邊界設為10. 預設的邊界是0和透明的背景顏色.
/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
font-size: 9pt;
color: #000000;
font-family: Tahoma, arial, helvetica, serif;
}
上面的樣式是用來改變輸入框, 文字區, 及按鈕的文字顏色和大小. 上面的圖片可以看的到. 建議您最好不要改變字型和文字大小, 原因是這樣的設定對顯示和效能比較好. 因教學效果, 我把文字顏色改為#02D202.
下面的 "Checkboxes shouldn't have a background color." 可以不用改變. 這是最基本的功能, 通常使用預設的就可以了.
/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 8pt;
font-weight: normal;
color: #000000;
font-family: Tahoma, arial, helvetica, serif;
}
上面的樣式是用來改變選擇框的文字大小, 字型及顏色. 如果您不了解網頁設計, 選擇框只是所謂的下拉式選框. 下拉式選框可以讓您有多種選擇. 因教學效果, 我把字型顏色改為#02D202.
/* Standard horizontal rule.. */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}
接下來的樣式可能較難以捉摸, 但是其實非常的簡單. 水平線通常會出現在文章裡, 以及有
BBC碼的訊息裡. 改變水平線的高度和邊線應該不難, 但是最好用預設的就可以了. 因教學效果, 我把顏色和背景改為#FE2CCA.
/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #C3B8D0;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
}
上面的是用來改變引言的樣式. 為了比較清楚的顯示出來, 引言的文字顏色是黑色, 背景是#C3B8D0, 較小的邊線, 填補邊框只有 1px, 還有字型大小則是最小的設定. 預設的邊線, 邊框, 及字型大小應該可以不用更改. 不過您可以把背景改成和您的佈景相近的顏色.
/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #cccccc;
border: 1px solid #000000;
padding: 1px;
font-family: "courier new", helvetica, "times new roman", serif;
font-size: x-small;
width: 99%;
margin: 1px auto 1px auto;
white-space: nowrap;
overflow: auto;
}
這是用來改變程式碼的樣式. 您可以看到上面的PHP語法的顏色是紅色. 這項功能對常發佈程式碼的論壇很有幫助. 如果您看不懂上面的程式碼, 那是用來寫PHP的語法. 如果語法的程式無法解釋發佈的程式法, 他就會用黑色來代表, 發佈區的佈景為灰色, 黑色的邊框和填補邊框為 1px, 字型為Courier New, Helvetica, Times New Roman, and Serif, 最小的字型大小, 寬度為99%, 邊界為 1px, 不自動換行, 及自動更改上限溢位. 最後的小註解, 我沒有改變上面的圖示.
/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
}
上面的樣式是用來改變引言跟程式碼的標題. 如同上面所寫的, 文字顏色是黑色, 不使用底線, 普通的文字樣式, 粗體字型, 及文字大小設定為特小. 因教學效果, 我把顏色和背景改為#FE2CCA.
下一個部分可以不用管他.
/* /me uses this a lot. */
.meaction
{
color: red;
}
上面的樣式是給標準指令的, 像IRC跟聊天室常使用的 "/me" 指令. 這個樣式可以改變 "/me" 指令的顏色. 要用這個指令只需在論壇的文章裡打入, "/me (訊息)" 然後像上面一樣出現 *(名稱) (訊息).
/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}
接下來的是用來改變文章區的寬度. 預設值是96%, 但是因教學效果, 我把他改為50%.
/* Highlighted text - such as search results. */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}
當你搜尋某個字的時候, 搜尋到的字會以高亮度顯示. 預設值是以高亮度顯示結果, 黃色的背景, 和以粗體顯示.
/* Alternating backgrounds... */
.windowbg
{
color: #000000;
background-color: #E1E1E1;
}
.windowbg2
{
color: #000000;
background-color: #F0F0F0;
}
如果你想改變你論壇的佈景, 你應該先改變上面的樣式. 上面的樣式可以用來改變兩篇文章的背景, 和幾乎全部的表格的文字顏色. 在論壇首頁, 主題裡, 文章裡, 個人資料裡, 或其他地方你都可以看到表格. 因教學效果, 我把 windowbg 的背景改為 #057EAB 及 windowbg2 的改為 #FE992C. 改變上面的樣式會把你的論壇改的非常不同, 所以最好考慮清楚.
/* Titles - such as table headers. */
.titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited
{
color: white;
font-style: normal;
background-color: #6B8EAE;
}
.titlebg a:hover
{
color: #dfdfdf;
}
接下來的是改變表格標題的樣式, 像文章上方的標題和連結. 基本上就是出現在表格最上方的地區. 像上面出現的樣式一樣, 使用的文字和連結顏色是白色, 普通字型, 和藍色的背景顏色. 在加上滑鼠移上的顏色是灰色. 因教學效果, 我把標題顏色從白色改為黑色和背景顏色從#6B8EAE(深藍色)改為#1FA3FF(亮藍色).
/* The category headers, page indexes, and such things - catbg2 is used for "new" posts. */
.catbg, .catbg2
{
font-weight: bold;
background-color: silver;
color: #000000;
}
.catbg
{
background-image: url(images/titleback.gif);
}
.catbg2
{
background-image: url(images/titleback.jpg);
}
上面的樣式是用來改變分類的標題顏色. 預設值是黑色粗體字和銀色的背景. 替代的方式是用背景圖片. 像在首頁分類就是用 titleback.gif 來當他的背景圖片. 給新文章的分類就是用 titleback.jpg. 因教學效果, 我把背景顏色改為 #8EF6C1, 及文字顏色改成 #4A04BE.
/* The borders around things. */
.bordercolor
{
background-color: #828181;
}
.tborder
{
border: 1px solid #828181;
background-color: #FFFFFF;
padding: 2px;
}
在來就是改變邊線的樣式. 第一個 ".bordercolor" 是用來改變文章和管理中心裡面的邊線顏色. 第二個 ".tborder" 是給分類的邊線和其他有邊界的表格. ".tborder" 所顯示的是 1px, solid, 和灰色的邊線. 然後邊界的填補區將用白色的背景. 因教學效果, 我把 ".bordercolor" 的背景從 #828181 改為 #FF19B6. 然後 ".tborder" 從 #828181 改成黑色, 背景顏色從白色改成黃色, 然後填補區從 2px 改成 15px.
接下來是改變文字大小的預設值. 這個可以不用管他, 因為小文字應該用小的樣式, 普通文字大小應該用普通的樣式, 和大文字就是用大的樣式來代表.
/* This is for the special header boxes on the top - it's not used elsewhere. */
.headertitles
{
background-color: #6B8EAE;
border: 1px solid #6B8EAE;
}
.headerbodies
{
border: 1px solid #7A7777;
background-color: #EFEFEF;
background-repeat: repeat-x;
background-position: bottom;
}
最後的樣式是用來改變標頭地區的設定值. 標頭地區就是出現在論壇的最上方, 可以收合的地方. 這個樣式有兩個分區, 第一個 ".headertitles" 的樣式是用來改變標頭的標題地區 (看圖). 上面的圖片顯示的是基本資料區. 另一個樣式 ".headerbodies" 是給標題下方的地區. 上面的樣式顯示的是灰色背景, 和灰色的1px邊線. 同樣的, 如果新聞的訊息過長, 他會自動的用捲軸方式顯示. 因教學效果, 我把 ".headertitles" 的背景改成#AB0505(紅色). 然後 ".headerbodies" 的邊線顏色改成#FCC540(橘色), 和背景顏色改成#05AB67(綠色).
單元 3佈景製作建議通常製作背景前最好先想清楚您的論壇該用什麼顏色方案. 當然您的顏色方案最好是跟您的網頁相近. 在來就是找一個16進位的顏色表格. 這樣您就知道您大概要的顏色是用哪一個16進位值來代表. 我自己是用 Paint Shop Pro 提供的色盤來選擇我要的16進位值.
如果您使用的16進位值是像 #333333 = 灰色, 網路上有一些
資源你可以看看. 您也可以看看別的網頁使用的是怎樣的顏色方案, 這樣對您的最後決定有一定的幫助. 我個人是覺得最好不要太浮華, 太多不同的顏色對您的網頁不好.
結尾我希望這篇教學會對您有所幫助. 我的目標是幫助那些對網路開發不太了解的朋友, 和一些想架設論壇的人. 記得也許上面的代碼可能對您來說有點困難, 但是有一天您一定能夠設計一個屬於您自己的風格.
最後, 因為這篇教學是寫給SMF論壇的, 你應該知道我是SMF論壇的會員. 我強烈的推薦這個論壇程式給大家, 過於任何一個程式專案. 多謝那些開發這個論壇程式的成員.
著作權及聯繫方法SMF程式, 標誌, 預設佈景, 及任何關於SMF論壇的東西都是屬於
Lewis Media c 2001-2004 所有. 請將功勞歸於屬於的人.
這篇教學的所有權是屬於
Patrick Schiess c 2004 所有. 教學裡的任何訊息都是 Patrick Schiess 所以寫. 請勿亂修改這篇教學. 如果您有任何問題或建議, 您可以寫信告訴我 p.schiess[]@[]gmail .com (不要包
A.M.A 幫我設計這篇教學所用的CSS樣式. 多謝了, 你讓這篇教學看起來清爽許多.
All prosecutors will be violated, and as always remember, All your base are belong to us.
c 2004 by Patrick Schiess.
