定制T3框架(四)自定义CSS和自定义ThemeMagic

四、自定义CSS

自定义模板使用CSS,无需LESS

Joomla T3框架使用 LESS 开发,LESS文件被编译为CSS文件。每次编译后、CSS文件将被覆盖,所以我们建议您不要使用定制CSS来开发你的网站,因为当您编译,您的工作可能会丢失。

自定义CSS无需LESS,您的工作将不会丢失,您必须使用位于 templates/t3_blank/css 的文件 custom.css 。

Custom.css 文件的一些特点

  • 该文件包含在默认主题下,您不需要创建新的。
  • 这个文件被称为您模板的最后一个文件,它不会被覆盖。
  • 该文件不是一个来自LESS的编译文件,所以它当您编译时,它不会被覆盖或丢失。

处理文件

Custom.css文件和其他任何CSS文件都是相同的,当您处理template.css或其他CSS文件,为您的模板平常使用的CSS风格

让我们检查前端

 

五、自定义ThemeMagic

T3框架拥有容易定制的、强大的ThemeMagic。可以在ThemeMagic 配置无限的参数。左边菜单配置面板,右边的面板是您的主页,所以当您改变参数设置,点击“预览”按钮,可以在右边面板查看您网站前端的变化。

让我们看看Thememagic的参数。

 

为ThemeMagic添加新的参数

你可以设置无限数量的参数。您可以定义一组新的参数,然后添加为新的参数组。自定义参数设置在文件夹templates/t3_blank的templateDetail. xml文件

步骤一:定义一个新的组

<fieldset name=”custom1_params” label=”CUSTOM1_LABEL”>

</fieldset>

步骤二:为新的组定义参数

<field name=”inputBorderRadius”

type=”text”

default=”3px”

class=”input-tiny”

label=”CUSTOM1_ELEMENT_RADIUS_LABEL”

description=”CUSTOM1_ELEMENT_RADIUS_DESC” />

</field>

步骤三:定义一个LESS参数

定义一个新的LESS参数,具有相同的内容,例如:@input BorderRadius: 3px;

步骤四:在LESS文件的某些地方使用 “@input BorderRadius”

它取决于你,只是觉得你如何想要使用这个参数,以及它如何影响到模板。它需要你有一定的LESS和CSS基础知识。我们建议您添加到文件style.less:

modal-t3-signup {
.border-radius @input BorderRadius);

步骤五:定义语言连接

打开模板语言文件 language\en-GB\en-GB.tpl_t3_blank.ini 然后定义您上面使用的参数。

定制T3框架(三)模块位置

三、模块位置

关于Joomla T3框架的模块位置

如果您使用过JA T3 V2,你可能熟悉新版本的模块位置。它们并没有多大差异。你可以创造出无限的模块位置,然后将它们分配给区块。
如果您将模块位置添加到一个特定的区块,你必须定义你想添加新模块的布局位置。

添加模块位置

步骤一:为区块添加模块位置

所有的区块文件位于 template/t3_blank/tpls/blocks ,打开区块文件,添加新的模块位置

<jdoc:include type=”modules” name=”<?php $this->_p(‘your_module_position_name’) ?>” />
<!– SIDEBAR 1 –>

<div class=”ja-sidebar ja-sidebar-1 <?php echo $this->getClass($layout, $col) ?>” <?php echo $this->getData ($layout, $col++) ?>>

<jdoc:include type=”modules” name=”<?php $this->_p($sidebar1) ?>” style=”JAxhtml” />

</div>

<!– //SIDEBAR 1 –>

步骤二:定义新创建的模块位置

你需要在文件 TemplateDetail.xml 定义新创建的模块位置

<positions>
<position>your_module_position_name</position>
</positions>

例如:我将创建在布局 mainbody-content-left 新创建 一个名为 custom-position 的模块位置

<jdoc:include type=”modules” name=”<?php $this->_p($custom-position) ?>” style=”JAxhtml” />

