五步法创建Joomla框架模板

简易五步法创建 Joomla 框架模板
翻译者：yooyooh
简易五步法创建 Joomla 框架模板
本指南循序渐进、指导大家如何在几分钟的时间内，基于 JEZ Thema、根据 PSD 设计来创建 Joomla！1.5 模板。

下面就是本免费基础教程。

我们应该通过下列步骤来建立一个全新的 Joomla 模板： 1. 建立开发环境 2. 分析原始图形化设计 3. 把原始图形化设计切片为小图片 4. 创建表示设计的样式表 5. 完成新创建的 Joomla 模板 通过本指南逐步引导，我将告诉您如何在几分钟内、根据任意一个原始图形化设计来创建一个全新而独特的 Joomla 模板。

一、建立开发环境
在创建 Joomla 模板之前，基于 JEZ theme base，请确保您的 Joomla 网站已下载并安装了 JEZ Thema。

推荐您把 Joomla! 1.5 和 JEZ Thema 安装到本地服务器以更便于开发。

• •
不知道如何设立本地服务器吗？我推荐 XAMPP，它是个完整的安装包，只消点击一下就能帮助您快速 设立本地服务器。

然后，您需要下载并安装 Joomla! 1.5 的最新版。

就像其他扩展一样，下载并安装 JEZ Thema 到您的 Joomla 站点：登录至管理员面板并打开扩展 -> 安装/卸载，在打开的页面内点击浏览按钮并选择下载好的 JEZ Thema 包，然后点击上传文件 & 安 装按钮。

完成上述步骤后，让我们看下 JEZ Thema 的 Joomla 模板插件参数。

还是在 Joomla 管理员面板，打开扩 展 -> 模板管理器 ，在已安装模板列表内选择 JEZ Thema 作为默认模板并点击它的名字来查看所有可用参 数。

你会看到所有参数都是内联文档类型：点击每个参数旁的显示/隐藏详情链接即可阅读指示。

二、分析原始图形化设计
本指南内我们将分析一个 JEZ_Rego.psd 的 Photoshop 设计图并据此创建 Joomla 模板。

在分析之前，我 们看下 JEZ theme base 的默认布局。

如下图所示。

我们将利用默认布局来创建一个 Joomla 模板。

您将在 另外一个指南内（尚未撰写）领略到如何定制默认布局来迎合不同的个人需求。

1


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
下面是 JEZ Thema 支持的包装格式/自定义模块样式：
• • • • •
raw: 原样输出生成内容。

xHTML: 默认的 Joomla!自定义模块样式，不支持圆角设计。

rounded: 默认的 Joomla!自定义模块样式，表示圆角设计。

jezRounded6ImgsNested: 同样的圆角设计技术，但使用 6 层嵌套的层 /图片来替代 4 层嵌套的层 /图片，以减小图片大小并防止模块高度受限于圆角自定义模块样式中常见的图片高度问题。

jezRounded6Imgs: 使用了 的 More Rounded Corners With CSS 技术的自 定义模块样式，该圆角设计可通过 PNG-24 alpha 通道支持透明效果 (渐变，阴影，等等)且不受限于 图片高度。

•
jezRounded1Img: 使用了 的 Even More Rounded Corners With CSS 技术 的自定义模块样式，该圆角设计可通过 PNG-24 alpha 通道支持透明效果 (渐变，阴影，等等) 且仅 须一个图片。

•
jezRounded1ImgScroll: 和 jezRounded1Img 一样的技术但在内容超过限定的模块高度时可以滚 动。

2


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
现在我们开始分析下面的原始图形化设计。

分析过程中，我们需要：
•
划分原始图形化设计，最好适合默认布局。

3


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
• •
使用 HTML 和 CSS 确定最能体现每个容器的包装格式。

使用 HTML 和 CSS 确定最能体现每个模块设计的自定义模块样式。

