Discuz模板修改教程演示.docx

1、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-

2、 查看帖子内容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

3、语法。如果你不会的话可以去查阅一些资料。我们大多时候我们不必完全去重新做。默认模板的head等头部信息我们还是非常有必要要保留。将你做好的静态文件的切图我ps缩小成一个110X120大小名为preview.jpg的图片放到test目录下（这是后台安装界面显示的缩略图）。接 下来的工作要在论坛后台设置中来完成（1） 进入论坛点击 “系统设置 界面 模板管理”， 在新增模板后填入模板名称，模板文件所在目录，板权信息然后提交即可！如（3） 然后切换到“系统设置 界面风格管理”，您就可以 在界面风格中看到您所定义的新的风格方案。点击安装就可以了！如下图：（4） 然后点击 编辑 后就可以进入该模板的风格

4、配色方案的编辑页面，此根据你的界面风格配色方案设置一下你的配色方案。具体的设置参数，主要对应的前台显示效果参照如下链接地址的标注：填写好后，点 击“提交”，更新一下缓存，就ok了。在这里我只是简略的介绍一下安装成品模板的方法。在制作模板的过程中我们大多数的精力主要集中在样式的调整。不过dz给我们提供了简单快捷的调试方式。你可以将需要修改的样式写到css_appendhtm ,它的代码是：$extraheadsubtemplate css_script根据css的特点，在css_appendhtm里的样式将覆盖css_commen.htm中的文件的。注意只是覆盖原有的属性。没有修改的属性将依旧调

5、用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-页面头部

6、2、discus.htm-论坛首页4、footer.htm- 页面底部同时新建一个css_append.htm文件。用来填写你需要记录的css样式。一般我们通常需要移动的元素和样式主要有以下集中元素。网站头部：header.htm1 头部登录注册菜单菜单，主要对应的htm代码标签为 主要对应的css样式为css_commen.htm中的：#menu position: absolute; right: 0; bottom: 0; _bottom: -2px; height: 26px; #menu li display: inline; float: left; margin-left: 5p

7、x; 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_do

8、wn.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我们一般

9、通过后台来调节他。主要对应的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 transpare

10、nt;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 t

11、ransparent;#menu li.current a *height: 35px; border:0 solid HEADERBORDERCOLOR; background: MENUHOVER url(STYLEIMGDIR/menu_cur.gif) repeat-x right -27px; overflow: hidden; height:35px; #menu li display:inline; float:left; margin-left:5px; height:27px; margin:4px 0 0; list-style:none outside none;一般都不

12、文件大体上包含着三个元素至于一些细节问题你就要自己亲自动手试一试了。二、下面是discuz.htm文件需要修改的地方。 主要对应得htm代码为discuz.htm中的：主要对应的样式为css_commen.htm中的：#nav margin: -8px auto 0; background: url(IMGDIR/icon_nav.gif) no-repeat 0 50%; text-align: left; text-indent: 25px; line-height: 3em; #nav, #nav a color: MENUHOVERTEXT; 通常在大家修改边内容区的时候需要修改：板块

13、下面的背景和版块前面的默认图标。这里主要是通过以下css来控制实现的：.list border-top: 1px solid COMMONBORDER; .content .list h3 padding-left: 6px; color: MIDTEXT; line-height: 35px; .list td, .list th height: 50px; padding: 6px 0; border-top: 1px dashed COMMONBORDER; color: MIDTEXT; .list th background: url(IMGDIR/forum.gif) 5px 10

14、px no-repeat; padding-left: 45px !important; .narrowlist th vertical-align: top; .list th.new background-image: url(IMGDIR/forum_new.gif); .list th h2 em font-weight: 400; .list th h2 em strong color: NOTICETEXT 注意这里的变量IMGDIR这种php变量在。后台-界面-风格管理-编辑-高级模式中都有。他会到你置顶的目录下去搜寻图片。如图：内容列表：主要对应得htm代码为：主要对应的样式为

15、css_commen.htm中的：友情链接：主要对应的htm代码为discuz.htm中的lang board_links$_DCACHEforumlinks0$_DCACHEforumlinks1$_DCACHEforumlinks2主要对应的样式为css_script.htm中的：.forumlinks, .forumimglink, .forumtxtlink padding: 6px; border-top: 1px solid COMMONBORDER; .forumlinks ul li float: left; width: 49%; height: 50px; line-hei

16、ght: 1.4em; .forumimglink a margin-right: 8px; .forumimglink img margin: 2px 0; .forumlogo float: left; padding-top: 2px; width: 100px; .forumcontent padding-right: 18px; height: 50px; .forumcontent p overflow: hidden; height: 17px; color: MIDTEXT; .forumtxtlink li float: left; margin-right: 5px; wi

