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

发表评论