分析图形化设计后，我们得到下列结果： 1. 设计划分为如下所示：
JEZ Rego 原始图形化设计的分析 2. 本设计内我们不需要下列的模块位置： user3， user4， breadcrumb (用#jezNav 来包装)， user2 (用 #jezUsers 来包装)，bottom (用#jezMain 来包装) 和 footer、debug (用#jezFooter 来包装)。

4


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
我们需要做的仅是编辑 JEZ Thema 参数并禁用这些位置的对应参数。

没错，我们可以对这些参数不 做更动、留待 JEZ Thema 自动探查，但推荐您禁用它们以防止模块发生某些已经确认的问题。

#jezNav 容器已禁用 3. #jezPage, #jezHeader, #jezTop, #jezContent, #jezLocal, #jezMain, #jezSub, #jezExtras 和 #jezBottom 容器不含圆角，那就保留它们的包装格式参数（无圆角）：
#jezPage 4. 我们有 logo (wrapped by #jezLogo 来包装), top (用#jezTop 来包装), user5, user6, user7, user8 (用#jezExtras 来包装), 和 inset, syndicate (用#jezBottom 来包装) 模块位置不需要用额 外的自定义模块样式来表示，因为它们没使用圆角设计。

那就设置这些位置的模块样式为 Raw 或 xHTML：
5


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
logo
(用#jezLogo 来包装) , top (用#jezTop 来包装)
5. 下面的部分使用了圆角设计： left (用#jezLocal 来包装), right (用#jezSub 来包装), user1 (用 #jezUsers 来包装) 模块位置和组件输出包装 (#jezComponent)。

所以，我们应当使用 HTML 和 CSS 配合下列的自定义模块样式来表示它们：rounded, jezRounded6ImgsNested, jezRounded6Imgs, jezRounded1Img, jezRounded1ImgScroll。

本指南内，我们将仅使用 jezRounded6Imgs 模块样式来表示 user1, left, right 模块位置和组件输出包装的圆角设计。

组件输出包装格式
6


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
left, right 和 user1 自定义模块样式
三、把原始图形化设计切片为小图片
现在，开始切片原始图形化设计为小图片，以备后用。

1. 下面的设计部分可用 1px 宽的图片结合 HTML 和 CSS 水平重复填充来表示背景：
7


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
2. 如下切片圆角，用来表示 jezRounded6Img 模块样式：
四、创建表示设计的样式表
切片后，把切片图像置入预定义的框架样式表来表达设计。

我们需要做些样式定制以适应设计。

现在把切片置入 JEZ Thema 预定义样式表。

如果您还未切换到 JEZ Thema 目录，就切换工作目录至 your-joomla-directory/templates/jez_thema。

把所有的切片拷贝至 images 目录，再在您惯用的文本编辑器内打开 css/layouts.css 文件。

搜索 * Page wrapper *，然后如下修改样式表区块#jezPage：
8


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
#jezPage { margin: 0 auto; }
继续搜索 * Header wrapper * ，然后如下修改样式表区块#jezHeader：
#jezHeader { height: 75px; margin-bottom: 0; background: #55574c url(../images/bg_header.png) left top repeat-x; }
替换样式表区块 #jezExtras ——默认为空，可搜索 * Extras wrapper *——为下列 CSS 代码：
#jezExtras { height: 200px; background: #000 url(../images/bg_extras.png) left top repeat-x; }
Joomla! 1.5 的默认安装内，即使载入了示例数据，也没有任何模块配置为显示在 user5, user6, user7 和 user8 的位置。

这样，要看到上述样式表的结果，你需要配置特定模块来显示这些位置。

要看下原始的图形化 设计，推荐位每个位置配置个 Newsflash (mod_newsflash)模块。

继续搜索* Bottom navigation wrapper * ，并且把控的#jezBottom 样式单区块替换为下列区块：
#jezBottom { height: 50px; background: #fff url(../images/bg_bottom.png) left top repeat-x; }
现在，我们开始设定设计内容块的背景色。

搜索* Content wrapper * 并把样式单区块#jezContent 从：
#jezContent { position: relative; }
9


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
改为：
#jezContent { background-color: #d4d3cf; padding-top: 14px; }
既然我们没使用全局导航(#jezNav 容器)，position: relative;就不必要了。

还有， 要把内容块内的三个栏目上移。

要做到该点， 往下滚动文本编辑器窗口， 查找第一个/* Nested wrappers and module positions */ 评论，然后改变样式单区块 #jezMain, #jezSub, #jezLocal 为：
#jezMain, #jezSub, #jezLocal { margin-top: 0; }
现在开始实施圆角设计。

搜索 * Modules chromes at left position *，修改评论 /* rounded using 6 images */ 和/* rounded using 1 image */间的样式单区块为：
#jezLocal .jezRounded6Imgs { margin-bottom: 9px; } #jezLocal .jezRounded6Imgs .hd { background-image: url(../images/mod_left-hl.png); } #jezLocal .jezRounded6Imgs .hd .c { background-image: url(../images/mod_left-hr.png); } #jezLocal .jezRounded6Imgs .bd { background-image: url(../images/mod_left-bl.png); } #jezLocal .jezRounded6Imgs .bd .c { background-image: url(../images/mod_left-br.png); } #jezLocal .jezRounded6Imgs .ft {
10


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
background-image: url(../images/mod_left-fl.png); } #jezLocal .jezRounded6Imgs .ft .c { background-image: url(../images/mod_left-fr.png); } #jezLocal .jezRounded6Imgs h3 { background: url(../images/mod_left-hd.png) no-repeat; height: 36px; line-height: 30px; margin-bottom: 0; overflow: hidden; position: relative; text-align: center; top: -18px; width: 107px; }
现在搜索 * Modules chromes at right position *，容纳后修改评论/* rounded using 6 images */ 和 /* rounded using 1 image */间的样式单区块为：
#jezSub .jezRounded6Imgs, #jezLocal .black { margin-bottom: 9px; } #jezSub .jezRounded6Imgs .hd, #jezLocal .black .hd { background-image: url(../images/mod_right-hl.png); } #jezSub .jezRounded6Imgs .hd .c, #jezLocal .black .hd .c { background-image: url(../images/mod_right-hr.png); } #jezSub .jezRounded6Imgs .bd, #jezLocal .black .bd { background-image: url(../images/mod_right-bl.png); } #jezSub .jezRounded6Imgs .bd .c,
11


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
#jezLocal .black .bd .c { background-image: url(../images/mod_right-br.png); } #jezSub .jezRounded6Imgs .bd .c .s, #jezLocal .black .bd .c .s { margin: 0 1px; background-image: url(../images/mod_right-s.png); } #jezSub .jezRounded6Imgs .ft, #jezLocal .black .ft { background-image: url(../images/mod_right-fl.png); } #jezSub .jezRounded6Imgs .ft .c, #jezLocal .black .ft .c { background-image: url(../images/mod_right-fr.png); } #jezSub .jezRounded6Imgs h3 { background: url(../images/mod_right-hd.png) 100% 40% no-repeat; } #jezSub .orange h3 { background-image: url(../images/mod_right-hd_orange.png); }
在上面的 CSS 代码块， 我们还定义了额外的圆角设计，对应左边栏的 black (一个空白字符， 后面是单词 black) 模块类后缀。

要观看左边模块位置的附加圆角设计，你仅需给左边位置的任意模块指定 black 为其模块类后缀 参数。

现在，我们要为组件输出包装创建圆角设计的样式单。

搜索* Component output wrapper * ，滚动到你看 见首个 /* rounded using 6 images */评论，然后修改下面的样式单区块/* rounded using 1 image */ 为：
#jezComponent.jezRounded6Imgs { /* the rounded block has 4px shadow around so move it up 4px to line-up correctly with rounded blocks at left and right columns */ margin: -4px 0 13px 0; } #jezComponent.jezRounded6Imgs .hd {
12


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
background-image: url(../images/com_hl.png); } #jezComponent.jezRounded6Imgs .hd .c { background-image: url(../images/com_hr.png); } #jezComponent.jezRounded6Imgs .bd { background-image: url(../images/com_bl.png); } #jezComponent.jezRounded6Imgs .bd .c { background-image: url(../images/com_br.png); } #jezComponent.jezRounded6Imgs .ft { background-image: url(../images/com_fl.png); } #jezComponent.jezRounded6Imgs .ft .c { background-image: url(../images/com_fr.png); }
完成上述简单工作后，我们现在开始些高级点的工作。

正如你看到的原始图形化设计， #modUser1 部分有 个相当特别的圆角设计和内容布局。

这需要对 JEZ Thema 代码做些定制， 还需要开发个新的自定义的 Joomla! 1.5 模块来达成相近的外观。

本指南中，我们将仅定制 JEZ theme 基础代码，并把开发定制 Joomla! 1.5 新模块留待另一指南。

由于#modUser1 部分设计相当特殊，我们也许不想在所有页面、而仅在主页和/或特定的介绍页面出现它。

那么， 我们将使用组件输出包装的圆角设计作为位于#modUser1 部分模块的默认样式(user1 模块位置)。

让 我们回到定义组件输出包装的圆角设计并更新样式表为：
#jezComponent.jezRounded6Imgs, #modUser1 .jezRounded6Imgs { /* the rounded block has 4px shadow around so move it up 4px to line-up correctly with rounded blocks at left and right columns */ margin-top: -4px; } #jezComponent.jezRounded6Imgs { margin-bottom: 13px; } #modUser1 .jezRounded6Imgs {
13


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
margin-bottom: 5px; } #jezComponent.jezRounded6Imgs .hd, #modUser1 .jezRounded6Imgs .hd { background-image: url(../images/com_hl.png); } #jezComponent.jezRounded6Imgs .hd .c, #modUser1 .jezRounded6Imgs .hd .c { background-image: url(../images/com_hr.png); } #jezComponent.jezRounded6Imgs .bd, #modUser1 .jezRounded6Imgs .bd { background-image: url(../images/com_bl.png); } #jezComponent.jezRounded6Imgs .bd .c, #modUser1 .jezRounded6Imgs .bd .c { background-image: url(../images/com_br.png); } #jezComponent.jezRounded6Imgs .ft, #modUser1 .jezRounded6Imgs .ft { background-image: url(../images/com_fl.png); } #jezComponent.jezRounded6Imgs .ft .c, #modUser1 .jezRounded6Imgs .ft .c { background-image: url(../images/com_fr.png); }
现在，切片图形化设计的#modUser1 部分为下面的图片并开始定制。

14


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
用文本编辑器打开 wrappers/users.php 文件，更改下面的代码：
if ($params->get('_modUser1')) : ?> <div id="modUser1" class="fl<?php echo $params->get('_modUser1Style'); ?>"> <jdoc:include type="modules" name="user1<?php echo $params->get('_user1Chrome'); ?>" /> </div> <?php endif;
为：
if ($params->get('_modUser1')) : jimport('joomla.application.module.helper'); $user1Mod =& JModuleHelper::getModules('user1'); $modParams = new JParameter($user1Mod[0]->params); ?> <div id="modUser1" class="fl<?php echo ($modParams->get('moduleclass_sfx') == '_special' ? ' special' : '').$params->get('_modUser1Style'); ?>"> <jdoc:include type="modules" name="user1<?php echo $modParams->get('moduleclass_sfx') == '_special' ? '' : $params->get('_user1Chrome'); ?>" /> <?php if ( $modParams->get('moduleclass_sfx') == '_special' ) : ?> <div class="u1SpecialLeft"><!-- Rounded corners at left edge --></div> <div class="u1SpecialRight"><!-- Rounded corners at right edge --></div> <?php endif; ?> </div> <?php endif;
正如你能看到的，我们添加了几行 PHP 代码来导入 Joomla! 1.5 模块的 helper 链接库，然后取得 user1 定 位模块的数据。

由于 user1 模块位置只适合显示一个模块，我们仅须获取首个模块的配置参数。

如果模块使
15


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
用了_special 类后缀，就对#modUser1 容器应用特定类，然后再在#modUser1 内创建两个额外的 div 元 素， 我们以后就可用来显示圆角。

切换回 css/layouts.css 文件的编辑器窗口，我们将为#modUser1 部分的_special 模块类后缀添加样式表。

搜索* Modules chromes at user1 position *并添加下列样式表区块 /* Joomla rounded module */ 到 评论上方：
/* rounded corners design for _special class suffix */ #modUser1.special { position: relative; margin-bottom: 9px; height: 194px; } #modUser1.special h3 { display: none; } #modUser1.special .u1SpecialLeft, #modUser1.special .u1SpecialRight { width: 12px; height: 194px; position: absolute; top: 0; } #modUser1.special .u1SpecialLeft { background: transparent url(../images/mod_user1-l.png) no-repeat; left: 0; } #modUser1.special .u1SpecialRight { background: transparent url(../images/mod_user1-r.png) no-repeat; right: 0; }
从 Joomla 的管理员面板，让我们使用下列的 HTML 代码来创建个新的自定义 HTML 模块、以模仿我们原始 图形化设计的内容布局：
<div style="background: #000 url(templates/jez_thema/images/night_city.jpg) center center no-repeat; width: 500px; height: 194px; position: relative">
16


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
<div style="overflow: hidden; background-color: #000; opacity: .7; position: absolute; bottom: 0; width: 500px; padding-top: 12px; height: 44px"> <h4 class="ml1 air">The city that never sleeps</h4> <p class="fr mt-1_5 mr1 air"><a href="#an-url">Learn more...</a></p> </div> </div>
配置新创建的显示在 user1 位置的模块并使用模块类后缀_special。

取消发布所有在 user1 位置的其它模块， 刷新 Joomla 前台查看结果。

在这个时候，我们的 Joomla! 1.5 模板应该看起来十分类似我们的原始图形化设计。

要获取更佳效果，我们现 在要继续做些高级的定制。

我们的原始图形化设计包含面包屑导航 (在组件生成内容上方)和一个水平菜单 (位于#jezExtras 底部)。

那 我们就添加个模块位置，命名为 pathway，位于组件输出和另一个模块位置的顶部，我们叫它 user9，在 #jezExtras 容器的底部。

要做到该点，我们将修改四个文件：templateDetails.xml、custom.php、 wrappers/component.php 和 wrappers/extras.php。

让我们用文本编辑器打开这些文件。

把这两行 XML 代码添加到文件 templateDetails.xml 的<positions> 和</positions>标记标签间：
<position>pathway</position> <position>user9</position>
这两行 PHP 代码必须添加到 custom.php 内的// final preparation comment 上方：
// additional positions $this->params->set('_modPathway', $this->countModules('pathway') ? 1 : 0); $this->params->set('_modUser9', $this->countModules('user9') ? 1 : 0);
再添加下面的 PHP 代码到 wrappers/component.php 文件的字符串 ?>前：
if ($params->get('_modPathway')) : ?> <div id="modPathway"> <jdoc:include type="modules" name="pathway" /> </div> <?php endif;
17


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
最后，添加下面的 PHP 代码到 wrappers/extras.php 文件内的最后一个 ?>字符串前：
if ($params->get('_modUser9')) : ?> <div id="modUser9" class="clr"> <jdoc:include type="modules" name="user9" /> </div> <?php endif;
现在切回 Joomla 管理员面板，重新配置 pathway 位置的 Breadcrumbs 模块和显示在 user9 位置的特定 模块。

切换回 Joomla 前台并刷新查看结果。

最后，我们将定制预定义布局样式表，以尽可能地使模板符合我们的原始设计。

切换回 css/layouts.css 文件 的编辑器窗口，搜索* Content wrapper *，往下滚动并寻找首个/* Nested wrappers and module positions */ 评论并更改该评论下面的样式表区块为：
#jezMain, #jezSub, #jezLocal { margin-top: 0; } #jezMain.tc, #jezLocal.tc, #jezSub { margin-right: 0; } .gr3 #jezMain { margin-left: 228px; width: 502px; } .gr3 #jezSub { margin-right: 31px; width: 197px; } .gr3 #jezLocal { margin-left: -701px; width: 197px; } .gr2 #jezMain { margin-left: 228px;
18


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
width: 705px; } .gr2 #jezMain.tc { margin-left: 25px; } .gr2 #jezSub { margin-right: 31px; width: 197px; } .gr2 #jezSub.expandBoth { width: 447px; } .gr2 #jezSub.expandRight { float: left; margin-left: 232px; margin-right: 4px; width: 697px; } .gr2 #jezLocal { margin-left: -904px; width: 197px; } .gr2 #jezLocal.expandBoth { margin-left: 29px; width: 447px; } .gr2 #jezLocal.expandLeft { margin-left: 29px; width: 697px; } .gr1 #jezMain { float: left; margin-left: 25px; width: 908px; } .gr1 #jezLocal, .gr1 #jezSub { float: left;
19


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
margin-left: 29px; width: 900px; }
刷新 Joomla 前台：你应当看到整体模板布局现在看起来基本就同我们的原始图形设计一样了。