现在,我在 TemplateDetail.xml 中定义模块位置

<positions>
<position>debug</position>
<position>position-12</position>
<position>position-13</position>
<position>position-14</position>
<position>position-15</position>
<position>custom-position</position> <! my created module position />
</positions>

定制T3框架(二)主题定制

二、Joomla T3框架主题定制

主题列表

所有的主题文件都在 templates/t3_blank/less/themes/

每个主题文件夹都包含3个文件

  • template.less
  • variables.less: 这个文件包括所有默认的变量
  • variables-custom.less: 这个文件包含您定制主题的自定义变量。

创建新主题

最好的方法来创建新的主题是从现有主题复制一个。您也可以手动添加。如果您手动添加的,按照以下两个步骤:

步骤一:创建一个主题文件夹

在文件夹: templates/t3_blank/assets/less/themes, 下创建一个新的文件夹.例如,我们将它命名为: custom-theme

 

步骤二:添加文件

在我们创建的文件夹:templates/t3_blank/assets/less/themes/custom-theme下创建 3 LESS 文件: template.less, variables.less,variables-custom.less.

注意: template.less, variables.less 这两个文件必须从其他主题复制,variables-custom.less 包含主题的自定义变量

定制主题

自定义主题,您可以使用模板设置(主题设置选项卡或ThemeMagic)或自定义主题LESS文件位于:templates/t3_blank/less/themes/Theme_Name

编译LESS为CSS

现在,您将需要编译LESS文件到CSS,新创建主题的css文件夹将被编译到位于templates/t3_blank/css/themes/custom-theme css 的主题文件夹

 

当编译LESS为CSS,每个主题都有一个独立的文件夹。该文件夹包含所有必要的CSS文件,它不会覆盖默认的主题——从当你的网站运行在一个特定的主题,它只从一个文件夹加载CSS文件——所以它会加快网站的速度。

添加一些CSS文件::

  • home.css
  • bootstrap.css
  • bootstrap-responsive.css
  • template.css
  • template-responsive.css
  • megamenu.css
  • responsive-home.css
  • home-responsive-home.css
  • component.css

注意 .min.css 是压缩文件.网站将会使用.min.css 文件,当您开启 Optimize CSS 选项在 General setting.

  • home.min.css
  • bootstrap.min.css
  • template.min.css
  • template-responsive.min.css
  • megamenu.min.css
  • home-responsive.css

在管理后台,您可以选择新创建的主题风格

定制T3框架(一)模板覆盖

当您想定制Joomla T3框架时所必须知道的。

一、模板覆盖

模板和样式定义

很多用户关心的是模板和样式的定义。非常基本的道理,模板包括风格样式 、在一个网站,您可以使用一个模板,但是拥有多个风格样式 。您可以从模板创建多个风格样式。

在一个网站,可以同时使用多个风格样式,每个风格样式可以被应用在指定菜单——覆盖默认样式的菜单。

模板覆盖

在T3框架,您可以在指定的菜单项覆盖默认的风格样式。覆盖功能帮助您的前台拥有不同的布局、主题、导航。

你应该遵循覆盖风格的三个步骤

步骤一:创建覆盖风格

创建新的覆盖的风格,您可以复制默认风格样式或者去编辑默认的风格样式,然后将它另存为副本。

复制风格样式

 

保存或另存为副本

 

步骤二:配置风格样式

 

在您创建一个覆盖模板,您可以配置模板(改变布局、颜色、……)。首先,让我们看一下默认模板的布局设置。

步骤三:给菜单分配风格样式

 

模板宽度定制

模板宽度定义为网格并分为一定数量的列(默认是12列)。

改变模板的宽度,打开位于templates/t3_blank/less 的文件 variables.less ,然后定义模板的宽度。

// Default 940px grid
// ————————-
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 40px;
@gridColumnWidth: floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns – 1));

基本的12列网格系统,每一列的宽度是

