框架定制

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));

添加新评论