我支持你们！开源文化就要大家共同合作！这篇文章我翻译了，明天中国上空太阳落山前交出！极度b4那个骂奶奶的！

感谢.hawken,为开源及xoops china,期待.

翻译完了，好累，很多不通的地方我打了很多问号或用括号注明原文，希望大家帮忙指正。

注意：这个sub-section xoops 手册由skaagargonius（[email protected]）上载。我建议你积极地参与到这个wiki来，而不是发邮件让我修改和上传。除非你真的不愿意碰widi，但又发现一些需要修改的地方，请不必拘谨，用上面提到的email联系我。
如果你是xoops风格制作的初学者，请从这里开始：概述

6.xoops项目开发指导
6.1.概述
6.2.风格与模板
6.3.创建风格

6.3.1.xoops css文件
6.3.1.1.css概述
*此部分丢失*
6.3.1.2.通用css类
6.3.1.3默认风格的CSS(含注释)

6.4.模板创建设置

我认为有些事情应该在6.3.1节前交待清楚(还需重新编排章节的顺序)就是风格制作人员要在他们所开发的风格文件里包含正确的DTD(document type difinition文件类型定义).我就发现过一些风格由于没有正确的DTD而导致IE无法正确呈现（render）。建议(插入)文本：
6.3.1.XOOPS DTD
DTD是一种XML标识，放在网页最前面告诉浏览器后面跟了什么类型的代码。xoops 核心模块（the core xoops modules？）生成变化的XHTML代码。包含在默认风格里的DTD如下：
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你至少应该把上述DTD包含到你的主题里。没有包含正确的DTD会导致浏览器（特别是IE）的错误呈现（render）。

风格与模板

我们将试着大致的描述XOOPS用风格文件和模板文件来呈现一个网站的方式。

我们为何困惑？

在我看来，困惑主要来源于一下两者之间的沟壑：
人们认为它的工作方式
它实际上的工作方式
后者是给定了的，并且一段时间内不会有太大变化（那些紧跟xoops2.x发展步伐的人都知道模板和风格几经修改现已相当成熟稳定）
然而前者，却变化多端。这主要源于开发者的不同背景：有转自phpNuke的，有PostNuke的，以及与这些类似的开发背景。还有些人，开发过一些如Typo3?的系统和一些别的“整站程序”（'full suites'）。其他一些，甚至从头开发过php项目，所有东西都自行打造。

第二个问题是terms在xoops2.x中的使用？？？？？？？？？？？？？？？？
模板(应该叫做"区块/模块 模板"(Block/Module templates))使用经历,他们就不会为风格、模板所困惑，这是和上面不同的情况。（下文将介绍一个事实）

The big picture（不明白）

当你第一次弄模板和风格的时候，你应当会注意到：
每一个模板都由相当多的文件组成！（我最近一次统计，在不安装任何模块的情况下，一个最基础的系统都有将近36个模板）
一个风格含有相对较少的文件（默认风格只有不到10个文件！）

看到这里，你们有些人可能会叫声“啊！”
对那些没反应的我会举个例子：

一个显示最近注册的10名会员的名单通常会显示3样东西：一个放在区块顶端的标题，注册会员的昵称，和他们注册的日期。先让我们忘了我们是想区分“设计”与“内容”这件事，ok？
为了实现上述要求，我们可以为这个区块建立两个文件：

一个为这个区块定义结构的模板，其实就是一个昵称加日期的表格，一行接一行，直到第10行。
另一个文件获取前述步骤所生成的信息，再将其绑定在某些“设计”（'design'）里。或许意味着把区块的标题放在顶上，而在它之下放上生成的名单。

在这个例子里，前者是一个模板，而后者是一个风格。区块模板是插入到风格的区块代码里。

到了这里，结论就跟明显了：
模板（区块/模块 模板）控制数据显示的方式，同时风格模板控制数据显示的外观（通常是为随后将被定义在CSS中的各种元素指定类名。）