floor((@T3gridWidth – @gridGutterWidth * (@gridColumns – 1)) / @gridColumns); 

改变模板的宽度,您只需要改变T3gridWidth,gridColumnWidth将自动计算的。

我们建立基本的响应式网格系统:

// 1200px min
@T3gridWidth1200: 1200px; // T3 add
@gridGutterWidth1200: 40px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));

// 980px-1199px
@T3gridWidth980: 940px; // T3 add
@gridGutterWidth980: 40px;
@gridColumnWidth980: floor((@T3gridWidth980 – @gridGutterWidth980 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns – 1));

// T3 Add: 768px-979px
@T3gridWidth768: 740px; // T3 add
@gridGutterWidth768: 20px;
@gridColumnWidth768: floor((@T3gridWidth768 – @gridGutterWidth768 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns – 1));

T3框架的布局系统

Joomla T3框架支持多个布局。想了解更多信息,请查看接下来的指南。

一、关于T3框架布局

T3支持多个默认布局。在每一个布局,它构建了多个区块(头部、主体、高亮区域……)。每个区块包含一个或多个模块位置。你可以为每个区块指定特定的模块。

 

二、多种布局

T3框架支持多种布局,让你的内容灵活显示:3列 (left, content, right) 可以配置为不同的显示方式: Left + Content + Right, Content + Left + Right, Left + Right + Content …

三、布局配置

在布局的部分,将会有2部分配置:布局结构和布局配置。

注意:您可以查看更详细的,关于布局配置的设置指南

在哪里保存设置文件?

每次您改变布局设置,都被保存到一个.ini文件。在您第一次改变设置时,.ini将生成并位于: templates/t3_blank/etc/layout 。
当我改变 default 布局设置。文件 default.ini 生成的所有设置的default的布局。 您可以通过改变文件中的设置,来定制你的布局。

.ini文件设置的存储格式

  • [block2@spotlight-1]
  • position=”position-2″
  • default=”span3″
  • tablet=”span6″

四、定制布局

创建新的布局

步骤1:创建新的布局

有两种方法可以创建新的布局。

另存为副本

当您在后台配置好布局,您可以另存一个布局。

 

添加布局文件

每一个布局都有它们各自的文件,这些文件位于 your_site_folder/templates/t3_blank/tpls

创建新的布局,您可以在这里复制一个文件,然后编辑它——在布局中定义区块。

步骤2:创建区块

在一个新的布局,如果您希望使用新的区块,您可以创建一个。每一块都有它自己的文件。这些文件位于:your_site_folder/templates/t3_blank/tpls/blocks,通过添加新的php文件来创建区块,然后命名或复制一个区块文件并重命名来定制它。

步骤三:自定义区块

每一区块都会分配一定数量的模块,您可以在区块中指定模块位置的使用代码:

<jdoc:include type=”modules” name=”<?php $this->_p(‘your_module_position_name’) ?>” />

<!– SIDEBAR 1 –>
<div class=”ja-sidebar ja-sidebar-1 <?php echo $this->getClass($layout, $col) ?>” <?php echo $this->getData ($layout, $col++) ?>>
<jdoc:include type=”modules” name=”<?php $this->_p($sidebar1) ?>” style=”JAxhtml” />
</div>
<!– //SIDEBAR 1 –>

步骤四:定义块布局

打开定义块布局的PHP文件。

<?php $this->loadBlock (‘block_name’) ?>

<body>

<?php $this->loadBlock (‘header’) ?>

<?php $this->loadBlock (‘mainnav’) ?>

<?php $this->loadBlock (‘spotlight-1’) ?>

<?php $this->loadBlock (‘mainbody’) ?>

<?php $this->loadBlock (‘spotlight-2’) ?>

<?php $this->loadBlock (‘navhelper’) ?>

<?php $this->loadBlock (‘footer’) ?>

</body>

定制布局的代码格式

加载一个内部布局或内部区块

<?php $this->loadBlock (‘blockname’) ?>

加载一个高亮区域

