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

昨天的文档中，我们学习了怎样调整搜索模块及导航菜单的布局位置；今天继续有关样式设定的话题。

为了使我们的模板在设计风格上与目标样式(JA Mesolite)更加贴近，我们需要为默认布局(shop.php)设置一些必要的样式。css路径中的template.css文件就是用来定义默认布局样式的；对于另外两个布局变体(blog.php和news.php，详见“JA文档中文翻译 - JA模板定制FAQ - 创建布局变体”)，我们将使用单独的样式表。

首先，我们需要将以下文件里指定代码行中容器的class名“wrap”替换为“main”：

• ja-header - 位于templates/ja_purity_ii/layouts/blocks/header.php - 第1行
• ja-mainnav - 位于templates/ja_purity_ii/layouts/blocks/mainnav.php - 第1行
• ja-subnav ja-mainnav - 位于templates/ja_purity_ii/layouts/blocks/mainnav.php - 第15行
• ja-container - 位于
  • templates/ja_purity_ii/layouts/shop.php - 第63行
  • templates/ja_purity_ii/layouts/news.php - 第67行
  • templates/ja_purity_ii/layouts/blog.php - 第64行
• ja-navhelper - 位于templates/ja_purity_ii/layouts/blocks/footer.php - 第1行
• ja-footer - 位于templates/ja_purity_ii/layouts/blocks/footer.php - 第20行
• ja-botsl - 位于templates/ja_purity_ii/layouts/blocks/botsl.php - 第7行
• ja-topsl - 位于templates/ja_purity_ii/layouts/blocks/topsl.php - 第7行

改变页面背景色

在布局样式方面，我们做的第一个改动就是为页面增加一定的内边距，并设置背景色。打开templates/ja_purity_ii/css/template.css文件，在854行附近找到：

#ja-wrapper { } 

替换为：

#ja-wrapper { padding:30px 0; background: #e6e6e6; } 

现在我们的页面看上去应该是这样的：

搞定；明天我们继续搞样式，看看怎样为头部(header)和页脚(footer)设置圆角样式。

译者：Viiiix7210

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

评论刷新

2010-04-13 12:21

官方文档#ja-wrapper { padding:30px 0; background: #e6e6e6; } 有点小错，
应该为#ja-wrapper { padding:30px 30px; background: #e6e6e6; } ,这样才对

回复 | 引用并回复 | 引用 | 链接

2010-07-05 12:08

头部（header）会往右突出 来一点，需要把文件 template.css 里面 .ja-headermask 中 right: -1px; 需要改成 right: 0;

回复 | 引用并回复 | 引用 | 链接

刷新

添加评论

用户名*

邮箱*

网站

有回复时邮件提醒我

换一张图

提交评论

取消

JComments