T3架构

T3架构

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

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

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

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

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

 

t321.png

 

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

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

t322.png

 

 

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

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

如何建立多种模板风格

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

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

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

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

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

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

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

t302.png

 2、如何新建一个主题

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

左边是主题的常规的设置,右边则是预览效果(当前是默认的主题)

t303.png

 

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

t304.png

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

t305.png

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

一、存在的问题


T3模板中 鼠标移入到菜单项,子菜单会有图片的介绍或者登录的输入框。像这样的问题,想必大家都会遇到

二、如何解决


在T3模板,矩形菜单可以有在一个栏目中插入一个模块,这个模块一定是发布状态。

1、创建分栏

进入模板管理—选择T3默认的模板—进入megamenu页面。

选择最后一个栏目点击上方的添加栏目,如图

tianjia.png

2、插入模块

添加完成后,在模块的地方,选择一个模块,会把模块的内容输出来。

mokuai.png

如图,选择一个登录的模块显示在这一栏目。

你可以建立自己所需要的模块,放置在栏目中。

mokuai-xiaoguo.png

保存好后菜单项插入模块就完成了。

三、查看前台效果


如图

de.png

 

 

一、存在的问题


在建立网站的导航时,需要实现分栏的效果,如果你使用的是T3的模板。那么模板自带的矩形菜单是可以实现分栏,插入模块,可以给菜单项添加图标。如果你的模板这一项功能,那么你可以通过找到相关的菜单模块。

而在这编文章中,我们将讲解,如何实现T3模板的菜单分栏的效果。

要实现的分栏效果如图

fenlan.png

二、准备条件—建立菜单项


在建立菜单项的时候注意菜单项的级别关系,如图

caidan.png

三、配置分栏


进入模板管理,选择使用中的T3模板,如图

moban.png

进入模板页面,点击megamenu按钮,如图

juxingcaidan.png

进入如图下图的界面

jxcd.png

点击矩形菜单,出现分栏的菜单。如图有三个栏目,每个栏目都有子菜单项

jxcd2.png

开始分栏,点击最外层的线框,给予一个宽度。如图在子菜单的宽度写入900像素

kuandu.png

点击第二栏目的虚线框,再点击向右移动的箭头,如图

zuoyi.png

 点击第三栏目的虚线框,再点击向右移动的箭头,如图

zuoyi2.png

点击保存,三个栏目分栏完成,如图

fenlan-cheng.png

距离要实现的目标效果还没有把栏目的子菜单显示出在栏目的下方,如何操作,如以下

 选择第一栏目的虚线框,然后点击开启分组,如图

zu.png

开启分组后的效果,如图子菜单就会在栏目的下方

zu2.png

同样的操作把第二栏目和第三栏目开启分组,最后实现的效果如图

zu3.png

前台分栏的效果


 xiaoguo.png

 

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

他们通常会定义一个属于自己修改的样式文件,一般会叫【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文件,如图!一看就明了