<?php $this->loadBlock (‘spotlight/4cols’, $this->getPosname(‘position-1, position-2, position-3, position-4’)) ?>

包含位置

<jdoc:include type=”modules” name=”<?php $this->_p(‘your_module_position_name’) ?>” />

注意:替代加载模块位置navhelper后,它将在后台为navhelper加载模块配置。

T3框架设置(四)导航设置和菜单分配

五、T3框架的导航设置

闭幕式导航

便携设备上的屏幕都是很小的,唯一的办法是将适应网页的内容是堆栈起来,除非你决定使用浏览器的可见的画面之外的空间。 闭幕式导航能够做到这一点。这个布局充分利用空间,离开屏幕保持内容或隐藏导航来获得一个较大的屏幕尺寸,直到用户采取行动,来浏览它。

 

 

开启“闭幕式导航”

开启这个选项,在您的网站后台,定位到:Extensions(扩展) >> Template Manager(模板管理) >> JA Template(JA 模板) >> open Navigation tab(开启导航选项卡)

前端外观


置顶导航

置顶导航,也被称为固定的网站导航,它是一个被锁定的位置,当用户向下滚动页面时不会消失,换句话说,它可以从网站的任何地方访问,而无需滚动。

增加置顶导航(T3框架开发的模板JA Brisk, JA Mero)

  • 第一步:升级T3框架插件到1.2.1以上
  • 第二步:在桌面和移动设备布局上添加置顶导航类

成为置顶导航,添加类(class)navbar-collapse-fixed-top(折叠菜单),navbar-fixed-top(桌面菜单)在#ja-mainnav div(该文件是:mainnav.php,位于:templates\ja_mero\tpls\blocks)。您需要更新 mainnav div 的 margin-left 和 margin-right

<nav id=”ja-mainnav” class=”wrap t3-mainnav navbar-fixed-top navbar-collapse-fixed-top”>

 

Megamenu 配置

 

T3框架支持MegaMenu,是Joomla所没有的功能。通过Megamenu,您可以更加灵活地显示您的网站菜单系统。使用新的方式的配置,它更容易为您配置大型菜单。

请注意, MegaMenu 设置不是全局设置。如果您使用多个样式,您需要在您想要使用的风格,启用和配置 MegaMenu 选项。

常规配置

 

从T3空白模板设置面板中,选择“ 导航 “选项卡

  • 下拉触发器:选择打开子菜单的方式(鼠标悬停或点击鼠标)
  • 闭幕式导航:在iPad或手机等小屏幕设备应用此选项折叠菜单。显示此设置在上述部分( 闭幕式导航 )
  • 总是显示子菜单:在小屏幕的折叠菜单中,你可以选择当点击导航按钮时,显示所有子菜单或只是主菜单。
  • 导航类型:这个选项允许您使用当前样式的Megamenu或Joomla菜单系统。
  • Megamenu配置:选择菜单megamenu时启用。

Megamenu配置

您应该知道有三种配置

  • sub-Mega Menu 设置
  • 栏目设置
  • 菜单项设置

1. Sub-megamenu setting

这个设置允许您配置sub-megamenu的宽度,增加列,并为其添加类风格。

2.栏目设置

在这个配置,您可以:增加栏目,删除栏目,设置栏目的宽度和给栏目分配模块。

3.菜单项设置

 

在这个配置,您可以:启用或禁用一个菜单项的子菜单,在组合中显示或不显示子菜单,移动向左或向右菜单项,给菜单项分配一个模块,为菜单项添加图标。

如何使用Megamenu设置选项?

添加新的列、行,并为其分配模块。

步骤1:点击列,然后选择添加列/行。
步骤2:在每一列中,添加新列。
步骤3:现在给列/行分配模块。

给菜单项添加一个子菜单

点击你想添加子菜单的菜单项(你只能给没有子菜单的菜单项添加子菜单)。

添加2:在一列中添加模块

