每个模板都包含一系列的文件和图片,放在Joomla!系统的/templates/目录下,如下所示我们安装了两个模板,一是element,一是voodoo,要注意的是模板的名称与目录的名称一致。

/templates/element 
/templates/voodo

在一个模板目录中,必须有关键文件:
/element/templateDetails.xml
/element/index.php
这两个文件的名称和位置要完全遵守规则,以便Joomla!系统调用。
templateDetails.xml
这是XML格式文件,主要用来通知Joomla!系统加载这个模板的时候有那些文件,同时也描述了作者、版权信息等等;还有模板使用的图片文件的清单. 同时这个文件也是安装文件.
index.php
这是最重要的文件.它通知JOOMLA系统如何布局组件和模块.它是一种PHP与(X)HTML的"混合体".大多数模板还使用其他的一些文件,通常以如下方式命名和放置:
/element/template_thumbnail.png
/element/css/template_css.css
/element/images/logo.png接下来,让我们注意看看各个文件:
/element/template_thumbnail.png
当前模板的浏览器截图(通常使用140*90像素尺寸).安装模板完毕以后,这张图片会以"缩略图"的形式在后台模板管理器中展示.
/element/css/template_css.css
模板的CSS文件
/element/images/logo.png
通常模板开发人员会将图片都放在images目录下,这里我们只有一个文件logo.png。
templateDetails.xml格式
templateDetails.xml 必须包括模板使用的所有文件. 它也包括了作者和版权信息等内容. 在后台的模板管理器这些信息将会被展示,下面是一个XML文件的例子:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="2.5" type="template" client="site">
<name>msxg</name>
<creationDate>2013-09-1</creationDate>
<author>陈星</author>
<authorEmail>该 Email 地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。/authorEmail>
<authorUrl>www.xingzai.org</authorUrl>
<copyright>Copyright (C) 2013 Xing Chen All rights reserved.</copyright>
<license>GNU General Public License version 2 or later</license>
<version>2.5.0</version>
<description>此模板为星仔码头开发</description>
<files>
<folder>css</folder>
<folder>html</folder>
<folder>images</folder>
<folder>js</folder>
<folder>fonts</folder>
<folder>style</folder>
<folder>language</folder>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<filename>component.php</filename>
<filename>error.php</filename>
</files>
<positions>
<position>top-l</position>
<position>top-r</position>
<position>mainmenu</position>
<position>banner</position>
<position>bream</position>
<position>bream-bottom</position>
<position>content-top</position>
<position>content-bottom</position>
<position>sidebar-l</position>
<position>sidebar-r</position>
<position>ad</position>
<position>cxm-5</position>
<position>cxm-6</position>
<position>cxm-7</position>
<position>weblinks</position>
<position>mobile-head</position>
<position>mobile-modlist</position>
<position>mobile-bream</position>
<position>mobile-c</position>
<position>loadjs</position>
</positions>
<config>
<fields name="params">

<fieldset name="basic">

<field name="style" type="list" default="white" label="颜色风格" description="选择一个颜色风格。">
<option value="white">白色</option>
<option value="blue">蓝色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
</field>

</fieldset>

<fieldset name="advanced">
//配置参数
</fieldset>
<fieldset name="LAYOUT">
//配置参数
</fieldset>

</fields>
</config>
</extension>

让我们来解释这些行的意义:

<extension version="2.5" type="template" client="site">

XML文档是后台installer的指示,version="2.5"表示这是Joomla2.5的模板, 参数 type="template" 告诉安装程序安装的是一个模板,client="site"表示前台模板。

<name>XingZai</name>

模板的名称,因为名称用来创建目录,所以不能有不符合目录要求的字符。

<creationDate>25 November 2011</creationDate>

模板建立的日期.

<author>陈星</author>

模板开发人员

<license>GNU General Public License version 2 or later</license>

许可协议

<copyright>Copyright (C) 2011 - 2012 xingzai.org All rights reserved.</copyright>

版权信息

<authorEmail>该 Email 地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。<;/authorEmail>

开发人员的邮件地址

<authorUrl>www.xingzai.org</authorUrl>

作者站点

<version>2.5.0</version>

版本信息

<description>XINGZAI_DESC<br /></description>

模板说明

<files>