详解（And more details）
xoops2.x中terms的使用
一个“模板”是一块使用了预设变量的html代码（由一个特别的模块提供）用来向网站发布数据。
一个“风格”是一个特殊的模板（或模板的设定），通过获取第一个模板产生的结果（result）（数据模板（data template））然后绑定到希望使用的风格，来控制xoops网站的样式和图形。意味着，再说一次，我们要有两个模板，一个数据模板，一个风格模板。

数据模板从来不直接使用，它总是在风格模板的帮助下显示。
这意味着，除非你要改变模块在它们的区块里的显示方法，你不会碰到数据模板而只需搞定风格模板。我个人认为，xoops2.x可以用点友善的名字免得打消那些潜在的风格开发人员的困惑。

附加：来源于xoops.org论坛的解释：

来自Ackbarr:模板控制一个模块内容的输出，而风格控制整个网站的外表。
来自Herko:对Ackbarr的补充：风格是手动上传到你的xoops根目录的风格文件夹里的。要改变你整个网站的样式和外观，你需要下载一个标准风格，然后修改来适合你的口味再上传风格文件到你的风格文件夹（名字通常是：themes/humbrietheme/theme.html 等）

模板能够在系统管理菜单里的模板管理修改。克隆一个默认的模板设置，然后编辑那个克隆版本来配合你对网站样式和外观的口味。模板能够在每个模块下修改。

如果你试着修改你风格文件夹下的theme.html，但是什么都没变，请确认在总选项里的这项设置："Update module template .html files from themes/your theme/templates directory?"是选了"yes"。

xoops 风格开发人员指导概览

在最新的网站里，xoops默认风格有一个三层的模型（a 3 tier model）：

风格/区块 模板片断（Template Snippets）（Powered by the Smarty Engine with content tags into which content is generated）
设计模板－控制设计和生成结构（被设计人员称为“格子（grid）”）
CSS 文件－这里存放着真正的设计。。。

为什么我叫它们“模块片断（Template Snippets）”，因为你几乎不会为整个网页仅仅建立一个单独的模块，而是很多连接在一起的html代码片断就像乐高玩具一样。这意味着现在能建立一个复杂而有趣的站点结构（虽然现在简单的界面备受欢迎，因为这样很好维护）

一个恰当的例子是区块拥有它们自己的模块的方式。各种站点上的模块用区块模板生成他们自己的题目和内容，却导致更高层次的模块被修改。当然，这种方法表示你不能给每个区块一个单独的设计－你站点里的所有区块模板都用了相同的风格区块模板－不过估计这能在未来的xoops版本里实现。

总结这个概览，如果我们想看模板处理的流程，请看下面：

取得一个想要显示在本页的区块的名单
为每个区块生成html，在风格区块模板里保持缓冲器与该html的关联
把所有左边栏区块的缓冲器连接到一个单独缓冲器
把所有中央区块的缓冲器连接到一个单独缓冲器
把所有右边栏区块的缓冲器连接到一个单独缓冲器
递交（render）网站的主要风格模板，将先前准备的缓冲器传递进入模板

当你明白了这个系统是如何工作的，那么xoops仅仅通过储存模板递交（rendering）于一个文件里的结果就能缓冲区块的方式就显而易见了（缓冲器包含了由一个带有xoops变量的Smarty模板所生成的html），而不是为每个页面的进入而将你数据库里的数据全部取出。这种运行机制高效地（dramatically）提升了系统性能，还减少了cpu使用率，最终，快速的页面加载得以实现。

注：下面的logic似乎还有代码和语法的意义，不过我还是全部翻译成了逻辑，因为更多的意思我不能主观的提出。
Smarty是什么？
Smarty是php的一个模板引擎。更确切地说，它提供了一个易管理的方式用于分离应用程序的实现与它内在的逻辑和内容。当应用程序员与模板设计员不是同一个人的时候这是最好的方式。？？？？？？？？？？？？？

