[计算机]Discuz模板修改教程演示.doc

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） 然后点击 编辑 后就可以进入该模板的风格配色方案的编辑页面，此根据你的界面风格配色方案设置一下你的配色方案。具体的设置参数，主要对应的前台显示效果参照如下链接地址的标注：/viewthread.php?tid=1496344&from=recommend_f填写好后，点 击“提交”，更新一下缓存，就ok了。在这里我只是简略的介绍一下安装成品模板的方法。在制作模板的过程中我们大多数的精力主要集中在样式的调整。不过dz给我们提供了简单快捷的调试方式。你可以将需要修改的样式写到css_appendhtm ,它的代码是：$extraheadsubtemplate 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.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: 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: 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;一般都不文件大体上包含着三个元素至于一些细节问题你就要自己亲自动手试一试了。二、下面是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; 通常在大家修改边内容区的时候需要修改：板块下面的背景和版块前面的默认图标。这里主要是通过以下css来控制实现的：.list border-top: 3px 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 10px 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代码为：主要对应的样式为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-height: 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; width: 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; 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); .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: 1px 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-size: 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 padding: 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_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-width: 1px 0; background: COMMONBG; /CURSCRIPT默认模板头部修改视图： 2010-3-17 10:41 上传下载附件 (15.92 KB) header 如上图所示：此头部文件对应的元素主要对应三个元素。头部的logo：这个部分你可以通过在后台设置 界面-模板风格-编辑-高级模式。 2010-3-17 10:41 上传下载附件 (65.12 KB) admincp 在这里来替换你自己的logo就课可以了。当然你可以调节你的头背景。颜色，或者给头部替换一个背景图片而不是单纯的颜色。你也可以在后台进行设置。还是图二所在的页面-找到 2010-3-17 10:41 上传下载附件 (21.29 KB) header_bg 在这里你可以设置页头的背景颜色。也可以设置背景图片来设置你单调的头部背景色。但要注意的是在添加背景图片的时候一定要注意他的附加属性。这一点很重要如果你的背景想居中显示的话可以设置为 热no-repeat 50% 50% 这里的no-repeat控制的是当您的图片不足以铺满整个头部时。是否平铺该背景。我们再此设置成不平铺。默认的是以images/default的 header.gif图片水平平铺。所以一条西线就成了一个够宽的画布背景了。在你顺利设置完这些元素后，你可能发现由于元素尺寸的改变而导致了整体尺寸布局的不协调这样我们就需要调节css了。如我上面所说的。如果我们是初学者可以再不动原样式的情况下修改。Logo默认放置的位置是在：header.htm中的 BOARDLOGO标签中的。如果你想调节它的上下左右边距可以将css_common.htm中需要修改的代码拷贝到css_append.htm中。#header h2 float:left; padding:10px 60px;通过设置它的各项属性来控制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.htm中包含在下面的元素中：它的位置样式调节为：#menu bottom:0; height:26px; position:absolute; right:0;由英文直译可知他在头部盒模型(不懂的去搜索一下)中定位方式为绝对定位，距离bottom为0，右边距为0；所以他出现的位置为右下方。如果你不满足于已有的最后在头部文件中海包括一个风格切换的按钮这个元素也是头部元素中的。它对应于header.htm文件中的：它的位置调节样式为：#style_switch position: absolute; right: 0px; bottom: -25px; 现在我已经基本介绍完了头部元素。大家可以参照着对官方皮肤做一些尝试了。上篇我已经介绍过了最主要头部文件现在我们接着header篇的教程接着往下将。下面就到了内容区的内容了。也就是默认模板文件中的discuz.htm中的内容。这个文件里所包含的内容比较多下面我们来逐个分析一下它:第一部分: 2010-3-26 12:57 上传下载附件 (5.48 KB) 这个区域放置在discuz.htm中的头部最右侧的风格切换按钮并不是这一部分的.它是header部分的.在这部分通常需要修改的地方不多.他的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; 如果你想知道以上代码的意思。可以的奥网上去查查每个属性的意思，然后根据你要修改的要求给予其适当的值。接着下面到了页面的主题内容区域：下面我分块给大家一部分一部分的剖析，首先是如下图的这部分： 2010-3-26 12:57 上传下载附件 (21.47 KB) 我们这里通常需要注意的是：1发帖按钮和他旁边的一行字，还有下面的整个公告并不是在discuz.htm文件中的。他们统一放在index_header.htm的文件中。结构很清晰得分为上下两部分。在这里需要重点介绍的是 发帖按钮 我们通常会替换这个按钮成我们自己的按钮。那么我们需要去改动它的样式。我们去./tempaltes/default/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); 你可以更换你的图片，添加如下代码到你的模板文件夹下的css_script.htm或者css_script_append.htm中。background: url(IMGDIR/你的图片.gif) no-repeat 0 0;在这里需要注意的是变量IMGDIR变量。他带表的是系统中的默认文件的路径。对应得是./images/default/.当然如果你安装了其他模板，一般情况下在它的目录下会有一个images文件。我们通常把与模板套系相关的图片放到里面。如果你想以用里面的图片可以这么写：background: url(STYLEIMGDIR/你的图片.gif) no-repeat 0 0;就可以引用到你的图片地址了。当然你在这里改了之后帖子列表页和帖子内容也得发帖按钮也会变。因为它们应用的是同一套样式。另外一个经常需要修改的地方莫过于公告的样式了。你经常需要来改变它的各部分颜色值，以便能更好的额融合到你模板中。那让我们来看看我们需要修改那些地方：#ann margin: 5px 0 10px; padding: 2px 5px; line-height: 30px; border: solid COMMONBORDER; border-width: 1px 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-size: 0.83em; 好了控制它的外形的就是这几个了。你至于每一项代表的是什么意义你自己试试就会知道了。当然公告的小喇叭你想换的话按照上面的发帖按钮的方法就可以了。在这里需要特别注意的是形如COMMONBORDER的这种代码是一般我们可以在后台自己编辑的。可能有好多元素应用了这种样。如果你改变的他的值可能好多地方需也会跟着修改。在这里我建议你直接用你的颜色代码直接替换这个变量。这样就可以单独修改此元素的属性了。2.至于最下方的 论坛版块和论坛动态。这连个按钮的代码文件单独放在index_navbar.htm中。他们一般很少改动。不过经常出现的一种情况是更换背景的蓝色底纹，你需要给他换个颜色，那就去修改它的背景图吧-images/default/btn_block.gif至于它右侧的发帖数和会员数。你能会修改它的位置。那么就去移动discuz.htm中的 lang index_today: $todayposts, lang index_yesterday: $postdata0, lang index_members: $totalmembers 这段代码吧，将它放到你需要的地方。下面我们来介绍正文了这也是大家最常用的部分，和修改最频繁的部分：我以默认的和大家通常修改完后的样式对照着个大家说明一下这部分 2010-3-26 12:57 上传下载附件 (17.68 KB) 以上是默认的模板样式。我们通常想要将他改成如下这种类型的。 2010-3-26 12:57 上传下载附件 (50.93 KB) 下面我们一部分一部分的来看首先是-头部的一条3px的粗线和板块名称，右上部的分区版主和展开收缩的图片按钮。对应的html代码为： lang forum_category_modedby: $catmoderators $catname我们通常要给这一块区域加一个背景这时候。你需要做的就是去掉顶部的淡红色粗线：我们需要到css_commen.htm中去修改这么一行代码:.list border-top: 3px solid COMMONBORDER; 你只要将他修改为0就可以将这条线去掉了。当然你可能需要给整个区域加一条框如第二幅图展示的那样，那么你只要将行代码稍加修改改为：.list border: 1px solid COMMONBORDER; 就可以了。下面就是给个头部添加你已经准备好的图片背景。为此我们需要添加这么一行代码：.content .list h3 padding-left: 9px; line-height: 31px; background: #D1E3EE url(STYLEIMGDIR/header_bg.gif) repeat-x; color: LINK; ；这里需要注意的是我们所准备的图片经常是很细的一条线。我们只要平铺让他在水平方向平铺就可以了。另外经常遇到的一个问题是。Line-height你可以通过调节这个数值使你的标题在垂直方向上上下便宜。当然要确保这里只有一行。如果是多行的话会很大程度的影响你的布局。我们接着