步骤1:选择一个没有子菜单的菜单项,然后添加子菜单

步骤2:为sub-megamenu添加行

步骤3:分组菜单

步骤4:为子菜单分配模块

MegaMenu的风格样式

您可以通过添加“额外的CSS类”来改变MegaMenu的风格样式

 

您可以为MegaMenu添加一个外的CSS类,一列或一个菜单项。所以您应该了解限顺序。优先顺序(Mega menu –> Column菜单栏 –> Menu Item菜单项)由低到高。

以下两个文件,都可以为 MegaMenu 添加风格样式.

  • megamenu.less in: plugins/system/t3/base/less
  • megamenu.less in: templates/t3_blank/less

为菜单项添加图标

您可以在需要添加图标的菜单项。添加CSS类来定义图标,或者你可以使用 Bootstrap 的CSS类:http://twitter.github.com/bootstrap/base-css.html#icons

让我们到前台看看

注意:创建一个菜单,然后在MengaMenu启用/删除菜单项。

 

六、菜单分配

将当前应用的风格分配到相应菜单。请记住,菜单分配将覆盖相同菜单的默认风格。

T3框架设置(三)布局设置

选择布局风格

在Joomla T3框架中,每个风格将使用一个布局(但是请记住,一个网站可以使用许多风格,所以一个站点可以使用多个布局,因为T3框架使用多个样式)。

布局配置

在布局设置,有两部分进行配置: 布局结构和响应式布局。

布局结构设置

分配模块到模块位置


设置列数到高亮区域

响应式布局设置

选择响应式布局

在一个响应式布局 启用/禁用的内容

T3框架设置(二)编译LESS为CSS文件和主题设置

二、编译LESS为CSS文件

什么时候使用该选项?

“LESS为CSS文件”的选项的作用是在我们开发网站完成后,在我们网站上运行CSS文件(开发模式关闭),把LESS文件编译为相应的CSS文件。它将覆盖目前所有的CSS文件。

三、主题设置

主题设置允许您配置站点主题、LOGO。也可以在ThemeMagic设置面板里配置。

主题设置

选择一个你希望当前使用的风格作为主题。每个风格对应一个主题。

Logo 设置

T3框架允许您使用图片或者文本作为logo。如果您选择图片logo,浏览并选择图片作为logo。如果您选择文本logo,输入“网站名称”和“标语(可选)”。

现在,让我们看看前台显示效果

改变logo图像并定制logo尺寸

另一个改变logo图像的方法是改变图片路径,在 文件夹templates/ja_t3v3_blank/less 文件variables.less中. 还可以定制logo的尺寸

// T3 LOGO
@T3logoWidth: 270px;
@T3logoHeight: 65px;

@T3LogoImage: “../images/logo.png”;

T3框架设置(一)全局设置

使用Joomla T3框架,您应该知道如何在后台设置功能选项。

一、全局设置

全局设置应用于所有的样式,主题和布局,无论样式设置如何修改。

开发模式

这是一个非常重要的选项,您必须清楚地了解这个选项启用和 禁用 的差别。

当您在开发网站时,您应该启用这个选项。一旦启用,你的网站直接运行在原始文件——LESS。您可以使用firebug进行跟踪。

在您完成网站开发后,您应该编译LESS CSS。这个选项将编译文件 LESS CSS文件。您所更改的 LESS文件将被编译为相应的的CSS文件。

在这种模式下,很容易为​​您的网站定制LESS,但它会降低网站的速度,所以当您开发完成,请关闭该选项。

关闭开发模式

当您的网站开发完成时,您应该禁用该选项。这将增加网站的速度。在这种模式下,网站运行于CSS文件,而不是LESS。CSS文件编译于LESS文件。

假如“开发模式”是关闭的,允许您启用或禁用选项:优化CSS

关闭“优化CSS”

当“优化CSS”选项关闭时,网站按照传统方式加载CSS(CSS文件编译于LESS文件)。

启用“优化CSS”

