框架定制

模板和样式定义

很多用户关心模板和样式的定义，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));