下载文档原格式
第1步：进入版块内点击右上角的DIY（如下图，注：静态化无法DIY，请取消静态化）第2步：拉好框架（先放3:1的，再将后两个框架放入其中）如下图所示（下面说的都无需再拉多个框架，这一步已把该拉的红框都拉好了）：第3步：设好红框（就是指向出现红色的框架，在这我将其称为红框）的样式参数（如下图，对比看说明）图中1：边框，请将默认的【大小】改成0（因为这样不会显示边框线，不选则会显示官方默认的边框线）图中2：边框一定要为0，这样是最大化，0和不填是不一样的！图中3：边框一定要为10，这样是和下方框体的距离，若填0则会连在一起！图中4：此处请一定不要选择【无边框框架】否则你用TAB框架则在标题加链接时会成白色，留空不选即可！第4步：先DIY右边的。
请拉一个红框的框架到图中右边的框架内，然后点击样式，如图：图中1：边框线颜色为：1PX。
我用的是粉红色！根据自己的爱好选色！图中2：上为0（但官方默认的是1PX的距离，所以该处请填0，其它的请设置为1）第5步：红框的边框线，粉红的（如下图）图中1：请设为4PX（想更粗请设大点）图中2：左10PX（是与左边的框架保持10PX的距离，要不会连在一起）第6步：拉一个论坛类的帖子模块放在上一步设置好的红框内，点样式设置参数（如下图）图中1：链接字体，12PX是官方默认的，可以留空。
后面的是字体颜色！图中2：请选边框为0，也可以留空（这里和红框不一样，留空也不会有官方的默认边线）。
图中3：外边距设置和内边距有所不一样，自己理解，请看图中设置，假如你把图中右10PX 输入到下面的内边距的话，标题就偏了~最好这样搞！图中4：内边距的下2PX是为了对平左边框架，所以才设置为2，你可以根据右边的边框线对平（这里请善用QQ截图功能，最后我会教你如何用QQ截图进行DIY较正）第7步：标题，我在这用的方法是不正规设置方法，主要是考虑到美化，用的是图片（看下图）图中1：你看错了，那不是空的，是在智能ABC（我打五笔的）输入V+1这是空格白键，无字体的，但是会有字体一样，因为官方是默认无字体的话是无法设置标题的，所以用这招骗过官方！图中2：图片路径，为不平铺！0K，左边的DIY完成，先讲到这，顶的人多，再教你DIY另一边的~最后说一下我DIY用到的常用工具：1：QQ截图，我设置了快键（ALT+Q）方便截图及对齐边框，效果如下，自己理解。
Discuz!美化模板系列教程--风格制作之二====================================================================== ============____________调用图片____________↓↑图片[images]--------[风格图片目录] ┠css_common.htm ［css文件］/↑模板--[TXT导入文件]----[主要是配色方案] ┠header.htm ［头部文件］\↙↓ ↘文件[templates]-----[风格模板目录]------┠discuz.htm ┠forumdisplay.htm ┠viewthread.htm↘↓ ↙┠footer.htm ［底部文件］↙↓ ↘首页二级列表页帖子内容页====================================================================== ============﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎选定图片目录←----------- | 文字背景色|/↑﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊界面风格----[所用风格]----详情--文字背景配色调﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎/ \ ↑ | 风格图片|后台取选定模板目录用﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊\ ↓ ↑ ﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎模板管理----[所用风格]----详情----[风格模板文件]--------→ |风格框架|﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊====================================================================== ============安装风格：1.上传风格包中的images文件 2.上传templates中的文件 3.后台导入TXT配色文本[风格图片有了] + [风格框架有了] + [风格配色有了]显示风格：后台--界面风格--设置--OK====================================================================== ============教你做第一个风格[其实这个在官方的使用手册里就有说过]﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹍| 编写语：做一个风格．如果说代码框架都是自己来写的话工作量是很大的．很没必要．当然一般特殊的风格除外|| 其实一般的风格都脱离不了ＤＺ的基本模式．所以我们完全可以在ＤＺ默认风格的基础上来改|﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊第一步：准备1.复制images/default目录同时把文件夹名字改为你想要的风格的名字[比如kaibbs]2.复制templates/default目录里的[css_commmon.htm header.htm footer.htm discuz.htm][如果用得到别的可以自己加]同时把文件夹名字改为你想要的风格的名字[比如kaibbs]3.把以上二个文件目录上传到相应该目录下．就和装风格一样4.在后台导入[]5.修改设置［a.导入后.风格管理处．新加一个菜单．名字写你想要的风格名字.如:开论坛.模板目录为templates/kaibbsb.界面风格－把名字改成你想要的名字.同时在详情里设置图片目录为images/kaibbs］6.设置显示你的风格.﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹍| 当然现在显示的出来的是默认风格.刚刚其它就是相当于装了一个风格而已．如果以前操作你都知道为什么了．说明你已经理|| 解了DZ风格的结构做上面6步主要是拿出单一风格来给自己改．想怎么改就怎么改．就是错了也没事都不会影响到别的风格. |﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊第二步：改配色[以下改动均在kaibbs风格上运作]介绍[见手册]================================== 等续篇===============================================================以下是本人的一点心得:案例分析====================================================================== ===========================偷风格工具====================================================================== ===========================。
没有XHTML基础，不知道什么是CSS？没关系~~~从今天开始，我会给各位从0开始讲解如果动手做一个完整的模板。
我相信只要你有兴趣，再抽出一点时间，还得花费一点记忆力（有些东西必须背下来，临时翻书不是好习惯），应付一些基本的样式修改和模板仿制应该还是没问题的。
本教程会很基础，请各位高手轻轻地飘过~~~~~首先说一说前期要准备的工具。
工具的选择：1，当然是FTP啦，个人推荐cuteftp，速度很快……2，修改工具：我个人推荐notepad2，原因是体积小速度快能高亮不要钱，而且味道还很好吃呢。
使用是请把这个工具关联到FTP的默认修改工具里面。
3，DOM树查看工具的选择：这个是用来快速定位CSS的选择器的。
现在一般的浏览器都能支持DOM模型了，比如opera，IE7起，chrome，FF……（什么？360？什么？遨游？什么……？疼讯？赶紧扔掉！！！！！），一般这四个浏览器是必须的，因为要比较调试出来的CSS 在各个浏览器是否兼容。
最后还要考虑IE6的情况，（这个IE6，虽然被千夫所指，但是仍然有很多人在使用，你能怎么办？）关于IE6，请到微软官网上下载一个专用开发插件。
（以上工具介绍纯属自愿，如果你有自己习惯的工具，请飘过~~）关于风格系别的选择：现在国内主流网站，我觉得大多数追着两种潮流，第一种是欧美的那种绚丽的，圆角的，立体阴影的特点的，详见国内各大微薄。
这种网站风格有许许多多的导航网站。
因为图片很多，结构复杂。
模仿起来也比较费劲。
但是只要把他们的结构弄清楚后，也是简单的。
还有一种就是日系（我个人巨爱啊……）日系的网站简约大方，一眼看过去重点突出（无论是上面的两个基本点还是下面的一个中心）。
但是其实日系的网站虽然简单，但还真没有几个人做的好看的，因为，你不知道怎么配色啊……一般看来，美系的字体都稍大，而日系字体偏小。
千万不要把这两种风格综合起来，因为那样剧难看（其实不是剧难看，而是难看致死，死到没JJ，比如某网站风格……）好吧，先说明，我更新的时间不会太快，大概好几天更新一个。
Discuz模板修改教程演示Discuz教程演示, Discuz模板修改近几天做了几套模板先将心的整理一下发给大家以供各位参考借鉴。
在做模板之前大家最好具备一些基本的网页制作方面的知识。
那么咱们先来看看如何制作一套简单的模板流程。
1、在Photoshop中制作风格页面并切图保存；2、制作html文档，css调整；在开始前，先了介绍一下discuz!的几个模板文件：1、header.htm--页面头部2、discus.htm--论坛首页3、index_header.htm--头部发帖按钮，和公告内容页。
4、footer.htm-- 页面底部5、viewthread.htm-- 查看帖子内容6、css_common.htm--公共样式css样式页面7、css_script.htm--其他常用css样式页面首先我们要制作的这套模板叫test，那么我就在templates目录下建立一个test目录。
在test目录下再新建一个images文件夹用于存放这套模板的图片，把切好的所有图片保存到这个文件夹中。
templates/test 文件夹用于存放这套模板的htm文件，首先我们先到default默认模板下面去复制header.htm、discuz.htm、footer.htm这三个htm文件。
然后分别打开着三个文件，可能这里你需要一些常用的htm语言常识，和一些基本的css语法。
如果你不会的话可以去查阅一些资料。
我们大多时候我们不必完全去重新做。
默认模板的head等头部信息我们还是非常有必要要保留。
将你做好的静态文件的切图我ps缩小成一个110X120大小名为preview.jpg的图片放到test 目录下（这是后台安装界面显示的缩略图）。
接下来的工作要在论坛后台设置中来完成（1）进入论坛点击“系统设置——> 界面——> 模板管理”，在新增模板后填入模板名称，模板文件所在目录，板权信息然后提交即可！如（3）然后切换到“系统设置——> 界面——>风格管理”，您就可以在界面风格中看到您所定义的新的风格方案。
模板套系与风格区别•模板套系：统一的一类模板，集中放置并打包的系列。
•风格：应用某个模板套系，并改变其中变量设置的一个方案。
扩展模板创建创建模板套系•首先进入后台 - 界面 - 模板管理，扩展制作模板时需要创建一个专属套系用来后期修改o基于“模板套系”可以扩展针对 ./template/default/ 目录中对的模板文件o创建套系的原则是不破坏原有模板基础上进行全新的扩展模板设计实例1.在站点根目录 ./template/中创建新的目录如" ./template/mytest"2.在 mytest 目录中创建必要子目录与文件如：./template/mytest/common/./template/mytext/common/extend_common.css./template/mytext/common/extend_module.css•其中common目录为公共模板目录，其内部新建的extend_common.css、extend_module.css为扩展型CSS文件，它们可以在./template/default/common/common.css的和module.css的基础上进行CSS代码的覆盖性扩展•如果需要替换论坛首页模板，可以新建 ./template/mytext/common/forum/discuz.htm，或复制./template/default中的对应文件放在 mytext 对应目录，以在缓存生成时覆盖原有模板缓存，达到修改模板而不破坏原生模板的目的后台风格管理•进入后台 - 界面 - 风格管理o“风格管理”可以对已有风格进行风格变量的编辑，也可以基于前面创建的“模板套系”来全新开辟新的风格新建风格•后台风格管理中，可以通过新增和复制原有风格进行新建风格的操作•新建风格之后，需要编辑它，调整里面的“匹配模板”为上面创建的新套系即可风格管理编辑页面中重点风格常量介绍•匹配模板：对应的模板套系•扩展配色：此风格基础上可用于用户切换配色方案的扩展，它对应 ./template/mytest/style/ 目录中的样式文件。
近几天做了几套模板先将心的整理一下发给大家以供各位参考借鉴。
在做模板之前大家最好具备一些基本的网页制作方面的知识。
那么咱们先来看看如何制作一套简单的模板流程。
1、在Photoshop中制作风格页面并切图保存；2、制作html文档，css调整；在开始前，先了介绍一下discuz!的几个模板文件：1、header.htm--页面头部2、discus.htm--论坛首页3、index_header.htm--头部发帖按钮，和公告内容页。
4、footer.htm-- 页面底部5、viewthread.htm-- 查看帖子内容6、css_common.htm--公共样式css样式页面7、css_script.htm--其他常用css样式页面首先我们要制作的这套模板叫test，那么我就在templates目录下建立一个test目录。
在test目录下再新建一个images文件夹用于存放这套模板的图片，把切好的所有图片保存到这个文件夹中。
templates/test 文件夹用于存放这套模板的htm文件，首先我们先到default默认模板下面去复制header.htm、discuz.htm、footer.htm这三个htm文件。
然后分别打开着三个文件，可能这里你需要一些常用的htm语言常识，和一些基本的css语法。
如果你不会的话可以去查阅一些资料。
我们大多时候我们不必完全去重新做。
默认模板的head等头部信息我们还是非常有必要要保留。
将你做好的静态文件的切图我ps缩小成一个110X120大小名为preview.jpg的图片放到test目录下（这是后台安装界面显示的缩略图）。
接下来的工作要在论坛后台设置中来完成（1）进入论坛点击“系统设置——> 界面——> 模板管理”，在新增模板后填入模板名称，模板文件所在目录，板权信息然后提交即可！如（3）然后切换到“系统设置——> 界面——>风格管理”，您就可以在界面风格中看到您所定义的新的风格方案。
接触Discuz! 有一段时间了，使用的风格都是别人的免费品。
一来自己的美工水平实在不行，二来网上很少有比较完整的模板制作教程。
因为工作的需要，现特写了一份模板的制作教程。
小弟才疏学浅，不对之处还请指正。
模板制作前请将你的界面设计好，并制作成html+CSS的格式。
这里我就以大魔王的“蓝色经典”作为样版（知识共享，希望大魔王不要介意，如有侵权，请及时通知我）。
效果图如下：（图1)在开始前，先了介绍一下discuz!的几个模板文件：1、 --------------------------------------页面头部2、论坛首页3、页面底部4、viewthread--------------------------------------------------------------查看帖子内容discuz！论坛的页面通常是几个模板文件共同作用下达到的效果，如图1就是++这三个文件共同作用的效果。
对应的是：（图2）对应的是：（图3）剩下的就是文件显示的了。
当然你要将首页显示的效果就制作成一个文件模板也是可以的，这里之所以分开，是因为和文件通常还会被其它的模版文件引用。
也就是说，其它的页面（比如发贴的页面）的头部、底部与首页的头部、底部完全一样，分开来写就可以达到重复利用，减少劳动的效果。
下面我们就开始制作：首先，现在我要制作的这套模板叫test，那么我就在templates目录下建立一个test目录。
在test目录下再新建一个images文件夹用于存放这套模板的图片，把切好的所有图片保存到这个文件夹中。
templates/test文件夹用于存放这套模板的htm文件，在这个目录中新建三个文件、、，打开你设计好的主页html文件，将你想作为头部的那一段代码复制粘贴到文件中，相应的将作为底部的那一段代码复制粘贴到文件中，其余的代码复制粘贴到文件中。
最后在文件的最顶部和最底部分别加上：{subtemplate header} 和{subtemplate footer}这两句算是discuz的语言，意思是将和文件包含进来，这样就构成了一个完整的主页面了。
Discuz!论坛系统DIY模块模板使用教程Discuz!论坛系统DIY模块模板使用教程今天为大家讲解一下在使用DIY过程中的一些技巧与方法仔细阅读，受益匪浅一、如何在模块中增加“标题”及“更多”的链接如下图样式方法：通过框架或模块都可以实现上述样式，我们以框架为例，我们在DIY的时候选中要编辑的框架点击编辑如下图所示之后点击标题在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示，会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程” 改成“更多” ，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右”完成，这样框架就有了标题及更多，模块的方法同上二、DIY的模块中如何调整链接的颜色如下图样式方法：选中要修改的模块，点击编辑，选择数据如下图所示在弹出层中选择编辑如下图所示在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作完成三、如何在现有的模块中添加新的数据选中要添加数据的模块点击编辑--数据如下图所示在弹出的层中选择任意一条数据点击编辑如下图所示点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据如下图所示点击获取会填充模块内相应的数据字段（此处的数据字段会根据模块样式的不同有所变化，请注意）完成四、DIY时如何调用外部程序的数据当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示如上图所示选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进HTML代码框就可以了如下图所示完成五、首页多格或首页四格如何DIY出来我们以论坛首页为例（在任何页面都可以）来制作一个首页四格首先在论坛首页拖一个 1:1的框架如下图所示接下来向已拖好的1-1框架的框架里左侧的1 里面拖入一个1:1的框架如下图所示接下来向右侧的1里面也拖入一个1:1的框架如下图所示接下来我们就可以通过拖拽模块到框架中去了此时我们可以去掉框架的标题，同时为每一个模块增加一个标题如下图所示你可以通过不同的模块样式或者CSS来美化这里完成六、如何修改整个模块的链接样式比如下图方法：选中要编辑的模块，点击编辑--样式进行修改如下图所示以上修改针对整个模块完成七、如何修改两个模块或两个框架之间的距离如下图样式选择要编辑的框架或者模块，点击编辑--样式选择外边距，勾选分别设置，在右边距中写入合适的数字就可以了例如10如下图所示完成后的效果如下图样式全方位立体式讲解DIY技巧集锦第二弹一、DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过）如下图中的效果如何实现实现方法：拖一个TAB框架到页面中，点编辑，选择标题如下图所示在弹出的窗口中选择切换类型如下图所示。
Discuz!模板风格制作：
1、在Photoshop中制作风格页面并切图保存；
2、制作html文档，css调整；
在制作html文件之前，您必须熟悉Discuz ! 模板的元素和css。
需要注意的是，在定制您的css的时候建议您参
考Discuz！模板文件css.htm来制作，这样您所制作出来的模板文件就可以方便的在Discuz !管理后台中作调整。
制作一套新的模板，其实并不需要将上面所有模板文件重新制作，只需要将几个必要的文件进行替换成您所制作的风格模板文件即可（当然，如果您觉得必要，可以将每个模板文件根据您的设计风格进行调整，只要保证模板文件中的程序结构完整），以下几个文件是一个论坛中最常用到的几个页面，对一套风格模板影响相对较大，详细如下:
1、header.htm --- 页面头部
2、discus.htm --- 论坛首页内容部分
3、index_header.htm --- 头部发帖按钮，和公告内容页。
4、footer.htm --- 页面底部
5、viewthread.htm --- 查看帖子内容
6、css_common.htm --- 公共样式css样式页面
7、css_script.htm --- 其他常用css样式页面
8、viewthread.htm --- 阅读主题
9、forumdisplay.htm --- 论坛主题列表
10、forumdisplay_subforum.htm --- 子论坛列表
当然刚开始接触模板制作也可以只修改其中的一部分，只要将css.htm，header.htm，footer.htm这三个文件按照您的风格制作出来就可以让模板风格作变换，其他文件也可以根据您对风格的要求进行调整。
Discuz!模板文件的简单讲解:
刚接触discuz！模板文件，您会发现在这些htm文件中包含着很多像：
<!--{if $discuz_uid}-->……<!--{else}-->……<!--{/if}-->
{template css}
<!--{loop $plugins['links'] $plugin}-->……<!--{/loop}-->
$charset
{lang memberlist}
{MAINTABLECOLOR}
这样6类在一般htm文件中不常见的语句和变量，这些语句是Discuz!模版中的特有语句，具体说明如下：
<!--{if ×××}-->……<!--{else}-->……<!--{/if}-->
这类语句并非普通HTML中的注释语句，而是Discuz!特有的模板判断语法，就好比php或者
其他语法中的 if,else,then等等。
通过这些语法，来控制一些功能的显示控制等效果。
{template ×××}
这类语句是模板调用语句，比如在某个模板中，想调用另一个模板中的内容，可以通过上面的语句对其他模板文件进行调用，比如在header.htm模板文件中的{template css}，将css.htm模板文件调入。
index.htm模板文件中最顶有 {template header}，最底有 {template footer}，分别调入的是header.htm和footer.htm两个模板文件，这样根据页面结构和功能的细分，使Discuz!模板的设计制作更为灵活，方便。
<!--{loop ×××}-->……<!--{/loop}-->
这类语句为循环语句，循环执行内部程序，直到数据输出完毕结束。
通过这些语句，能够达到把同一系列的资料进行循环显示效果，常见的如论坛列表、帖子列表等。
$×××
这样以$开头的是Discuz! 参数和变量，一般情况下不建议修改。
另外还有一些是Discuz! 固定参数，如：
$seohead ——后台设置的头部信息
$charset —— config.inc.php中设置语言字符集，必不可少，不能删除！$extrahead ——控制论坛自动跳转参数，必不可少，不能删除！
{lang ×××}
这类以lang开头的是Discuz!语言包调用语句，后面的变量可以在语言包文件中找到相对应的字段，在模板中所调用的大部分都是 ng.php 文件中的，如下，左侧为模版文件中调用语句，右侧为语言包中对应字段：（用户可以根据自己的需求对语言包进行修改）{lang pm} 'pm' => '短消息'
{lang admincp} 'admincp' => '系统设置'
{lang memberlist} 'memberlist' => '会员'
{×××}
{IMGDIR}这类括弧内大写的变量是Discuz!风格配色方案中的参数，可根据您的需要通过后台定义新的风格变量。
3、通过Discuz!管理后台新增模板：
图片和html文档制作好，css调整好以后我们就可以通过管理后台来定义新的风格了。
首先，将图片和htm模板文件上传到相应的目录，现在制作这套模板叫test，那么我们就在images目录和templates目录下分别建立一个test目录。
images/test文件夹用于存放这套模板的图片，把在第1步中切好的所有图片保存到这个文件夹中。
templates/test文件夹用于存放这套模板的htm文件，先从templates/default/目录
中复css.htm、header.htm、
footer.htm这三个文件，到这个文件夹中。
接下来的工作都要在论坛后台设置中来完成
（1）进入论坛点击“界面——> 模板管理”，在新增模板后填入模板名称，模板文件所在目录，板权信息然后提交即可！
（2）在“界面——>风格管理”中，在新增界面风格后填入方案名称然后提交即可！
（3）提交方案名称后，您就可以在界面风格中看到您所定义的新的风格方案。
到此，一套新的风格模板方案就添加到模板库里了，但还不是我们需要的最终效果，接下来要对模板文件继续进行调整，以达到模板的最终效果。
（4）点击 [详情] 后就可以进入该模板的风格配色方案的编辑页面，您会发现，页面中的文本框内大部分都是空白的，这是因为我们之前添加到templates/test 中的 css.htm 是默认模板，需要根据我们所设计的风格把各个对应参数填入相应位置就可以了。
（5）在制作界面方案 navy blue 的时候作者自定义了几个 css，主要是用来控制用登陆信息部分的文字颜色、背景，为了方便调整，将这些颜色和背景图片通过后台定义成变量。
（{HMIMG1}－menu_left.gif，{HMIMG2}－menu_right.gif，hmtextcolor－#FFFFFF）
注意：Discuz！管理后台的编辑界面方案功能，可以很方便的定义新的变量，用来控制设计者所定义的css样式表，所以在写css的时候如果您需要按照您的需求来制作新的css，在后台中将您所定义的css中的颜色、字体、字号、等参数值（宽度、高度、百分比等）定义成新的变量，这样在制作风格模板的时候方便调整
（6）需要注意的是，在 css.htm 模板文件中，需要把右侧的替换内容用这些自定义变量名来替代，这些变量才可以起到作用。
我们打开“界面——> 模板管理”，点击 test 模板后面的 [详情] ，进入模板维护界面。
（7）您会看到，这这个页面中包含 css，footer，header 三个模板文件，这三个文件是我们之前通过 default 目录复制过来的默认模板文件。
我们要将这些文件的内容替换成我们自己的模板文件内容才可以，点击 css 后的 [编辑] 进入模板文件编辑页面，将自己定义的 css 粘贴到默认css 模板文件。
（8）接下来，我们将自定义 css 中的颜色值和背景图片用之前在风格配色方案定义的变量替换，提交后，这样这些变量就可以通过后台来调整了。
（9）最后一步，因为这套模板 footer 部分未作调整，只要将 header 部分替换成自己制作的内容就可以了，点击 header 后的 [编辑]进入模板文件编辑页面，将自己制作好的header.htm 代码替换原始 header.htm 代码，提交。
（10）进入“工具——>更新缓存”，在前台选择你做好色风格浏览就可以了。
自此，整套模板的制作到此结束。
如果您的编码能力比较强，模板文件这部分完全可以在 Discuz! 后台直接进行编辑，不过还是建议先在一些工具软件里编辑后检验一下，这样能避免一些不必要的错误。