当启用“优化CSS”时,T3框架会将CSS文件压缩或合并成一个或几个CSS,以提高站点性能。

优化后的css文件位于“T3预设文件夹”定义的文件夹中。

启用响应式

T3框架允许您开启或关闭站点的响应式布局

当该选项被禁用,网站是无响应式布局。当响应式布局被禁用,所有响应式文件不会被加载(事实上,他们未被调用,网站将会忽略这些文件)。

启用 ThemeMagic

第一步:启用 ThemeMagic

第二步:访问ThemeMagic设置面板

注意:只有当您使用ThemeMagic定制主题的时候才开启,在完成网站定制,您应该把它关掉。

T3框架的安装和文件夹结构

请按照我们的指示来完成T3V3框架的安装

一、系统要求

安装T3框架,您的系统需要在继续安装前满足以下要求

软件:PHP 5.3.1+

数据库:

MySQL 5.1 +

MSSQL 10.50.1600.1 +

PostgreSQL 8.3.18 +

Web 服务器

Apache 2.x +

Microsoft IIS 7 +

Nginx 1.0 (1.1 recommended)

浏览器要求

Firefox 4 +

IE (Internet Explorer) 8 + (不支持IE6 7)

Google Chrome 10 +

Opera 10 +

Safari 5 +

开发环境

在开发过程中,Localhost(本地)是首选。您可以使用以下服务器在您的电脑开发你的网站。

Windows

WAMPSEVER

XAMPP for Windows

Linux

LAMP Bubdle

XAMPP for Linux

Mac OS

MAMP & MAMP Pro

XAMPP for Mac OS

二、下载

模板兼容Joomla! 2.5 and Joomla! 3.0。我们强烈建议你使用Joomla!的稳定版本,T3V3目前的版本也是稳定版。

从Github下载T3V3

现在我们将项目移到Github,您能在 https://github.com/t3framework/t3 查看项目。

您可以查看最新的进展并下载发布包,我们建议您下载发布版本,它是经过检查和测试的。

从JoomlArt论坛下载

三、手动安装

您可以选择安装包(包括T3空白模板和T3框架插件),或者一个一个安装,这个过程如下:

1、下载T3安装包

2、启用T3插件

在默认情况下,当您安装T3插件时,它已经启用。在Extensions 扩展 –> Plugin Manager 插件管理 –> 找到 T3 Framework.检查。

3、设置T3空白模板为您的默认模板

如何设置T3空白模板为您的默认模板?Extensions 扩展–> Template Manager 模板管理–> 设置 T3 Blank template 为您的默认模板。

四、快速入门安装

选择语言

主要配置

输入所需要的信息:站点名字、描述等等

数据库配置

安装示范数据

如果您安装示范数据, 您将有一个类似我们演示的网站。如果你选择默认样本数据,您将有用一个全新的网站站点,安装并启用T3框架插件和T3空白模板。

删除或重命名安装文件夹

最后一步是删除或重命名安装文件夹

五、升级

升级 JA T3v3 框架到T3 框架

我们现在将JA T3v3 框架项目搬迁到T3,我们将维护和开发T3框架项目,而不是JA T3v3 框架。对于一些模板使用JA T3v3 框架(JA Brisk, JA Mero, JA Onepage)可以升级并兼容T3框架。

1、升级前准备

备份是必须的,请在升级前完整备份站点。

有两个升级选择

选择1、如果您定制不多,您可以再做一次,在这种情况下,我们建议你下载模板和插件,然后再重新安装T3框架

选择2、如果您的模板定制很多,通过JAEM升级模板(JA扩展管理器),然后安装T3插件。

2、升级模板

使模板和T3框架相兼容,您必须在安装T3插件之前升级模板。

第一步、通过JAEM升级模板

通过JAEM升级模板(JA扩展管理器),您需要正确安装和配置组件,请检查细节指导及如何使用扩展。

接下来,检查新版本的模板来升级