完成上述步骤或，所有您该做的就是添加和/或修改您的样式表的外边距、内边距、对齐、颜色、文本格式和剩 余元素比如水平菜单、垂直菜单、列表、表单元素等等的其它值，以使得这个新建的 Joomla! 1.5 模板和原 始设计相符。

不需创建新的 CSS 文件，这项工作可以通过编辑下列现有的 JEZ theme framework 目录内的 样式表文件来实现：css/layouts.css, css/template.css, css/ie6only.css 和 css/ie7only.css。

我们本 章不再深入，因为这已无关模板、也无需 JEZ theme 基础，只需要纯粹的 CSS 知识。

五、完成新创建的 Joomla 模板
在这最后一步，我们有两项话题： 1. 把已完成的工作打包成主题 取决于 JEZ base 安装可正常工作。

2. 把已完成的工作打包成独立模板 则无关 JEZ theme base 安装与否。

在探讨两项话题前，我们应当减小 Joomla 模板的样式单大小。

这会加速现实使用时的模板载入，特别在使用 拨号网络时。

用文本编辑器打开 css/layouts.css, css/template.css, css/ie6only.css 和 css/ie7only.css 文件，删除所有空的和不必要的预定义样式单区块。

几乎所有不必要的样式表可用下列搜索和替换功能删除： 1. 搜索使用的正则表达式模式：
^(/*[^n]+*/[nts]*)?([^n]+,[nts]*)*[^n]+{([nts]*/*[^n]+*/[nts]*)?}n*$
然后用空白替换。

