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

阴雨绵绵的早上好。在昨天的JA文档中，我们了解了有关页面覆盖及菜单、布局分配方面的知识；其实全部的“JA模板定制FAQ”文档已经收尾，今天是最后一点内容。

首先，我们来看看怎样验证页面；当然这件事情并非必须；Firefox的Web Developer插件提供了一套验证本地或在线站点页面的功能；如果没有安装该插件，也可以在浏览器中输入：

http://validator.w3.org/check?verbose=1&uri=http://yourwebsite.com

将其中的“http://yourwebsite.com”替换为自己站点的页面链接即可。

最后呢，我们来看看我们所完成的3个主要布局的成品截图：

周一好；在昨天的JA Purity II模板定制文档中，我们简单的了解一下有关模板覆盖以及MVC方面的知识；今天继续，来看看页面覆盖(page overrides)。

首先我们再来回顾一下定制模板的设计需求：

• 默认布局shop.php，由Virtuemart扩展驱动，整体采用红色样式方案，使用dropline菜单。
• 新闻页面使用news.php布局，整体采用绿色样式方案，使用mega菜单。
• 博客页面使用blog.php布局，可以由原生内容管理或MyBlog、K2等扩展驱动；整体采用蓝色样式方案，使用mega菜单。

昨天的文档中，我们学习了怎样为IE6警告信息设定样式；接下来的两篇文档中，我们将简单了解一下有关模板和页面覆盖以及MVC方面的知识。

模板覆盖及MVC

使用MVC方式(什么是MVC)开发的扩展所输出的内容形式很容易通过模板覆盖的方式进行定义，Joomla系统原生具有探测并优先执行覆盖规则的功能。举个例子，比如我们希望自定义“Latest News”模块的输出样式，可以将下面这个文件：

站点根路径/modules/mod_latestnews/tmpl/default.php

复制粘贴至：

your_site_root/tempaltes/ja_purity_ii/html/mod_latestnews (路径不存在的话需要创建先)

然后可以根据需求修改结构及class名称等，最后在样式表template.css中进行相关的样式设置即可。接下来看一个更加实际的例子：

前面一篇文档中，我们了解了模板在移动设备浏览时样式方面的定义；今天来看看怎样为我们的模板增加一个小功能：当用户使用IE6进行浏览时，弹出警告，并向其推荐高级浏览器。当然，这件事情并非必需，可以根据项目状况酌情处理。

禁止浏览器探测

可以不必使用IE6来一步步做这个东东，我们可以先禁止浏览器探测功能，在Firefox中做好样式，然后再将浏览器探测开启，使其只在IE6中被触发显示。打开我们的默认布局文件shop.php，在84行附近找到如下代码并将条件判断注释掉：

<?php //if ($this->isIE6()) : ?>
 
       <?php $this->loadBlock('ie6/ie6warning') ?>
 
<?php //endif; ?>

这样就可以在所有浏览器中显示IE6警告信息了，虽然在其他浏览器中查看时会有样式上的差异，但是没有大碍。

昨天的文档中，我们学习了怎样为Purity II模板按照我们的设计需求为不同布局的更换配色；今天来看看在iPhone及其他移动设备中页面的样式定义。

首先来看iPhone；在本地测试之前，我们需要将layouts中的iphone.php设置为默认布局页面。自然，Firefox无法像iPhone一样正常加载这个布局，但是我们仍然可以使用Firebug来找到某些页面元素对应的样式表代码行，然后到iPhone布局对应的CSS文件中按照设计需求把代码写写好。

iphone.php布局涉及到的样式表有以下这些：

昨天的文档教程中，我们学习了怎样为Purity II模板更换logo；今天继续自定义样式方面的话题，来看看怎样针对我们自己的需求来定义模板配色。

要自定义配色样式，我们首先需要创建额外的样式表；目前的需求是news.php与blog.php两个布局的页面需要有不同的配色，那么我们就为这两个布局各自创建一个新的样式表：

• blog-template.css
• news-template.css

可以将目前的template.css文件中的全部代码分别复制粘帖到这两个新文件中，并将它们保存在templates/ja_purity_ii/css路径中。

接下来，我们在两个布局对应的head模块中增加调用新样式表文件的代码：

前面几篇文档中，我们集中学习了怎样修改Ja Purity II中各类菜单的样式；今天继续样式话题，来看看模板logo的自定义方法。

我们需要为shop.php、news.php和blog.php这三个布局各自使用红、绿、蓝三种颜色的logo(自备)。首先来搞定shop.php布局；打开template.css文件，在938行附近找到如下代码：

h1.logo a {
       background: url(../images/logo.gif) no-repeat left;
       display: block;
       height: 79px;
       width: 207px;
}

使用我们的红色logo图片路径替换掉原来的背景图片路径：

在昨天的文档中，我们学习了有关dropline菜单样式的设置；今天为菜单样式这部分做个了断，来看看几个其他的菜单类型。

首先来看下CSS菜单；对于我们的模板，只有news.php布局需要用到这个菜单。打开templates/ja_purity_ii/css/menu/css.css，找到如下代码：

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
       background: url(../../images/grad1-mask.png) repeat-x top #006699;
       color: #fff;
}

根据我们的设计需求，将其中的#006699替换为#0E9500，很绿的绿。

和设置其他菜单样式时类似，我们要去掉菜单项的左右边框；在85行附近找到如下代码：

在昨天的文档中，我们对news.php布局中导航菜单(mega菜单)的样式进行了设置；今天来看看怎样设置dropline菜单的样式。

对于我们的模板来说，只有shop.php布局使用到了dropline菜单。和之前的mega菜单类似，首先我们要去掉每个菜单项的左右边框。打开templates/ja_purity_ii/css/menu/dropline.css，在38行附近找到：

#jasdl-mainnav a {
       border-left: 1px solid #666; /* you can comment/delete this line */ 
       border-right: 1px solid #333; /* and this line */ 
       color: #ccc;
       display: block;
       float: left;
       font-weight: bold;
       line-height: normal;
       margin: 0;
       padding: 8px 15px;
       text-decoration: none;
}

将border-left及border-right这两行去掉。另外在23行附近找到：

昨天的文档教程中，我们学习了怎样为页面的头部及页脚设置圆角样式；今天来看看菜单样式方面的话题。

为了使当前页面中的菜单风格与目标页面中的样式尽量贴近，首先，我们需要将导航菜单中的渐变背景去掉；在template.css文件中的984行附近找到#ja-mainnav的样式代码，并修改为：

#ja-mainnav {
       background:  #444; /* you can change/delete the transparent gradient image or the background color */
       border-top: 1px solid #666; /* you can change the color of the border */
       line-height: 1;
       position: relative;
       z-index: 9;
}

即去掉了背景图片的设置，只保留#444纯色作为背景；现在导航菜单的样式应该如下图所示：