17、dth: 8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 在线会员：对应的dscuz.htm中的标签为：#online h3 font-weight: 400; #online h3 a, #online h3 em, #online h3 strong font-weight: 700; 三、下面是index_header.htm文件需要修改的地方。主要对应的htm标签风别为：头部主要涉及到的需要修改的css为css_commen.htm中的：.pages_btns padding: 5px 0 1em

18、; line-height: 30px; 和css.script.htm中的：.postbtn, .replybtn width: 67px; height: 30px; background: url(IMGDIR/newtopic.gif) no-repeat 0 0; font-size: 14px; font-weight: 700; line-height: 28px; *line-height: 32px; text-align: center; overflow: hidden; .replybtn background-image: url(IMGDIR/reply.gif);

19、 .postbtn a, .replybtn a display: block; padding-left: 5px; color: #FFF; letter-spacing: 5px; .postbtn a:hover, .replybtn a:hover text-decoration: none; 底部公告内容- -主要涉及到的需要修改的css为css.script.htm中的：#ann margin: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid COMMONBORDER; border-width: 1p

20、x 0; background: COMMONBG; #ann dl overflow: hidden; #ann dt float: left; width: 5em; background: url(IMGDIR/ann_icon.gif) no-repeat 0 50%; text-indent: 2em; font-weight: 700; #ann dd margin-left: 30px; #ann li padding-left: 10px; white-space: nowrap; #ann em margin-left: 5px; color: MIDTEXT; font-s

21、ize: 0.83em; #annbody height: 30px; overflow: hidden; padding-right: 16px; 三、下面是index_navbar.htm文件需要修改的地方。主要涉及到的需要修改的css为css_commen.htm中的：.itemtitle clear: both; overflow: hidden; margin-bottom: 10px; line-height: 23px; 四、首页边栏对应的html代码为：五、首页底部对应的html代码为：主要涉及到的需要修改的css为css_commen.htm中的：#footer paddin

22、g: 1em 0; #rightinfo float: left; #footlink float: right; text-align: right; #footer, #footer a color: FOOTERTEXT; 在修改之前你应该了解一下有关模板的知识。默认的discuz的模板文件时存放在根目录的./template/default/文件下的htm文件。在这个文件夹下以css_开头的文件时控制默认模板的css样式表。所有的关于样式的文件你都可以在这里修改。如果你是个新手，建议你不要去修改css_common.htm文件中的文件。你可以吧你需要修改后的样式拷贝到css_appen

23、d.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(此处

24、为当前应用此css样式的页面文件。)#ann margin: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid COMMONBORDER; border-width: 1px 0; background: COMMONBG; /CURSCRIPT默认模板头部修改视图： 2010-3-17 10:41 上传下载附件 (15.92 KB) header 如上图所示：此头部文件对应的元素主要对应三个元素。头部的logo：这个部分你可以通过在后台设置 界面-模板风格-编辑-高级模式。 2010-3-17 10:41 上传下载附

25、件 (65.12 KB) admincp 在这里来替换你自己的logo就课可以了。当然你可以调节你的头背景。颜色，或者给头部替换一个背景图片而不是单纯的颜色。你也可以在后台进行设置。还是图二所在的页面-找到 2010-3-17 10:41 上传下载附件 (21.29 KB) header_bg 在这里你可以设置页头的背景颜色。也可以设置背景图片来设置你单调的头部背景色。但要注意的是在添加背景图片的时候一定要注意他的附加属性。这一点很重要如果你的背景想居中显示的话可以设置为 热no-repeat 50% 50% 这里的no-repeat控制的是当您的图片不足以铺满整个头部时。是否平铺该背景。我们

26、再此设置成不平铺。默认的是以images/default的 header.gif图片水平平铺。所以一条西线就成了一个够宽的画布背景了。在你顺利设置完这些元素后，你可能发现由于元素尺寸的改变而导致了整体尺寸布局的不协调这样我们就需要调节css了。如我上面所说的。如果我们是初学者可以再不动原样式的情况下修改。Logo默认放置的位置是在：header.htm中的 BOARDLOGO标签中的。如果你想调节它的上下左右边距可以将css_common.htm中需要修改的代码拷贝到css_append.htm中。#header h2 float:left; padding:10px 60px;通过设置它的各

27、项属性来控制logo的位置。当然具体的属性值例如margin，padding的含义再次我就不多说了，你可以到网上搜索一下。下面我来介绍第二个元素关于它的设置我在这里具体说两点。一 它的位置调节样式为css_common.htm中的： #umenu position: absolute; right: 0; top: 0; line-height: 20px; 二 它的颜色，你可以通过后台同意设置它的颜色。不过可能会改动其他元素的颜色。如果你要单独设置的话去修改：#umenu, #umenu a, #umenu .pipe color: HEADERTEXT; 去掉这个样式的颜色变量，来单独给他设置。这样既不影响页面原有颜色基础上，单独更改它的颜色。第三个元素导航栏：此元素默认是可以再后台修改的如下图： 2010-3-17 10:41 上传下载附件 (89.48 KB) menu 他在header.h