举例来说，假定你在建立一个显示新闻的网页。文章的组成元素为标题，副标题，作者和主体，它们没有包含任何关于它们如何呈现的信息。它们被传递到smarty，再经过模板设计员编辑模板，用一个联合的(combination)html标签和模板标签来格式化这些元素的表现（HTML tables, background colors, font sizes, style sheets, 等）当程序员想要改变文章内容的找回方式（一个对应用程序逻辑的改变）这种改变将不会影响到模板设计员，内容仍然象以前一样显示。同样地，如果模板设计员想要全部改写模板的设计，这也不会影响到程序逻辑。因此，程序员不需要重构模板就能改变程序逻辑，模板设计者也不需要破坏程序逻辑就能改变模板。

现在说几句Smarty不能做的事。Smarty不能完全将上述两者分离。在逻辑表达很严格的情况下你的模板里的逻辑并没有错误。一句建议：保证应用程序逻辑与模板的分离。这样能保证将来更容易维护和升级。

Smarty还有个独特之处在于它的模板编译。意思是说Smarty可以读取模板文件再为其建立PHPscrips代码。它们一旦建立，就可以执行。因此，就不需要模板文件耗费资源地（costly）解析每个请求，而且每个模板能够充分利用PHP编译器的缓冲解决方案，比如Zend Accelerator (http:www.zend.com) 或 PHP Accelerator (http:www.php-accelerator.co.uk)。

一些Smarty的特征
*它相当快
*它会在PHP解析器做苦工（dirty work）的时候生效
*没有模板解析的资源耗费，只经过一次编译
*它会聪明地只在模板文件被改变的时候才重新编译
*你能自定义函数和变量，所以模板语言相当开放
*可配置的模板标签语法，所以你能用{}, {{}}, , etc.
*if/elseif/else/endif被php解析器所允许，所以{if ...}表达式语法可以随你喜欢地简单或复杂
*允许语句的无限嵌套
*可以将php代码插入你的模板文件，虽然这不必要也不推荐因为引擎已经这样个性化（costomizable）了。
*内置缓冲的支持
*任意的模板来源
*自定义缓冲操作功能
*嵌入式结构（plugin architecture）

默认风格的CSS（代注释）
/* This controls the default settings on a page */
body {color: black; background: white; margin: 0px; padding: 0px;}

/* The default settings for ALL tables on a site, unless explicity defined for a particular table */
table {width: 100%; margin: 5px; padding: 5px; font-size: small}
table td {padding: 0px; border-width: 0px; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}

/* This controls the default link settings & link mouseover/hover settings */
a {color: #666666; text-decoration: none; font-weight: bold; background-color: transparent;}
a:hover {color: #ff6600;}

/* Controls HTML tags for headings #1-5, unordered list and items in the list */
h1 {4}
h2 {3}
h3 {9}
h4 {2}
h5 {1}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #2F5376}

/* Selector for a form button */

input.formButton {}

/* The following appear to primarily apply to the NEWS stories, */
/* though they may be found in other areas as well */
/*
BEGIN NEWS SECTION DEALING PRIMARILY WITH NEWS
*/

/* The border around news stories */
.item {border: 1px solid #cccccc;}

/* The BG color for the cell for news story titles */
.itemHead {padding: 3px; background-color: #2F5376; color: #FFFFFF;}

/* The BG color for the area right under a news title (post by so-and-so) */
.itemInfo {text-align: right; padding: 3px; background-color: #efefef;}

/* The text in the story title EXCEPT the colon between the topic and the title */
.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;}

/* The text "exta6sy" just preceding the posters name */
.itemPoster {font-size: 90%; font-style:italic;}

/* The text On $date $time immediately after the posters name */
.itemPostDate {font-size: 90%; font-style:italic;}

/* The xx # reads for a story, but NOT the parenthesis surrounding the total */
.itemStats {font-size: 90%; font-style:italic;}

/* The text of the story itself */
.itemBody {padding-left: 5px;}

/* XOOPS DEVELOPER HELP NEEDED - This seems to be the same as .itemBody above. What is the difference??? */
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}

/* Makes the first letter in a story bold */
.itemText:first-letter {font-size: 133%; font-weight: bold;}

/* The foooter of a new story (read more, etc.) */
.itemFoot {text-align: right; padding: 3px; background-color: #efefef;}

/* The [edit | delete] section of a news footer */
.itemAdminLink {font-size: 90%;}

/* The | xx# bytes more | section of the news footer */
.itemPermaLink {font-size: 90%;}

/*
END SECTION DEALING PRIMARILY WITH NEWS
*/

/* Controls the settings for a table header */

th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}

/* The area at the top of the page where the logo and advertising banner are */

td#headerbanner {width: 100%; background-color: #2F5376; vertical-align: middle; text-align:center;}

/* The whitish-grey bar on the default install right underneath the top section/header */

td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);}

/*
BEGIN SECTION DEALING WITH THE THREE COLUMNS
*/

/* controls the settings for blocks on the LEFT side of the page */
td#leftcolumn {width: 170px; border-right: 1px solid #cccccc; font-size:12px;}

/* controls the settings for the table headers on the left column */
td#leftcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}

/* controls the settings for the block titles on the left column */
td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}

