Discuz模板修改教程演示

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）然后切换到“系统设置——> 界面——>风格管理”，您就可以在界面风格中看到您所定义的新的风格方案。点击安装就可以了！如下图：

（4）然后点击[编辑] 后就可以进入该模板的风格配色方案的编辑页面，此根据你的界面风格配色方案设置一下你的配色方案。

具体的设置参数，主要对应的前台显示效果参照如下链接地址的标注：

_f

填写好后，点击“提交”，更新一下缓存，就ok了。在这里我只是简略的介绍一下安装成品模板的方法。

在制作模板的过程中我们大多数的精力主要集中在样式的调整。不过dz给我们提供了简单快捷的调试方式。你可以将需要修改的样式写到css_appendhtm ,它的代码是：$extrahead

{subtemplate css_script}

根据css的特点，在css_appendhtm里的样式将覆盖css_commen.htm中的文件的。注意只是覆盖原有的属性。没有修改的属性将依旧调用css_commen.htm的样式。这样我们各以节省很多的代码。

同样对于css_script.htm同样如css_commen.htm一样。你只需要在新建一个文件

css_script_append.htm文件。将所需修改的样式拷贝到css_script_append.htm，但需要注意的是一定按dz的规范，将css样式写入你所修改的代码所在的标签中。例如：[CURSCRIPT = index]

[/CURSCRIPT]

下面我将逐步介绍如何简单的调整htm模板文件和css，文件以帮助大家更好的了解如何更好的来了解模板文件。

一、首先我们将default默认模板文件夹下的：

1、header.htm--页面头部

2、discus.htm--论坛首页

4、footer.htm-- 页面底部

同时新建一个css_append.htm文件。用来填写你需要记录的css样式。

一般我们通常需要移动的元素和样式主要有以下集中元素。

网站头部：header.htm

1 头部登录注册菜单菜单，主要对应的htm代码标签为

主要对应的css样式为css_commen.htm中的：

#menu { position: absolute; right: 0; bottom: 0; _bottom: -2px; height: 26px; }

#menu li { display: inline; float: left; margin-left: 5px; {MENUBGCODE}; }

#menu a { float: left; padding: 0 14px; height: 25px; border: solid {MENUBORDER}; border-width: 1px 1px 0; background: transparent none; line-height: 25px; color: {MENUTEXT}; text-decoration: none; overflow: hidden; }

#menu a.dropmenu { padding-right: 20px; background-image: url({IMGDIR}/arrow_down.gif); background-repeat: no-repeat; background-position: 95% 50%; }

#menu a:hover { border-color: {HEADERBORDERCOLOR}; background-color: {MENUHOVER}; color: {MENUHOVERTEXT}; }

#menu li.current a { height: 26px; border-color: {HEADERBORDERCOLOR}; background-color: {MENUHOVER}; color: {MENUHOVERTEXT}; }

2.网站logo.gif我们一般通过后台来调节他。主要对应的htm代码标签为：

{BOARDLOGO}

主要对应的样式为：#header .wrap { position: relative; padding: 24px 0 22px; }

#header h2 { float: left; }

当然有些css并不是直接加大元素上的有时候他们需要间接，复合来控制。至于效果你要自己修改看看。

3.头部的导航栏对顶主要对应的htm代码标签为：

主要对应的样式为css_commen.htm中的:

#menu .menu1 { background:url({STYLEIMGDIR}/menu_bg.gif) no-repeat scroll 0 0 transparent;height:35px;margin:0;padding-left:25px;}

#menu .menu1 ul { float:left; width:700px; }

#menu a { font-size:14px; border:medium none; color:#7FA1C4; font-size:14px; line-height:27px;}

#menu a:hover { background-color: transparent; }

#menu li.current { background:url({STYLEIMGDIR}/menu_cur.gif) no-repeat scroll 0 0 transparent;}

#menu li.current a { *height: 35px; border:0 solid {HEADERBORDERCOLOR}; background: