Joomla控，Drupal粉 - 开源CMS建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

昨天的文档教程中，我们学习了怎样创建布局变体；目前，定制模板的布局结构及区块都已经创建完毕，今天开始进入样式设置的部分。我们将通过这部分的学习来实现以下几个目标：

• 定制主要区块的宽度
• 改变模块的位置
• 定制菜单系统的样式
• 定制配色方案
• 定制LOGO图片

先来看怎样定制主要区块的宽度。实际上我们可以对任何区块和模块进行宽度设置；建议使用百分比的方式来设定宽度，这样可以避免布局被破坏，保持网格化的模板设计。

在所有的布局文件中(例如Purity II的default.php或我们的shop.php)声明区块位置代码的下面，都可以找到如下被注释掉的代码：

//$this->customwidth('right1', 25); <== override right1 column width to 25%...

我们可以通过它来为某个区块指定宽度。正如代码中所做的解释，如果取消注释，那么这段代码将为right1区块设置单位为25%的宽度值。

来看个实例，比如我们希望构建一个“左侧边栏-右侧边栏-主要内容”这样的布局结构，其中右侧边栏的宽度为25%。

首先通过下面的代码声明区块位置：

$positions = array (
 
       'left1'                        =>'left',
       'left2'                        =>'right',
       'left-mass-top'                =>'',
       'left-mass-bottom'                =>'',
       'right1'                        =>'',
       'right2'                        =>'',
       'right-mass-top'                =>'',
       'right-mass-bottom'                =>'',
       'content-mass-top'                =>'',
       'content-mass-bottom'                =>'',
       'content-top'                        =>'',
       'content-bottom'                =>'',
       'inset1'                        =>'',
       'inset2'                        =>''
 
);

然后复制一份设定区块宽度的代码并去掉注释，将其修改为：

$this->customwidth('left2', 25); 

这样，right区块的宽度就被设定成为25%了，框架会自动计算main与left区块的相对宽度。

根据下面的图示，我们可以看到当left2位置(即right区块)被重新设定之后，左侧边栏的宽度保持不变，但相应的比例减小了；右侧边栏宽度的增加也将导致主要内容区的宽度做相应减小。

图示中的数值也许会引起歧义，实际是这样的：Purity II默认的左、右侧边栏及主要内容的比例是20%、20%和60%，其中左、右侧边栏各自占据left1+left2宽度总和的50%，即两个数字“50”；在我们设定了右侧边的宽度后，整体比例变成20%、25%和55%，其中左、右侧边栏各自占据left1+left2宽度总和的44%和56%，即两个数字“44”和“56”。

译者：Viiiix7210

如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: JA Template Framework/FAQs