joomla K2模板制作

我将以JA的模板teline iv为例讲解如果创建，修改K2模板。

------------------------------------------------------------准备工作-------------------------------------------------------------

1.将components\com_k2\templates（tmpl）文件夹中的文件全部复制到templates\ ja_teline_iv_t3（模板文件夹）\html\com_k2\templates中。在这里，我们将看到generic.php、register.php等文件和一个名为default的文件夹。

2.在当前目录下复制default文件夹并重命名为blog。

------------------------------------------------------------后台配置----------------------------------------------------------

3.进入joomla后台，进入K2组件的类别，打开其中一个类别的编辑页。路径为components（组件）-K2-categories（类别）-打开项目标题-进入edit category(编辑类别)。在右侧有category item layout（分类项目布局）-select a template（选择一个模板），下拉菜单可以看到刚刚创建的blog。选中blog并保存。

4.回到前台，打开刚刚修改过模板的页面，刷新，没有任何变化。因为我们只是复制出了blog文件夹，并没有修改它。

5.接下来，就去修改blog里面的文件吧。

-----------------------------------------------------------知识讲解------------------------------------------------------------

6.blog文件夹中有多个php文件，这些文件对应了K2在前台的页面。比如item.php对应了前台显示item（项目、文章）的 页面。

7.我们打开item.php，查看其大致结构，其中有itemTitle,itemAuthor,itemToolbar,itemBody等节点，我们能看出这就是用来显示item的页面。

8.大约在40行，有一句 <h2 class="itemTitle">，这是用来定义文章标题大小，我们尝试将h2改成h6，再将结束标志<\h2>改成<\h6>,刷新前台页面，我们就会看到文章标题的字体已经变小。如此一来，只要我们稍稍熟悉php的结构，就能对这个文件做一定的修改以改变K2的前台样式。

9.以上的方式修改的只是php文件，而非真正修改其样式。那如何修改K2的css文件呢？

------------------------------------------------------修改全局的K2样式----------------------------------------------------------

10.在路径components\com_k2\css中保存了K2的样式文件，有两个文件，修改了这两个文件就能修改K2的样式，这里的样式将会被应用在K2的各个模板，除非被模板覆盖。

----------------------------------------------------修改模板样式--------------------------------------------------------------------

12.修改模板中的K2样式，如果我们希望某一种样式只在某一个模板中出现。

13.比如，我们希望在blog这种模板中，项目标题的文字颜色是蓝色的。

14.回到路径templates\ja_teline_iv_t3\html\com_k2\templates\blog中，创建item.css文件，打开item.php，将css文件引入其中。在这个php文件中找一个合适的位置（一般在开头，不能放在<?php?>标签中）添加这样的一段代码<link href="templates\ ja_teline_iv_t3\html\com_k2\templates\blog\item.css"  type="text/css" rel="stylesheet">  其实就是将刚刚创建的css文件引入，注意这里的路径是需要从网站的跟算起。

15.利用浏览器的审查元素功能可以看到项目标题的css类名是catItemTitle。打开item.css，添加. catItemTitle {color:green;}刷新页面，可以看到标题颜色已经被修改。利用同样的方法可以修改K2的任一个元素样式。