这部分声明模板包括的PHP文件和图片文件. 每个文件被列出在<filename>与</filename>之间。
index.php
index.php是(X)HTML和PHP的混合体,它决定了网站的外观呈现。
我们首先来看页面头部的DOCTYPE定义,DOCTYPE决定了浏览器如何页面,特别是如何解释CSS。

<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="" lang="" dir="" >

第一段PHP代码表示禁止直接访问此文件,下面具体的DOCTYPE选择这里不解释了,请看docs.joomla.org上的:
http://docs.joomla.org/Recommended_DocTypes
http://docs.joomla.org/References_about_DocTypes
读取我们设置的语言环境。

<jdoc:include type="head" />

这句话引入了页面的header部分,接下来的代码如下:

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/xingzai/css/mobile.css" type="text/css" />
<link rel="stylesheet" href="/templates/xingzai/css/position.css" type="text/css" media="screen,projection" />
$files = JHtml::_('stylesheet','templates/xingzai/css/general.css',null,false,true);
if ($files):
if (!is_array($files)):
$files = array($files);
endif;
foreach($files as $file):
?>
<link rel="stylesheet" href="/" type="text/css" />
<?php
endforeach;
endif;
?>

/css/template_css.css 这句话引入了模板CSS文件。
一个空白JOOMLA模板

<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
</body>
</html>

尽管这个模板完成了,可是看起来并不是令人激动。这个模板定义了如下部分:

  • 站点名称
  • 顶部区域
  • 左边区域
  • 正文部分(组件)
  • 右部区域

现在我们创建三栏式的JOOMLA模板,而且这个三栏布局弹性的。页面宽度一直是一个问题,大约17%的浏览者使用800*600的分辨率. 79%的人使用1024*768以上或者更高的分辨率,采用弹性布局可以避免页面在1024分辨率下显得过窄,同时在更小的分辨率先也能正常浏览。

通常,设计者喜欢用table来进行布局,表格可以方便的使用"百分比"模式进行栏宽度设置,但是这种方法有下列弊端:
与CSS布局相比table布局有很多"额外代码"。

  • 搜索引擎也不易接受.
  • 代码通常是CSS布局的双倍尺寸
  • 还有图像占位 "spacer gifs"在使用table时也是问题.
  • 采用table布局不容易维护。

小贴士:
CSS 缩写通常有可能对某些CSS代码进行 "缩写",从而减少代码量. 我们来看一个关于 padding 和 margin 的例子

margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;

可以这样写:

margin: 5px 10px;

每种样式定义几乎都可以"缩写". 当你完成样式表, 用"缩写"去替换掉比较复杂的书写格式,比如标准格式关于font:

font: font-size |font-style | font-variant | font-weight | line-height | font-family

这里有个例子:

font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:1.3em;

变成这样:

font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

左/中/右三栏都被给出了它们自己的元素. 每部分都向左靠并形成"100%"屏幕宽度. clear:both 页脚的div跨越三栏,实现100%宽度。为了使布局美观, 让每部分内容周围有一定的空间, 我们需要加入一些"栏空间", 被称为"gutter"。 很不幸,这里会发生一个问题. 由于IE没有正确的解析border(box框架,有兴趣的可以看看相关的书籍,译者),我们这里采用在区域之间再加上一个div来解决区域之间的空隙问 题. 下面是代码:

<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="content">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="raw" />
</div>
</div>
</div>
<!--end of wrap-->
</body>

添加inside类:

.inside {padding:10px;}

这种简单的布局方式是我们使用CSS定义JOOMLA模板的好方法. 这样的方式带来两个优点, 代码短和容易控制. 然而,这并不是所谓的合理的代码顺序. 我们必须使用一些类似于 "nested float"的高级CSS技巧.合理代码顺序有助于搜索引起收录,而目前的布局显然重要的组件的内容会最后出现。虽然这优点复 杂,compassdesigns.com有一个文件来说明如何创建这样的文件,这里不再详细说明了。

默认的Joomla CSS。

到目前为止,我们的CSS都是关于布局的,这样的页面看起来是一点也不生动漂亮,接下来,我们加入一个格式CSS代码。先来添加两个定义,代码如下:

