T3架构

T3是我个人最新喜欢和看好的Joomla模板框架，非常的棒。

T3 模板——响应式布局04 原

在这一篇中，仍然是接着讲关于模板布局，我们会讲到布局设置里面的响应式布局

1、关于响应式布局的介绍：

在后台我们看到响应式的设置，如图

T3模板的响应式布局，针对频幕的宽度设置了，宽屏，普通宽屏，平板电脑、平板、手机。选择不同的频幕就可以给相对应的模块设置。

举一个简单例子：有人多人会经常问到,在手机屏幕下，不把这个模块位置上的内容显示出来，怎么设置的？

找到相对应的位置，把模块位置上方的眼睛点击为红色，红色的意思是，在当前的频幕下这个模块的位置不显示。如果要切换回到点击框内的文字部分就可以切换了。如图

T3 模板——06自定义样式文件custom.css 原

在我们修改模板样式的时候总会遇到这样的问题，把修改的样式写在哪个文件呢？如果直接改掉模板写好的有可能会影响到其他，而且不益修改！直接修改的这种方法是不支持！

他们通常会定义一个属于自己修改的样式文件，一般会叫【custom.css】，当然了名称是随意取的！，建立完成后当然是把文件导入了；

那么问题来了！

要怎样导入样式文件呢？

比如拿默认【protostar】模板来说，我们在【index.php】文件就发现了这个模板引入样式文件如下

$doc = JFactory::getDocument();//这是引入文件必要要有的

$doc->addStyleSheetVersion($this->baseurl . '/templates/' . $this->template . '/css/template.css'); //引入当前模板下的css文件夹中的template.css

不同的模板它引入的文件方式方法以及在哪个文件引入都会有所不同，所以不同统一而论；（如果你在模板css问价中看到有样式文件大小是0的那么这个文件就是你而准备的！）

t3自定义样式文件

而t3模板呢，它已经为用户写好了加载自定义的样式文件，用户只需要在模板的css文件中创建一个文件名为custom的样式文件就可以了！

那么t3模板是如何实现的呢？你可以查看模板下的/tpls/blocks/head.php文件，如图！一看就明了

T3 模板——主题的设置01 原

T3框架从2.0.x版本开始就支持2个基本模板：T3_blank和T3_bs3_blank,它们就是T3框架的空白模板。（如何下载得到它，请点击这里）如图

选择一个模板进入模板的编辑页面，我们选择 t3_blank_默认模板（为了方便大家更能了解T3，我们汉化了T3，如果你想得到T3的语言包可以到我们的汉化平台上查找，或者点击这里）。我们将一一介绍每一个栏目的设置选项。

如何建立多种模板风格

为什么要建立多种模板风格？通常情况下当已有的模板的风格不适合当前页面的情况下可以考虑，建立另一种模板风格。比如当前模板没有一个位置是符合我需要的，但是修改当前风格有可能会影响到其他页面的布局(因为当前风格在其他页面使用)。这种情况下一般我们会选择复制出多一种模板风格出来。接下来就教教大家如何设置模板风格！

我们点击编辑页面会发现，在选项栏的上面有一个“目前的样式”，“样式名称”如图

当前风格：就是你当前选择的哪个模板风格，一个模板有多种风格，每一个风格都可以有不同的设置，（包括位置的设置，字体的设置······），

那么每个风格的名称是怎么改的呢?就是通过“样式名称”这一项进行修改的。

1.模板的主题设置：如图

主题设置包括了logo的设置，如果你需要当前页面显示与其他页面的logo不一样那么你可以在这里设置当前页面的logo。

最主要的设置当然是主题的设置了，不知道你有没有注意到图片的主题下拉列表的选项？那你知道这些选项是什么意思吗？意思很明了，选择当前模板下的一个主题，已有的主题会显示在下拉列表的下方。

2、如何新建一个主题

如果你喜欢当前的主题设置，你可以为当前模板建立一个主题。如何建立，点击上方的 “thememagic” 按钮，你就可以进入主题的设置了。如图

左边是主题的常规的设置，右边则是预览效果（当前是默认的主题）

我们从默认的主题复制一份，点击预览的下拉小箭头的另存为可进行复制，会弹出一个输入主题标题的输入框，如图，我们输入“new”，最后点击接受，一个主题就复制好了！

3.设置主图的各个选项：如图

新建一个主题方法大家已经掌握，最后要记得在主题选择已经建好的主题。

T3 模板——布局的设置02 原

接着上一篇的主题设置讲解完毕，那么这一篇中讲解模板中的布局设置。这是在模板设置里面最主要的部分。默认的布局如图

1、布局的风格——模板的位置

如图划框的部分是当前模板下布局风格。你可以为当前模板下新建另一个布局风格，点击它右边的另存为副本就可以。(注意了，每一个模板都有一个布局风格)。

对比一下这两张图片就知道布局风格的区别会在哪了，没错就是模块的位置。这也是决定模板风格的重要因素。

2、调整布局风格里的模板的位置

T3的位置是基于 Bootstrap 网格，你最多可以添加 6 个模块位置到高亮区域，使用调整栏左右移动，可以调整模块位置的宽度。点击右上角的配置图标你可以修改模块位置。

如图，图中的上方我选择的是两个位置，则在2的数字是高亮显示的，下方我选择的显示3个模块的位置，则3的数字是高亮显示。那么相对应的模块的位置就在框内显示的文字。如果是“none”,就是代表这个模块位置还没有名字，你可以把鼠标放置在它的上方，右上角出现一个图标，点击它选择一个模块位置名称。

中间的黄色区域就是组件输入的地方。比如说，当前页面的菜单类型是输入一个分类下的文章列表，那么“component”这个位置就是它输入的地方。旁边的两个位置是可以和组件位置相结合起来计算的。比如：当前页面左边有模块显示，右边没有，那么组件输出的位置则会把右边的位置占满，反之如果两旁都没模块显示，组件的位置也会把两旁铺满。