Discuz模板修改基础教程——header篇
在修改之前你应该了解一下有关模板的知识。默认的discuz的模板文件时存放在根目录的
./template/default/文件下的htm文件。在这个文件夹下以css_开头的文件时控制默认模板的css样式表。所有的关于样式的文件你都可以在这里修改。
如果你是个新手，建议你不要去修改css_common.htm文件中的文件。你可以吧你需要修改后的样式拷贝到css_append.htm文件。就是受你不需要动css_common.htm的任何代码，只需要把你修改后的css代码写到css_append.htm这个文件夹下。(这方便将你的代码和源程序代码分开。如果你想要恢复默认的样式，直接清空css_append.htm文件就可以了。)
另外一个经常需要修改的css文件就是css_script.htm文件。中的代码不可以拷贝到css_append.htm文件中。如果你要修改可以单独在重新新建一个文件命名为css_script_append.htm文件把，你需要修改的样式按照css_script中的样式规范写入这个文件例如一下形势。：
[CURSCRIPT = index](此处为当前应用此css样式的页面文件。)
#ann { margin: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid {COMMONBORDER}; border- 1px 0 background: {COMMONBG}; }
[/CURSCRIPT]
如上图所示：此头部文件对应的元素主要对应三个元素。
头部的logo：这个部分你可以通过在后台设置 界面-》模板风格-》编辑-高级模式。
在这里来替换你自己的logo就课可以了。当然你可以调节你的头背景。颜色，或者给头部替换一个背景图片而不是单纯的颜色。你也可以在后台进行设置。还是图二所在的页面
-》找到
在这里你可以设置页头的背景颜色。也可以设置背景图片来设置你单调的头部背景色。但要注意的是在添加背景图片的时候一定要注意他的附加属性。这一点很重要如果你的背景想居中显示的话可以设置为 热no-repeat 50% 50% 这里的no-repeat控制的是当您的图片不足以铺满整个头部时。是否平铺该背景。我们再此设置成不平铺。默认的是以images/default的header.gif图片水平平铺。所以一条西线就成了一个够宽的画布背景了。
在你顺利设置完这些元素后，你可能发现由于元素尺寸的改变而导致了整体尺寸布局的不协调这样我们就需要调节css了。如我上面所说的。如果我们是初学者可以再不动原样式的情况下修改。
Logo默认放置的位置是在：header.htm中的 <h2><a href="$indexname" title="$bbname">{BOARDLOGO}</a></h2>标签中的。如果你想调节它的上下左右边距可以将css_common.htm中需要修改的代码拷贝到css_append.htm中。
#header h2 { float:left; padding:10px 60px;}
通过设置它的各项属性来控制logo的位置。当然具体的属性值例如margin，padding的含义再次我就不多说了，你可以到网上搜索一下。
下面我来介绍第二个元素
<div id="umenu"></div>
关于它的设置我在这里具体说两点。
一． 它的位置调节样式为css_common.htm中的：
#umenu { position: absolute; right: 0; top: 0; line-height: 20px; }
二． 它的颜色，你可以通过后台同意设置它的颜色。不过可能会改动其他元素的颜色。如果你要单独设置的话去修改：#umenu, #umenu a, #umenu .pipe { color: {HEADERTEXT}; }去掉这个样式的颜色变量，来单独给他设置。这样既不影响页面原有颜色基础上，单独更改它的颜色。
第三个元素——导航栏：此元素默认是可以再后台修改的如下图：
他在header.htm中包含在下面的元素中：<div id="menu"></div>
它的位置样式调节为：
#menu {bottom:0; height:26px; position:absolute; right:0;}
由英文直译可知他在头部盒模型(不懂的去搜索一下)中定位方式为绝对定位，距离bottom为0，右边距为0；所以他出现的位置为右下方。
如果你不满足于已有的
最后在头部文件中海包括一个风格切换的按钮这个元素也是头部元素中的。它对应于header.htm文件中的：
<ul id="style_switch"></ul>
它的位置调节样式为：
#style_switch { position: absolute; right: 0px; bottom: -25px; }
现在我已经基本介绍完了头部元素。大家可以参照着对官方皮肤做一些尝试了。
| Discuz模板的制作相对还是比较简单，现在应用中心的上线又涌现出来一大批模板开发作者，不管大家做免费模板还是商业模板，都希望每个开发者可以维护好自己的模板，给站长们一个好模板。Discuz模板的创建步骤每个都不尽相同，今天在站帮网分享下Discuz模板的创建方法。 一、创建Discuz模板存放文件夹 在论坛程序根目录中的template文件夹中创建自己命名的模板目录archy_test，如下图所示： <ignore_js_op> 二、论坛后台模板管理里面的新增模板 后台--界面--模板管理--新增模板，具体填写如下图所示： 本帖隐藏的内容<ignore_js_op>三、复制默认风格界面配色方案或者新增 <ignore_js_op> 后台--界面--风格管理--点击默认风格上面的复制。 四、编辑复制出来的风格，选择2步新增的某某模板为匹配模板 <ignore_js_op> 后台--界面--风格管理--点击复制出来的风格的编辑，然后找到--匹配模板:下拉选择某某模板。 五、创建全局CSS样式和常用模板文件 在创建的模板文件夹archy_test中建立全局文件夹common，并在全局文件夹里创建css样式文件与常用全局文件 extend_common.css 是附加的全局样式表(查看关于这个附加css文件的功能介绍) extend_module.css 是附件的模块样式表(查看关于这个附加css文件的功能介绍) widthauto.css 是切换宽版时二次定义全局样式表的文件 header.htm 全局页头文件 footer.htm 全局页尾文件 <ignore_js_op> 因为Discuz的模板处理特性是如果不能在非默认模板目录中找到模板文件就在默认模板目录中去调用！所以我们需要修改哪个模板文件，就到对应默认模板中复制文件放到自己创建的模板文件夹中即可。 创建模板时请根据默认模板目录的文件目录结构对应进行复制创建，查看模板目录结构注解。 六、在创建的模板目录中增扩展图片目录文件夹archy_img <ignore_js_op> 七、编辑复制出来的新模板，设置扩展图片目录 <ignore_js_op> 八、设置复制出来的新模板为默认模板，模板创建完成，进行其他DIV+CSS设计。 注意事项：风格管理编辑页面中重点风格常量介绍 风格管理编辑页面中风格常量在模板中的注解图 http://bbs.zb7.com/thread-6002-1-1.html 1、匹配模板：对应的模板套系 2、扩展配色：此风格基础上可用于用户切换配色方案的扩展，它对应 ./template/mytest/style/ 目录中的样式文件。全新创建时应在./template/mytest/style/目录中建立如t1/style.css之后方能生效 3、默认配色：指定站点访问时，用户首先看到的配色方案 4、默认表情分类：对应后台 - 界面 - 表情管理中所启用的表情 5、界面基础图片目录：可用于更改模板图片目录，在CSS文件中使用{IMGDIR}的常量进行输出，在Discuz! X2版本之后的模板中需要使用$_G['style']['imgdir'] 6、扩展图片目录：用来更改扩展图片目录，在CSS文件中使用{STYLEIMGDIR}的常量进行输出，在Discuz! X2版本之后的模板中需要使用$_G['style']['styleimgdir'] 7、其他风格常量：以上没有提到风格常量，均可以在后台取得以花括号框选的常量用以在CSS文件中使用（X2以后的模板中均需要$_G['style']中对应的数组键值），涉及到CSS样式的动态变更，可以在修改对应设置如：正常字体大小 {FONTSIZE}:12px/1.5，则直接修改程序运行中CSS缓存中的值 8、自定义模板变量 - 新增：可以根据扩展需求，针对个性化的CSS进行全局的定义 |