/* controls the settings for the blocks' content on the left column */
td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;}

/* controls the settings for block in the CENTER section of the page */
td#centercolumn {font-size: 12px;}

/* controls the settings for the table headers on the center column */
td#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}

/* Controls the settings for "center-aligned CENTER blocks" on the page */
td#centerCcolumn {padding: 0px 3px 1px 3px;}
/* The title for center center blocks */
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;}
/* The content for center center blocks */
td#centerCcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;}

/* Controls the settings for "left-aligned CENTER blocks" on the page */
td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}

/* The title for left-aligned center blocks*/
td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}

/* The content for left-aligned center blocks */
td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;}

/* Controls the settings for "right-aligned CENTER blocks on the page */
td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}

/* The title for right-aligned center blocks */
td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
/* The content area for left-aligned center blocks */
td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;}

/* Controls everything defined as content. for example in news it controls: */
/* The article text, posted by, date, time & number of reads Including the parenthesis */
/* the [ | ] brackets around the admin edit section and also the disclaimer: "the comments are */
/* owned by the poster. We aren't responsible for their content" on the bottom of a news comments page */
/* also a ton of text on the forum page...probably a ton of stuff everywhere...be careful with this one */

div#content {text-align: left; padding: 8px;}


/* settings for blocks in the RIGHT column on a page*/
td#rightcolumn {width: 170px; border-left: 1px solid #cccccc; font-size:12px;}

/* Controls the table headers for the right columns.*/
td#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}

/* Controls the right column blocks' titles */
td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}

/* Controls the right column blocks' content area */
td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;}

/* END SECTION DEALING WITH THREE COLUMNS */

/* settings for the footerbar where the xoops copyright notice is */
tr#footerbar {text-align:center; background-image: url(hbar.gif);}

/* settings for the Main Menu */
td#mainmenu a {background-color: #e6e6e6; display: block; margin: 0px padding: 4px;}

/* What happens on a mouse hover on the main menu */
td#mainmenu a:hover {background-color: #ffffff;}

/* The top cell on the main menu (typically HOME). This way you can give the top cell a different border or */
/* other appearance. Useful for drawing a box around the entire menu, for instance. */
td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

/* The remaining entries in the main menu other than the top most defined one line above */
td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

/* The settings for submenu items that open when u are in a particular module. For example */
/* "Submit news" and "Archives" when you are on the news module */
td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

/* settings for the User Menu */
td#usermenu a {background-color: #e6e6e6; display: block; margin: 0px padding: 4px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

/* What happens on a mouse hover on the user menu */
td#usermenu a:hover {background-color: #ffffff;}

/* The top most entry on the user menu */
td#usermenu a.menuTop {border-top: 1px solid silver;}

/* The settings for when a user has a private message */
td#usermenu a.highlight {background-color: #fcc;}


/* Styles used to draw homogeneous tables */
/* Described in a seperate page in the xoops.org wiki */
.outer {border: 1px solid silver;}
.head {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color: #dee3e7; padding: 5px;}
.odd {background-color: #E9E9E9; padding: 5px;}
.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}

/* NOT INCLUDED IN DEFAULT */
/* customization to add special color to forum title head. requires editing newbb_index.html template as well */
.outerhead{}
.outerhead a{font-size: 12px; color : #FFFFFF;}
.outerhead a:hover{}

/* NOT SURE Special system messages MAYBE */
/* I leave the defaults */
div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}

/* Settings for when you insert code in a forum post */
div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
/* Settings for when you quote during a forum post */
div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}


