5.0风格升级至5.5.0风格方法（附恭贺新禧5.5.0风格）

随着Discuz！5.5.0的发布，由于更多新功能的增加，Discuz！的模板机制也有所调整，下面对Discuz！5.0与Discuz！5.5.0的一些差异做下简单的介绍，方便各位风格制作者对现有风格进行升级，也希望更多新的风格出现。

介于大部分刚接触风格设计的朋友，主要修改header.htm，css.htm，footer.htm这三个模板文件，这里就主要说一下这几个文件和Discuz！5.0的差异。

同时附上恭贺新禧5.5.0风格，供大家对比研究


Discuz！5.0和Discuz！5.5.0的风格模板调整时这几个文件的主要区别如下：

header.htm中

   新的js调用
         为了提高用户体验，简化用户操作，5.5中增加了很多ajax，通过header.htm来加载

1. <script type="text/javascript" src="include/javascript/ajax.js"></script>

复制代码

插件判断

1. <!--{if !empty($plugins['links'])}-->
   
2.         <!--{loop $plugins['links'] $module}-->
   
3.                     <!--{if !$module['adminid'] || ($module['adminid'] && $adminid > 0 && $module['adminid'] >= $adminid)}-->| $module[url] <!--{/if}-->
   
4.         <!--{/loop}-->
   
5. <!--{/if}-->

复制代码

左右分栏的frame判断

1. <!--{if $_DCACHE['settings']['frameon'] > 0}-->
   
2.         <span class="left">
   
3.         <script type="text/javascript">
   
4.         if(top == self) {
   
5.         <!--{if ($_DCACHE['settings']['frameon'] == 2 && !defined('CACHE_FILE') && in_array(CURSCRIPT, array('index', 'forumdisplay', 'viewthread')) && (($_DCOOKIE['frameon'] == 'yes' && $_GET['frameon'] != 'no') || (empty($_DCOOKIE['frameon']) && empty($_GET['frameon']))))}-->
   
6.                 top.location = 'frame.php?frameon=yes&referer='+escape(self.location);
   
7.         <!--{/if}-->
   
8.                 document.write('<img src="{IMGDIR}/frame_on.gif" border="0" alt="" /> <a href="frame.php?frameon=yes" target="_top">{lang frameon_column}</a>');
   
9.         } else {
   
10.                 document.write('<img src="{IMGDIR}/frame_off.gif" border="0" alt="" /> <a href="frame.php?frameon=no" target="_top">{lang frameon_flat}</a>');
    
11.         }
    
12.         </script>
    
13.         </span>
    
14. <!--{/if}-->

复制代码

Mini-Space链接

1. <span class="bold"><a href="space.php?uid=$discuz_uid">$discuz_userss</a>: </span> <a href="$link_logout">{lang logout}</a>

复制代码

div结构简化
        将headder中的多个div进行简化，方便用户调整模板
----------------------------------------------------------------------------------------------------------------

footer.htm中

加强的广告功能

1. <!--{if !empty($advlist['footerbanner1'])}--><div align="center" style="clear: both; margin-bottom: 5px">$advlist[footerbanner1]</div><!--{/if}-->
   
2. <!--{if !empty($advlist['footerbanner2'])}--><div align="center" style="clear: both; margin-bottom: 5px">$advlist[footerbanner2]</div><!--{/if}-->
   
3. <!--{if !empty($advlist['footerbanner3'])}--><div align="center" style="clear: both;">$advlist[footerbanner3]</div><!--{/if}--><br>
   
4. <!--{if !empty($advlist['float']) || !empty($advlist['couplebanner'])}-->

复制代码

js调用调整

1. <script type="text/javascript" src="include/javascript/floatadv.js"></script>

复制代码

分栏frame判断

1. <!--{if $_DCACHE['settings']['frameon'] == 2 && in_array(CURSCRIPT, array('index', 'forumdisplay', 'viewthread')) && $_DCOOKIE['frameon'] == 'yes'}-->
   
2. <script type="text/javascript" src="include/javascript/iframe.js"></script>
   
3. <!--{/if}-->

复制代码

-------------------------------------------------------------------------------------------------------------------------------------------------------
css.htm中
css.htm模板主要是对原有css进行了优化和分类整理，并补充了一部分新的内容
按功能大致分了以下11部分
/* Global */-------------------------------全局通用
/* Header */-----------------------------页面头部专用（header.htm）
/* Footer */------------------------------页脚专用（footer.htm）
/* Multi Page */-------------------------页码、翻页部分专用
/* Popup Menu */----------------------弹出菜单
/* Popup Calendar */------------------弹出日历选择
/* Index */-------------------------------首页专用（discuz.htm）
/* New Special Menu */--------------特殊帖子专用
/* Forumdisplay */----------------------帖子列表页专用
/* Viewthread */-----------------------显示帖子页专用
/* Frame */------------------------------分栏控制专用


新增加的式样表有

1. .msgbody {
   
2.         overflow: hidden;
   
3.         width: auto !important;
   
4.         width: 100%;
   
5. }-----------------[code] [free] [quote] 里面用的内容体
   
6. 
   
7. 
   
8. .autosave {
   
9.         behavior: url(#default#userdata);
   
10. }--------------------自动保存帖子信息
    
11. 
    
12. #seccode {
    
13.         cursor:pointer;
    
14.         margin-bottom: 2px;
    
15. }----------------------验证码
    
