JA文档中文翻译 - JA模板定制FAQ - 改变模块位置
在前面一篇文档教程中，我们学习了怎样自定义区块的宽度；今天继续页面样式的话题，来看看怎样对模块位置进行自定义调整。
当前这个FAQ系列文档刚刚开始的时候曾经介绍过，我们的目标是打造一款类似JA Mesolite风格的模板；为了使风格更加贴近，我们需要对现有的一些模块位置进行调整。
以头部导航菜单和搜索模块的位置为例；我们需要将现在页面上的搜索模块从header区块位置移至mainnav区块，并置于导航菜单的左侧。打开layouts/blocks路径中的header.php文件，找到如下代码并剪切：
<?php if($this->countModules('search')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="search" />
</div>
<?php endif; ?>
打开mainnav.php文件，在第2行代码后换行并将之前剪切的代码粘贴过来。
保存对两个区块文件所做的修改，接下来我们来做样式。打开templates/ja_purity_ii/css路径中的template.css文件，将610行附近的：
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 15px;
}
替换为：
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 13px;
left: 15px;
}
当然，我们还需要调整搜索框的宽度；将620行附近的#ja-search .inputbox样式代码替换为：
#ja-search .inputbox {
width: 80%;
border: 1px solid #333;
padding: 3px 5px;
color: #ccc;
background: #444;
font-size: 100%;
font-weight: bold;
}
通过这样的百分比宽度设置，可以保证搜索框的宽度始终是父容器宽度的80%，不会破坏原有导航的结构样式。
接下来我们需要将导航中的菜单整体移至右侧，并使其左边缘与页面主要内容部分的左边缘保持对齐。由于当前布局中左侧边栏(left)区块的宽度是默认的20%，所以我们可以为导航菜单设置20%的左侧外间距(margin-left)。打开templates/ja_purity_ii/css/munu路径，我们需要对里面的一些样式表进行相应修改。
首先打开css.css文件，将23行附近的#ja-cssmenu样式代码替换为：
#ja-cssmenu {
margin: 0 0 0 20%; /* all lists */
padding: 0;
border-right: 1px solid #666;
float: left;
}
然后打开mega.css文件，将13行附近的.ja-megamenu样式代码替换为：
.ja-megamenu { margin: 0 0 0 20%; padding: 0; }
最后，打开dropline.css文件，将23行附近的#jasdl-mainnav样式代码替换为：
#jasdl-mainnav {
position: relative;
border-right: 1px solid #666;
float: left;
margin: 0 0 0 20%;
}
搞定；现在导航部分的样式应该如下图所示的样子了：
译者：Viiiix7210
如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: JA Template Framework/FAQs
| < Prev | Next > |
|---|
RSS Feed
评论刷新
sun rui ,我也对该问题产生疑问，不解中 。。。