/* Styles for the commenting system */
.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0px}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}

table 类

以下的类常用于xoops的核心文件生成好看的HTML表格于表单。它们现在成为使用于xoops1.x版风格文件中的.bg1-5 和 .fg1-5类的替代：

.outer - defines the outer rim/border of a table, usually assigned to tags
th - defines the appearance of table caption cells
.head - defines the appearance of table sub-caption cells, assigned to or or or tags */
tr.head td {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}
tr.foot td {background-color: #c2cdd6; padding: 5px; font-weight: bold;}

HTML1

tags .even/.odd - used to render contrast between normal cells, assigned to

tags .foot - defines the appearance of table footer cells, assigned to

tags 举例： 下面是类如何通过HTML定义并使用于XOOPS核心文件的举例。 CSS /* define some default settings */ table {width: 100%; margin: 0; padding: 0; font-size: small} table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;} th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;} .outer {border: 1px solid silver;} .head {background-color: #c2cdd6; padding: 5px; font-weight: bold;} .even {background-color: #dee3e7; padding: 5px;} .odd {background-color: #E9E9E9; padding: 5px;} .foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;} /* we do this because some browsers will not render as expected if the above classes are assigned to

th
.head
.even
.odd
.even
.odd
.foot

will render

HTML2

th
.head	.even
.head	.odd
.head	.even
.head	.odd

will render

翻译的时候发现这些个文章似乎是好多个文章拼在一起的，所以我也按楼主的分页分开翻译的。还有一部分，马上。。。

Theme KickStart 指导
这是如何建立自己的风格的指导
编辑默认风格
第一步
将默认风格文件夹（thems\default）复制并重命名比如“cool”。现在你应该有

一个叫cool的新文件夹和默认风格文件夹放在一起。

打开cool文件夹里的theme.html然后寻找如下字段：
<{include file="default/theme_blockleft.html"}>
你能发现，你应该把default改为cool才符合你的新文件夹
<{include file="cool/theme_blockleft.html"}>
还有别的地址也要修改。

第二步

现在你需要克隆默认模板，因为默认模板不能被编辑。在你的xoops里选择

Administration > System Admin > Templates然后克隆默认模板。你需要将新的

模板设置为你风格文件夹的名字，这里是cool。

在这一步你需要小心。不正确的模板编辑修改会导致毁灭性的结果。

第三步

选择Administration > System Admin > Preferences > General Settings。选

择cool为默认风格就像原来的默认风格的设定一样。将"Update module template

.html files from themes/your theme/templates directory?"的设定改为Yes。

这个设定很重要，因为这是xoops重载"new"css和HTML代码的唯一方式，这样你就

能在线（“on the fly”）测试你的修改。

你可能会很频繁地修改(第四步)和重测试你的风格。一旦你满意了你的测试结果

请将"Update module template .html files from themes/your

theme/templates directory?"改为no

现在你的xoops安装将使用你的cool风格而不是“默认”风格。你能个编辑这个风

格来满足你的需要。当有错误发生时，你可以随时转换到原来的默认风格。

第四步

这是一个编辑阶段。简短介绍各个文件：

theme.html - 控制主要的网站输出
theme_blockleft.html - 控制左边栏的输出
theme_blockright.html - 控制右边栏的输出
theme_blockcenter_c.html - 控制中央区块的输出
theme_blockcenter_l.html - 控制中央区块（左）的输出
theme_blockcenter_r.html - 控制中央区块（右）的输出
style.css - 风格的样式
styleMAC.css - MAC's的设定
styleNN.css - Netscape的设定

利用这些文件你就能定义你的网站外观。所有的模块和每个单独的区块都能通过模板被控制（如果它们使用模板）

最后一篇文章是教你如何改变整个站点的外观的，实在不好意思，一天时间太仓促了，天已经黑了，都还有一篇。我现在出去有点事，剩下的我回来搞定。