16. 
    
17. .leftmenu br {
    
18.         line-height: 5px;
    
19. }--------------------分栏菜单
    
20. .leftmenu {
    
21.         line-height: 18px;
    
22. }

复制代码

重新规范命名的有

1. .calendar_expire, .calendar_expire a:link, .calendar_expire a:visited {
   
2.         color: {CALENDAREXPIRE};
   
3. }
   
4. .calendar_default, .calendar_default a:link, .calendar_default a:visited {
   
5.         color: {CALENDARTEXT};
   
6. }
   
7. .calendar_checked, .calendar_checked a:link, .calendar_checked a:visited {
   
8.         color: {CALENDARCHECKED};
   
9. }
   
10. .calendar_today, .calendar_today a:link, .calendar_today a:visited {
    
11.         color: {CALENDARTODAY};
    
12. }
    
13. .calendar_header td{
    
14.         width: 30px;
    
15.         height: 20px;
    
16. }

复制代码

[ 本帖最后由 dfox 于 2007-3-13 13:17 编辑 ]

对于只是通过header.htm，footer.htm和css.htm来制作模板的朋友来说，你的5.0的风格可以很方便的升级到5.5的风格，只需要将这三个文件两个版本中的差异对比一下，补充完整就可以了，要注意逻辑、循环结构的完整性。按照以往安装风格的方法将5.0的风格安装到5.5的论坛上，（注意：要把“允许导入不同版本 Discuz! 的界面”这个选项选上），然后在模板风格编辑界面方案里把5.5.0风格中所缺少的变量补充完整，再把风格倒出，一套和Discuz！5.0一样的Discuz！5.5.0风格就出来了。

另外，在Discuz！5.5.0中后台的界面风格里增加了两个新功能--模板检查和恢复默认模板，可以方便用户在线对模板进行编辑。
   模板检查功能主要是对新模板和默认模板进行对比，将模板中的模板结构和逻辑、循环进行检测，可以很快的了解到自己的模板哪些地方进行了调整，结构是否有问题。
   恢复默认模板功能，可以将已经进行调整的模板便捷的回复到默认模板。

header.htm和footer.htm

按照上部分所说的,将你原风格代码中的js调用和逻辑循环替换成5.5.0默认模板中的即可.(如果有自定义的,需要自己作下调整)

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
css.htm

css.htm文件的修改也很简单，只需要在你原有的css.htm中把上面提到的几个css补充进去，另外用重新规范命名那段css替换掉下面代码框中原来的就可以了

1. .expire, .expire a:link, .expire a:visited {
   
2.         color: {CALENDAREXPIRE};
   
3. }
   
4. .default, .default a:link, .default a:visited {
   
5.         color: {CALENDARTEXT};
   
6. }
   
7. .checked, .checked a:link, .checked a:visited {
   
8.         color: {CALENDARCHECKED};
   
9. }
   
10. .today, .today a:link, .today a:visited {
    
11.         color: {CALENDARTODAY};
    
12. }

复制代码

剩下的就是按照上面说的，在后台导入、倒出一下就可以了。
Discuz！5.0风格和Discuz！5.5.0风格编辑界面方案里所缺少的变量详细如下

帖子内容大字号设置 {MSGBIGSIZE}:

帖子内容小字号设置 {MSGSMALLSIZE}:


左右分栏导航栏背景图片 {FRAMEBG}:

左右分栏导航栏切换图片 {FRAMESWITCH}:

还需要注意的是5.5.0中下拉菜单的箭头的图片已经设置在风格目录了，
需要把下拉箭头图片和5.5.0中新添加的开启、关闭左右分栏、msn的图片（这些图片可以在defult目录中找到）放到相应的风格目录

如果不考虑左右分栏，Discuz！5.0风格转Discuz！5.5.0到此就OK了（左右分栏功能可以在后台设置是否开启）。

由于Discus！5.5.0开始支持左右分栏，完整风格的还是要考虑到左右分栏的，这部分就需要重新设计制作了。



另，关于大、中、小字号无效问题，Monkeye的指导如下

[答疑]“大中小”功能设置说明


要开启此功能
需要在后台“风格设置”中设置贴内大号字体和小号字体两种字体即可，默认那２项为空的

如果此项设置不上，可能因为你升级过程中产生错误

升级语句中执行以下SQL

INSERT INTO cdb_stylevars (styleid, variable, substitute) VALUES (1, 'msgbigsize', ''), (1, 'msgsmallsize', '');

非默认风格，自行在风格的下面添加　msgbigsize　和　msgsmallsize　２个变量，这是Discuz! 5.5 新增的
或者将上面的1改为你自己的styleid

另附上Monkeye和下砂 整理的5.5.0升级常见问题解决方法,地址如下:

Discuz!5.5.0升级常见问题整理-----下砂

5.5 相关问题以及修补文件下载---Monkeye

[ 本帖最后由 dfox 于 2007-3-13 13:11 编辑 ]

:) :) :)

点位学习！

:) 受益不浅
谢谢。

xuexi

好好学习

谢谢楼主

意思说风格升级也不会太麻烦

左右分栏需要自己重新设计
直接套用官方的就方便多
如果要自己设计就比较困难
改改颜色之类还可以

[ 本帖最后由 开心一生 于 2007-3-12 13:32 编辑 ]

支持!~~~~~

呵,要慢慢看了啊,等等再说了!