I. 模板覆写
模板和样式定义
很多用户关心模板和样式的定义,T3用非常基本的方式,模板包含一些样式。在一个网站中,你可以使用一个模板但是可以多种样式,你可以创建多种样式为一个模板。

在一个网站中,多种样式可被同时使用,每种样式可以分配到指定的菜单--> 在菜单中覆写默认样式
模板覆写
用T3,你可以覆写默认样式在指定的菜单项,这种覆写的特点可以为你的首页拥有不同的布局,主题,导航……
你需要做得如下3个步骤来覆写样式
1: 创建覆写样式
要创建新的覆写样式,你要复制默认样式或你可以前往编辑默认页面然后保存为副本
复制样式

或者另存为副本

2: 配置样式

在你创建一个覆写模板后,你要配置模板 (更改布局,颜色……).。首页,让我们检查默认模板的布局设置
3: 分配样式到菜单

模板宽度配置
模板宽度是用栅格定义的, 而且被分割成一些栏数 (默认为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));
添加新评论