当升级时,我们只注意冲突文件,它们将被修改为两个用户和开发者

当升级时, 冲突 的文件将被新版本文件覆盖,这意味着您所定制的文件将会丢失。

现在,升级新版本的模板,你需要比较冲突的文件(使用你的备份文件)然后复制您的定制内容到新的文件。3

3、卸载或禁用 JA T3v3框架插件

4、安装T3框架插件

安装最新版本的T3框架插件

http://www.joomlart.com/forums/downloads.php?do=file&id=3273

现在,安装插件并确保启用插件、

升级T3框架到最新版本

在T3空白模板的模板设计面板或任何T3框架的开发模板,您可以从模板或是插件的常规选项卡获得最新版本通知。

这个 Joomla更新系统是覆盖安装,所有它将覆盖所有的文件和文件夹的扩展,如果您有定制内容,您不应该使用Joomla更新系统,否则您的定制内容将会丢失。

接下来,我们将介绍您如何使用JAEM来升级

通过JAEM升级

我们建议您使用JAEM来升级T3框架,是因为您的定制内容将不会丢失,如果您使用JA产品,您也可以使用JAEM来升级。

JAEM系统介绍  http://wiki.joomlart.com/wiki/JA_Extensions_Manager/How-to

六、文件夹结构

安装完成后,您应该知道文件夹结构的框架,它显示了您在哪里和如何处理文件。

t3_blank template

