Gallery:外观主题:如何新建一个外观主题

如何新建外观主题

喔，原来你做了一个超酷的相片相册模板，还想把它用到Gallery上。那么在这个教程中，我会介绍如何将HTML相册和相片模板转为Gallery外观主题的。

这是假定你一定程度上掌握HTML和CSS并基本了解 Gallery外观主题的情况下给出的教程。你并不需要精通PHP，但掌握基本的脚本编写知识和编程模式还是有帮助的。

准备好要新建一个外观主题了么？准备好了的话就开始啦。

HTML模板

我建了两个基本的HTML模板，一个用于显示相册缩略图，另一个用来查看单个相片。我利用stylesheet和一些JavaScript函数来控制HTML模板的外观呈现。因为JavaScript会重设缩略图容器的尺寸来使其符合页面甚至是窗口所需，所以我将此外观主题命名为AutoRC—Auto Rows and Columns（感谢floridadave，这名字不赖 :D）。

设计相对简单—我选择的是在相册模板各缩略图之下显示相册标题，描述和图片标题的方式。仅标题和字母被显示在相片详细信息的模板上。

http://codex.gallery2.org/images/7/78/Autorc-html-album-sm.png

http://codex.gallery2.org/images/5/5b/Autorc-html-photo-sm.png

这里有我建立的用于mockup的文件：

请注意这些文件没有在IE6中做过测试。在此教程完结之后，我会将这些文件更新以适于IE6。

• album.html
• functions.js
• photo.html
• theme.css

开始作业

首先我们要做的是为新外观主题建一个目录。我们会将源HTML模板，风格页和JavaScript的拷贝放在此文件夹下。

1. 首先，在gallery2/themes/下新建一个'autorc'文件夹
2. 接着讲theme.css和functions.js复制到autorc文件夹中
3. 在gallery2/themes/autorc中，新建一个名为'templates'的文件夹
4. 将album.html和photo.html复制到新建的templates文件夹中
5. 将album.html和photo.html的文件扩展名修改为.tpl
6. 由于我没有为admin，error，module或progressbar 页面创建模板，所以直接从Matrxi外观主题复制过来了（themes/matrix/templates）

接下来，我们创建theme.inc文件。

此后，我们会将HTML页面转为Smarty模板。