drupal 7 Pixture Reloaded 主题升级过程

1. Pixture Reloaded Theme简介

　　我们在开发网站时选择Pixture Reloaded 主题的理由主要是由于在国外广泛使用，支持HTML5，可兼容iphone, 安卓手机，各种ipad,普通电脑等丰富的前端设备。

　　Pixture Reloaded Theme 基于Adaptive Theme重新设计，并继承了其特点，例如移动支持，强大的布局等。

　　新版本的Pixture Reloaded增强了Google字体和基于Adaptive Theme移动设备的支持。

　　Pixture Reloaded 7.x-2.x基本特点:

　　• 18 个预定的颜色方案

　　• 客户化定制颜色选项

　　• 内置支持Superfish模块

　　• Noggin模块支持额外的功能

　　• 可配置的layout –许多选项

　　• 移动支持 (支持手机，平板电脑, iPad，iPhone 等)

　　• 字体选择 (包括Google 字体)

　　• 字体大小设置

　　• Heading样式

　　• 圆角设置

　　• 框阴影和背景纹理选项

　　• 图片位置设置

　　• Menu bullets选项

　　• Breadcrumb设置(在开发版pixture_reloaded-7.x-3.x-dev中没有此功能)

　　• 搜索结果显示设置

　　• 可选的水平登录区块设置

　　• 18个区域包含3列和4列panel

     更多内容参考:http://www.innovatedigital.com/node/803

                      http://www.innovatedigital.com/drupal

　　2. 升级Pixture Reloaded Theme的原因：

　　2012年初开发网站时，选择了Pixture Reloaded (7.x-2.x)，在使用中发现存在一些严重问题，主要包括：

　　IE8打开网站每个页面，频繁出现 SysFader:iexplore.exe 应用程序错误，导致IE8浏览器崩溃，问题严重。同时对国内广泛使用的IE6支持不好，图像变形，区块错位，速度缓慢等问题。

　　虽然部分原因是众所周知微软浏览器的一些问题，但是迁就还得迁就，不过在Chrmoe,IE9+,Firefox等浏览器上表现很好。

　　曾试图通过以下方式解决：

　　A：去掉“启用第三方浏览器扩展”。

　　打开IE8，找到“工具 -> Internet选项 -> 高级 -> 浏览 -> 启用第三方浏览器扩展*”，取消选中后重新启动IE8浏览器。

　　发现仍然不能解决问题。这也不是解决问题的办法，我们无法让使用者去做这些事情。

　　B：网站性能优化。

　　将一些没有到的theme禁用或删除，开启网站性能缓存，合并css。

　　发现仍然不能解决问题。

　　最后，经过简单测试发现在Pixture Reloaded的最新版上基本可解决兼容性问题，因此需要将现有主题做彻底升级。这的确要费些功夫。

　　3. 现有环境

　　我们使用的drupal 版本是: drupal 7.14

　　Pixture reloaded的具体版本：

　　pixture_reloaded 7.x-2.2，发布时间2011-10-04

　　adaptivetheme 7.x-2.2，发布时间 2012-02-16

　　下载地址：

　　http://ftp.drupal.org/files/projects/pixture_reloaded-7.x-2.2.tar.gz

　　http://ftp.drupal.org/files/projects/adaptivetheme-7.x-2.2.tar.gz

　　升级到pixture_reloaded 7.x-3.x-dev，下载文件地址：

　　http://ftp.drupal.org/files/projects/pixture_reloaded-7.x-3.x-dev.tar.gz

　　同样，pixture_reloaded 7.x-3.x-dev 需要匹配adaptivetheme-7.x-3.x-dev，下载文件地址：

　　http://ftp.drupal.org/files/projects/adaptivetheme-7.x-3.x-dev.tar.gz

　　4. 升级过程

　　由于在Pixture Reloaded 主题上已经作了很多修改，因此升级需要格外小心，按照Drupal的最佳实践，在升级中我们重新制定了一些规范，使得后续的升级更为方便。

　　4.1. 准备工作

　　提前做好数据库备份和文件备份。

　　将网站置于维护模式，/admin/config/development/maintenance

　　下载新的theme, 两个pixture_reloaded-7.x-3.x-dev 和adaptivetheme-7.x-3.x-dev

　　删除旧的theme文件。上传新的theme文件

　　\sites\all\themes\pixture_reloaded

　　\sites\all\themes\adaptivetheme

　　修改/sites/default/settings.php，设置 $update_free_access = TRUE

　　运行http://www.xxx.com/update.php,更新数据库。

　　4.2. 修改pixture_reloaded.css文件

　　\sites\all\themes\pixture_reloaded\css\pixture_reloaded.css

　　新增加的css样式要放在pixture_reloaded.css文件的最后,并加注释说明,

　　例如，

　　branding或logo样式修改:

 

　　#branding {
　　  width: 100%;

 　　}

 　 #logo {

 　　 margin: 0;

 　　 padding: 0;

 　　}

　　文章内容字体颜色:黑色

　　body {
　　color: black;
　　}

　　Footer背景颜色，Footer字体颜色

　　#footer{
　　background: #C3E7FC;
　　}
　　#footer-inner {
　　min-height: 42px;
　　}
　　#footer,#footer a{
　　color: #000000;
　　line-height: 1.6;
　　FONT-FAMILY:"宋体";
　　font-size:12px;
　　}
　　#footer a:hover{
　　color:#fe6a15;
　　text-decoration: underline;
　　}

　　文章标题 居中显示

　　h1#page-title{
　　text-align:center;
　　}

　　搜索框修改css

　　#search-block-form input {
　　 margin:0px auto;display: inline-block;
　　}
　 #search-block-form .form-submit {　　
    margin:0px auto;display: inline-block;
　　}

　　超链接样式：

　　a:hover, a.active:hover, a:focus, a.active:focus {
　　text-decoration: underline;
　　color: #FE6A15;
　　}

　　发布信息字体和对齐：

　　.submitted {
　　font-size: 0.9em;
　　text-align: center;

　　4.3. 启用 性能中的 合并和压缩CSS文件。

　　IE6或IE8中view列表标题背景颜色奇偶数显示问题,并修改下面文件

　　modules/system/system.theme.css

　　tr.even{
　　background-color: #fff;
　　border-bottom: 0px solid #ccc;
　　padding: 0.1em 0.6em;
　　}
　　tr.odd {
　　background-color: #f5f5f5;
　　border-bottom: 0px solid #ccc;
　　padding: 0.1em 0.6em;

　　开启性能缓存后，windows xp+ IE8 首页自定义区块上部出现一条横线。

　　修改modules/system/system.theme.css

　　tbody {
　　border-top: 0px solid #ccc;
　　}

　　4.4. Extension(扩展): 新版pixture reloaded 7.x-3.x-dev新功能

　　新主题扩展Extensions是默认选中的,

　　主题设置，扩展设置：admin/appearance/settings/pixture_reloaded

　　Layout & General Settings 〉〉Enable extensions (global setting)

　　如果已经对系统字体和标题样式等有过客户化的修改或设置，请将扩展中默认选中的Fonts，Title styles和Image alignment and captions暂时取消。开启扩展后可针对Rounded corners和Menu settings设置,

　　圆角(Corner radius：4px)和主导航菜单对齐方式设置：(中间对齐)。

　　注：Windows 2003+IE6，windows XP+IE8 圆角不起作用。

　　主导航菜单中间对齐在Windows 2003+IE6显示左对齐。

　　5. 总结

　　终于大功告成。

    更多内容参考:http://www.innovatedigital.com/node/803

                      http://www.innovatedigital.com/drupal