2. 搜索使用的正则表达式模式：
[rn]{3,}
把符合的替换为：
nn
20


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
重复搜索/替换直到没有符合的项目再发现。

3. 搜索使用的正则表达式模式：
^(*+/)[rn]*(/*s|#|.)
替换为：
1n2 搜索使用的正则表达式模式： ^(/*-+*/[rnts]*/*+[rnts]**[^r^n]+*[rnts]**+/[rnts]+)$
替换为空。

4. 搜索使用的正则表达式模式：
[rn]{3,}
替换为：
nn
重复搜索/替换直到没有符合的项目再发现。

5. 搜索使用的正则表达式模式：
^(*+/)[rn]*(/*s|#|.)
替换为：
1nn2
21


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
把已完成工作打包为主题
要把已完成的工作打包为 JEZ 框架的主题，请按下面操作：
• • • •
在 JEZ Thema 的 themes 内新建一个目录，我们命名为 jez_rego 在 themes/jez_rego 目录内新建另外一个 images 目录 把所有先前图像切片从 JEZ Thema 的 images 目录拷贝到该新建 themes/jez_rego/images 目录 把所有其它为 JEZ Rego 原始图形化设计作特定修改和/或创建的文件，除 templateDetails.xml 外， 保持目录结构、都拷贝到 themes/jez_rego 目录。

你应该有以下目录/文件结构：
jez_rego |_ css | |_ layouts.css |_ images | |_ bg_bottom.png | |_ bg_extras.png | |_ bg_header.png | |_ com_bl.png | |_ com_br.png | |_ com_fl.png | |_ com_fr.png | |_ com_hl.png | |_ com_hr.png | |_ mod_left-bl.png | |_ mod_left-br.png | |_ mod_left-fl.png | |_ mod_left-fr.png | |_ mod_left-hl.png | |_ mod_left-hr.png | |_ mod_right-bl.png | |_ mod_right-br.png | |_ mod_right-fl.png | |_ mod_right-fr.png | |_ mod_right-hl.png | |_ mod_right-hr.png | |_ mod_right-s.png
22


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
| |_ mod_user1-l.png | |_ mod_user1-r.png |_ wrappers | |_ component.php | |_ extras.php | |_ users.php |_ custom.php
要保留主题的特定参数，从 JEZ Thema 目录拷贝 params.ini 文件到 themes/jez_rego 目录。

拷贝后，我们推荐您恢复（除了 templateDetails.xml）所有其他针对该主题特定编辑过的文件——包括 params.ini，要 在 themes/jez_rego 目录外——至 JEZ Thema 的原始状态以防止这些文件影响其他主题。

只 要想在现实中加速主题的载入并防止可能的冲突，除了 themes/jez_rego/wrappers 目录的文件，你应当仅 保留修改过的和/或新创建的代码，而不管它是何种类型 (HTML, CSS 或 PHP)，拷贝到 themes/jez_rego 目录。

例如， themes/jez_rego/css/layouts.css 文件应当仅包含第四步指定的样式表，并且 themes/jez_rego/custom.php 文件应当仅包含：
<?php // additional positions $this->params->set('_modPathway', $this->countModules('pathway') ? 1 : 0); $this->params->set('_modUser9', $this->countModules('user9') ? 1 : 0); ?>
现在，是时候继续编辑了。

在文本编辑器内打开 templateDetails.xml。

搜索标签“Default Theme”，你 应当看到 JEZ Thema’的默认主题参数的 XML 声明。

添加下列标记标签至声明</param> 标签的右边：
<option value="jez_rego">JEZ Rego</option>
这将使得在 Joomla 管理员面板内编辑 JEZ Thema 参数时我们的主题可选。

要使主题便携，在<files>和</files>标签间添加下列 XML 代码：
<filename>themes/jez_rego/custom.php</filename> <filename>themes/jez_rego/params.ini</filename> <filename>themes/jez_rego/css/layouts.css</filename>
23


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
<filename>themes/jez_rego/images/bg_bottom.png</filename> <filename>themes/jez_rego/images/bg_extras.png</filename> <filename>themes/jez_rego/images/bg_header.png</filename> <filename>themes/jez_rego/images/com_bl.png</filename> <filename>themes/jez_rego/images/com_br.png</filename> <filename>themes/jez_rego/images/com_fl.png</filename> <filename>themes/jez_rego/images/com_fr.png</filename> <filename>themes/jez_rego/images/com_hl.png</filename> <filename>themes/jez_rego/images/com_hr.png</filename> <filename>themes/jez_rego/images/mod_left-bl.png</filename> <filename>themes/jez_rego/images/mod_left-br.png</filename> <filename>themes/jez_rego/images/mod_left-fl.png</filename> <filename>themes/jez_rego/images/mod_left-fr.png</filename> <filename>themes/jez_rego/images/mod_left-hl.png</filename> <filename>themes/jez_rego/images/mod_left-hr.png</filename> <filename>themes/jez_rego/images/mod_right-bl.png</filename> <filename>themes/jez_rego/images/mod_right-br.png</filename> <filename>themes/jez_rego/images/mod_right-fl.png</filename> <filename>themes/jez_rego/images/mod_right-fr.png</filename> <filename>themes/jez_rego/images/mod_right-hl.png</filename> <filename>themes/jez_rego/images/mod_right-hr.png</filename> <filename>themes/jez_rego/images/mod_right-s.png</filename> <filename>themes/jez_rego/images/mod_user1-l.png</filename> <filename>themes/jez_rego/images/mod_user1-r.png</filename> <filename>themes/jez_rego/wrappers/component.php</filename> <filename>themes/jez_rego/wrappers/extras.php</filename> <filename>themes/jez_rego/wrappers/users.php</filename>
这将赋予你打包所有位于 JEZ Thema 目录内文件、同时保留目录结构，为单个压缩 ZIP 或 GZ 文件，并使用 它来安装 JEZ Thema 到另外的 Joomla! 1.5 站点而无须影响新建的 JEZ Rego 主题。

现在，切回你的 Joomla 管理员面板，到 扩展 -> 模板管理器。

在已安装模板列表，点击 JEZ_Thema 以编 辑它的参数，选择 JEZ Rego 作为默认主题并保存改变。

把 JEZ Rego 作为 JEZ Thema 主题包下载 [zip].
24


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
把已完成工作打包为独立模板
首先，我们需要添加所有拷贝至 JEZ theme base 目录的新文件，同时在 JEZ Thema 的元数据文件内创建 JEZ Rego 模板。

用文本编辑器打开位于 JEZ Thema 目录内的 templateDetails.xml 文件，然后添加下列 XML 代码至 <files> </files>标签间的某个地方：
<filename>themes/jez_rego/images/bg_bottom.png</filename> <filename>themes/jez_rego/images/bg_extras.png</filename> <filename>themes/jez_rego/images/bg_header.png</filename> <filename>themes/jez_rego/images/com_bl.png</filename> <filename>themes/jez_rego/images/com_br.png</filename> <filename>themes/jez_rego/images/com_fl.png</filename> <filename>themes/jez_rego/images/com_fr.png</filename> <filename>themes/jez_rego/images/com_hl.png</filename> <filename>themes/jez_rego/images/com_hr.png</filename> <filename>themes/jez_rego/images/mod_left-bl.png</filename> <filename>themes/jez_rego/images/mod_left-br.png</filename> <filename>themes/jez_rego/images/mod_left-fl.png</filename> <filename>themes/jez_rego/images/mod_left-fr.png</filename> <filename>themes/jez_rego/images/mod_left-hl.png</filename> <filename>themes/jez_rego/images/mod_left-hr.png</filename> <filename>themes/jez_rego/images/mod_right-bl.png</filename> <filename>themes/jez_rego/images/mod_right-br.png</filename> <filename>themes/jez_rego/images/mod_right-fl.png</filename> <filename>themes/jez_rego/images/mod_right-fr.png</filename> <filename>themes/jez_rego/images/mod_right-hl.png</filename> <filename>themes/jez_rego/images/mod_right-hr.png</filename> <filename>themes/jez_rego/images/mod_right-s.png</filename> <filename>themes/jez_rego/images/mod_user1-l.png</filename> <filename>themes/jez_rego/images/mod_user1-r.png</filename> <filename>themes/jez_rego/images/night_city.jpg</filename>
其次，我们将从独立模板包内删除不必要的文件。

例如，你也许不想保留默认的示例主题。

要完全删除示例主 题，您需要： 1. 删除 JEZ Thema 的 themes 目录内的 sample 目录。

25


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
2. 在 templateDetails.xml 编辑器窗口， 我们需要删除所有关联删除目录和它嵌套目录/文件的文件名节 点。

要做到该点，仅需正规表达式模式搜索：
^[ts]+<filename>themes/sample/[^<]+</filename>[rn]
再把所有符合条件的替换为空。

3. 现在你有两个选择：删除默认主题参数或仅从默认主题参数内删除示例主题选项。

1. 要删除默认主题参数，不需删除对应的参数声明块，你应当替换默认主题参数的 XML 声明：
<param name="theme" type="list" default="" label="Default Theme" description=""> <option value="">No Theme</option> <option value="sample">Sample Theme</option> </param>
用以下声明替换：
<param name="theme" type="hidden" default="" />
2、如果您仅想从默认主题参数内删除示例主题选项，您仅需删除相应默认主题参数的 XML 声明块 内的下列 XML 行代码。

<option value="sample">Sample Theme</option>
您或许还想删除独立模板包内的特定或所有模板创建参数。

要做到该点，你应当使用隐藏声明、而不是删除声 明块，来替换不需要的参数的 XML 声明。

下面是某些示例： 1. 在本指南内删除和禁用模块位置与通用容器关联的参数。

寻找：
<param name="wrapperNav" type="list" default="plain" label="Global Nav Wrapper" description=""> <option value="plain">No rounded corners</option> <option value="module">Joomla rounded module chrome</option> <option value="round6imgs-nested">jezRounded6ImgsNested module chrome</option>
26


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
<option value="round6imgs">jezRounded6Imgs module chrome</option> <option value="round1img">jezRounded1Img module chrome</option> <option value="round1img-scroll">jezRounded1ImgScroll module chrome</option> </param> <param name="modUser3" type="radio" default="1" label="User3 Module Position" description="No to always hide or yes for auto detect"> <option value="1">Yes</option> <option value="0">No</option> </param> <param name="modUser3Chrome" type="list" default="raw" label="Module Chrome" description=""> <option value="raw">Raw</option> <option value="xhtml">xHTML</option> <option value="rounded">Rounded</option> <option value="jezRounded6ImgsNested">jezRounded6ImgsNested</option> <option value="jezRounded6Imgs">jezRounded6Imgs</option> <option value="jezRounded1Img">jezRounded1Img</option> <option value="jezRounded1ImgScroll">jezRounded1ImgScroll</option> </param> <param name="modUser4" type="radio" default="1" label="User4 Module Position" description="No to always hide or yes for auto detect"> <option value="1">Yes</option> <option value="0">No</option> </param> <param name="modUser4Chrome" type="list" default="raw" label="Module Chrome" description=""> <option value="raw">Raw</option> <option value="xhtml">xHTML</option> <option value="rounded">Rounded</option> <option value="jezRounded6ImgsNested">jezRounded6ImgsNested</option> <option value="jezRounded6Imgs">jezRounded6Imgs</option> <option value="jezRounded1Img">jezRounded1Img</option> <option value="jezRounded1ImgScroll">jezRounded1ImgScroll</option> </param> <param name="modBreadcrumb" type="radio" default="1" label="Breadcrumb Module Position" description="No to always hide or yes for auto detect">
27


简易五步法创建 Joomla 框架模板
翻译者：yooyooh
<option value="1">Yes</option> <option value="0">No</option> </param> <param name="modBreadcrumbChrome" type="list" default="raw" label="Module Chrome" description=""> <option value="raw">Raw</option> <option value="xhtml">xHTML</option> <option value="rounded">Rounded</option> <option value="jezRounded6ImgsNested">jezRounded6ImgsNested</option> <option value="jezRounded6Imgs">jezRounded6Imgs</option> <option value="jezRounded1Img">jezRounded1Img</option> <option value="jezRounded1ImgScroll">jezRounded1ImgScroll</option> </param> <param name="navFx" type="radio" default="0" label="Enable?" description=""> <option value="1">Yes</option> <option value="0">No</option> </param> <param name="navFx_fxDuration" type="text" size="5" default="500" label="Effect Duration" description="Effect duration in milliseconds" /> <param name="navFx_firstSubDirection" type="list" default="vertical" label="Dropdown Direction" description="Direction of dropdown effect (occured when mouse over first level sub menus): vertical, horizontal or both"> <option value="vertical">Vertical</option> <option value="horizontal">Horizontal</option> <option value="both">Both</option> </param> <param name="navFx_deeperSubDirection" type="list" default="both" label="Flyout Direction" description="Direction of flyout effect (occured when mouse over deeper level / nested sub menus): vertical, horizontal or both"> <option value="vertical">Vertical</option> <option value="horizontal">Horizontal</option> <option value="both">Both</option> </param>
替换为：
<param name="modUser3" type="hidden" default="0" />
28

。