body {
text-align:center; /*center hack*/
}
#wrap {
min-width:760px;
max-width:960px;
width: auto !important; /*IE6 hack*/
width:960px; /*IE6 hack*/
margin:0 auto; /*center hack*/
text-align:left; /*center hack*/
}
#header {}
#sidebar {float:left;width:20%; overflow:hidden; }
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
#sidebar-2 {float:left;width:20%; overflow:hidden;}
#footer {clear:both;}
.inside {padding:10px;}

首先我们使用一些小技巧,保持页面居中。这主要是由于IE6,IE7的问题。(具体还是参考CSS文档吧,译者)

小贴士:我们定义column的宽度是百分比,而他们的容器div是固定宽度的,这可能看起来很奇怪,其实这是有好处的,一是更加灵活的弹性布局,如果我们要改变宽度,我们仅仅需要改动一个数值。

接下来的CSS我们做了一些全局性的设置,代码如下:

/*typography*/* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76.1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3em;
}
#header {
background:#0099FF;
}
#footer {
background:#0099FF;
}
#main-body {
background: #CC0000;
}
#sidebar-2 {
background:#009933;
}
#content {
background: #999999;
}
#sidebar {
background: #009933;}

每元素都被设定为"0"margin 和 "0" padding ,然后所有的块被定义了底部边距. 你可以在这里找到关于全局定义的相关内容clagnut and left-justified。字体大小被设置成76.1%. 这也是为了在不同浏览器访问时自适应屏幕分辨率. 字体的单位都设置成 em. 字高 line-height:1.3em 设定更便于阅读. 这意味着页面可以适应不同访问者的不同页面分辨率。尽管Joomla!可以通过模板重构核心输出的任何内容,然后渲染器仍然可能在内容中输出部分table,这些CSS对于模板开发者来说也是相当重要的。根据一些社区的研究,这些CSS标记清单如下:

  • .adminform
  • .article_seperator
  • .back_button
  • .blog
  • .blog_more
  • .blogsection
  • .button
  • .buttonheading
  • .category
  • .clr
  • .componentheading
  • .contact_email
  • .content_rating
  • .content_vote
  • .contentdescription
  • .contentheading
  • .contentpagetitle
  • .contentpane
  • .contentpaneopen
  • .contenttoc
  • .createdate
  • .fase4rdf
  • .footer
  • .frontpageheader
  • .inputbox
  • .latestnews
  • .mainlevel
  • .message
  • .modifydate
  • .module
  • .moduletable
  • .mostread
  • .newsfeed
  • .newsfeeddate
  • .newsfeedheading
  • .pagenav
  • .pagenav_next
  • .pagenav_prev
  • .pagenavbar
  • .pagenavcounter
  • .pathway
  • .polls
  • .pollsborder
  • .pollstableborder
  • .readon
  • .search
  • .searchintro
  • .sectionentry1
  • .sectionentry2
  • .sectionheader
  • .sitetitle
  • .small
  • .smalldark
  • .sublevel
  • .syndicate
  • .syndicate_text
  • .text_area
  • .toclink
  • .weblinks
  • .wrapper

关于这张清单请注意.我们看到的很多设计有其自定义的CSS布局设计. 一些定义的是有优先顺序的.
比如:

a {color:blue;} a:link {color:red;}
.contentheading {color:blue;}
div.contentheading {color:red;}

链接的颜色和 .contentheading 的颜色将是红色的, 定义是特殊的(as .contentheading 是包含在一个 <div> 里面的),在我们的模板例子中, 你常常会看到一些特殊的规则. 比如一个class 出现于 table. 下面是例子:

.moduletable table.moduletable
.moduletable 是一个包含组件的<div>的名字. table.moduletable 将应用一个样式到 table 类型是 ="moduletable" on it.
.moduletable 将应用自己的样式而不考虑 class 里面的定义.
a.contentpagetitle:link .contentpagetitle a:link
a.contentpagetitle:将应用样式只要有 a .contentpagetitle 标记的class 链接上.
.contentpagetitle a:link 会应用所有的INSIDE .contentpagetitle 链接.

这并不难理解, 这常常使绝大多数的样式应用比较容易,你也不希望看到有很多的特例。一些有价值的链接:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.meyerweb.com/eric/css/link-specificity.html
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
此刻我们的模板使用了很多 table, 实际上12个 这会导致页面访问慢. 为了减少 table 我们在使用 jdoc:include调用模块的时候要使用 $style参数。