T3框架整合Bootstrap,LESS扩展,所以您能使用LESS文件来开发您的网站。

  1. templates/t3_blank/
  2. ├──less/ /* all LESS files are located here
  3. │ ├── themes/ /* all theme folders and files are located here
  4. │ ├── bootstrap.less
  5. │ ├── bootstrap-responsive.less>/span>
  6. │ ├── home-responsive.less
  7. │ ├── layout.less
  8. │ ├── …
  9. ├── css/ /# all compiled files are located here
  10. │ ├── themes/ /* all theme folders and files are located here
  11. │ ├── bootstrap.css
  12. │ ├── bootstrap-responsive.css
  13. │ ├── custom.css
  14. │ ├── home.css
  15. │ ├── template.css
  16. │ ├── …
  17. ├── fonts/
  18. ├── js/
  19. │ ├── com_contact/
  20. │ ├── com_content/
  21. │ ├── …
  22. ├── tpls/ /* all layout files and block files
  23. │ ├── block/ /* all block files here
  24. │ │ ├── footer.php
  25. │ │ ├── footnav.php
  26. │ │ ├── header.php
  27. │ │ ├── …
  28. │ ├── default.php
  29. │ ├── default-content-left.php
  30. │ ├── default-content-right.php
  31. │ ├── home-1.php
  32. │ ├── home-2.php
  33. ├── images/
  34. ├── languages/
  35. │ ├── en-GB.tpl_ja_t3v3_blank.ini
  36. │ ├── en-GB.tpl_ja_t3v3_blank.sys.ini
  37. ├── templateDetail.xml /* the file is to add new group, parameters as global, parameters for position configuration, override ThemeMagic variables …
  38. ├── templateInfo.php/
  39. ├── index.php/
  40. └── index.html

最重要的文件夹是 LESS ,这个文件夹包含所有用于开发网站的LESS文件,LESS文件可以编译成CSS文件。

t3 system plugin

当您安装T3系统插件,这个插件包含Bootstrap库文件,用于开发您的网站,建议您不要修改插件文件,您的所有工作必须在T3空白模板中操作。

  1. plugins/system/t3/base
  2. ├── css/
  3. │ ├── layout-custom.css
  4. │ ├── menu.css
  5. │ ├── thememagic.css
  6. ├── bootstrap/ /* Bootstrap library folder
  7. │ ├── css/ /* css files in bootstrap library
  8. │ ├── ico/
  9. │ ├── img/
  10. │ ├── js/
  11. │ ├── less/ /* include all less files
  12. │ │ ├── accordion.less
  13. │ │ ├── form.less
  14. │ │ ├── …
  15. ├── images/
  16. ├── js/
  17. ├── paras/
  18. ├── tpls/
  19. ├── html/
  20. ├── params/
  21. ├── tpls/
  22. ├── component.php
  23. ├── error.php
  24. ├── index.html
  25. ├── index.php
  26. └── offline.php

T3-Framework 框架简介(一)

一、关于T3框架

T3框架是Joomla最流行的模板框架。它来自于T3基础模板并完全兼容Joomla 1.5,2.5和3.0。为便于升级,框架是以插件形式,并分别安装。超过3年的不断发展,T3框架已经走过了漫长的道路,更加强大、用户界面​​友好、功能丰富、容易定制和更不用说的,支持所有的浏览器和设备上的响应式布局 ,使其更具魅力。

二、主要特点

响应式布局

JoomlArt一直在设计的最前沿的响应式布局模板,比如:JA Wall, JA Elastica, JA Lens, JA University, JA Zite..……在用户中取得巨大成功。现在在T3框架方面有所改进。

MegaMenu

这是一个Joomla所缺失的功能,T3框架拥有强大的菜单系统——MegaMenu(这一功能在T3V2中也同样支持)。

Jooml! 2.5 and Joomla! 3.0 原生

T3框架原生支持Jooml! 2.5 and Joomla! 3.0——最新版Joomla!。

整合Bootstrap

完美整合Bootstrap,让您更加省力地规范网站的网格、排版和模块。

使用LESS CSS

T3框架建立在LESS CSS之上,使CSS开发更加强大和直观。

HTML5

垫脚石,受益于丰富的标记和兼容性,HTML5可以确保您的网站体验和可视化质量。

多设计版面

多布局支持,例如:左栏-内容-右栏,左栏-内容,内容-右栏,多列,全宽,您能灵活地展示您的内容。

多模板

4种默认模板:默认、黑色、绿色、红色,您能很容易地切换模板。您能创建和定制无限套模板。

排版

完美整合Bootstrap的T3模板使用Bootstrap排版,包括表单、按钮和表格等等。

ThemeMagic

T3框架拥有强大的容易定制的ThemeMagic,您可以在ThemeMagic配置任何参数。

三、视频集

由于众所周知的原因,我们无法直接看到视频。

四、开发更新日志

2011年11月:发布第一个稳定版,JoomlArt正式将每月模板开发移到T3。

2012年12月:少数独立Joomla开发者和团队开始使用T3作为他们的自定义代码库,包括:http://pbwebdev.com/,http://www.qubesys.com/,Themeforest.com的作者

2013年1月:JoomlaBamboo俱乐部采用T3 http://www.joomlabamboo.com/blog/template-news/zen-to-the-power-of-t3

2013年1月23日:Bang2Joom.com团队采用T3

2013年1月25日:ThemeRox采用T3

五、版权和许可

Copyright (C) 2005 – 2013 T3-Framework.org。 保留所有权利。

基于GNU通用公共授权版本2或更高。

特别感谢来自Anthony& JoomlaBammbo团队的连续支持和贡献。

原文地址:http://t3-framework.org/documentation/introduction.html

T3框架,一个强大的Joomla框架

t3-framework

偶看学习和使用Joomla没有多长时间,最近在研究T3框架中,T3框架的版本有不少,最新的版本直接命名为T3,它的前身是JA T3v3(其实目前这两个框架是一样的,只是未来会往T3发展),由Joomlart开发。T3框架的官方网站是 http://t3-framework.org/ ,源代码托管于Github。

T3框架兼容Joomla所有版本,而且还在不断更新中。

偶看使用T3框架配合Joomla 2.5搭建了一个网站,还在不断完善之中。

国内关于T3框架的资料较少,有个中文视频教程,但是需要收费。

接下来一段时间,偶看会将T3框架的官方说明文档翻译并发布出来,由于英文水平有限,如有错误,欢迎指出。