Discuz模板修改教程演示.docx
《Discuz模板修改教程演示.docx》由会员分享，可在线阅读，更多相关《Discuz模板修改教程演示.docx（20页珍藏版）》请在冰豆网上搜索。
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）然后点击[编辑]后就可以进入该模板的风格配色方案的编辑页面，此根据你的界面风格配色方案设置一下你的配色方案。
具体的设置参数，主要对应的前台显示效果参照如下链接地址的标注：
填写好后，点击“提交”，更新一下缓存，就ok了。
在这里我只是简略的介绍一下安装成品模板的方法。
在制作模板的过程中我们大多数的精力主要集中在样式的调整。
不过dz给我们提供了简单快捷的调试方式。
你可以将需要修改的样式写到css_appendhtm,它的代码是：
$extrahead
{subtemplatecss_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默认模板文件夹下的：
同时新建一个css_append.htm文件。
用来填写你需要记录的css样式。
一般我们通常需要移动的元素和样式主要有以下集中元素。
网站头部：
header.htm
1头部登录注册菜单菜单，主要对应的htm代码标签为
主要对应的css样式为css_commen.htm中的：
#menu{position:
absolute;right:
0;bottom:
0;_bottom:
-2px;height:
26px;}
#menuli{display:
inline;float:
left;margin-left:
5px;{MENUBGCODE};}
#menua{float:
left;padding:
014px;height:
25px;border:
solid{MENUBORDER};border-width:
1px1px0;background:
transparentnone;line-height:
25px;color:
{MENUTEXT};text-decoration:
none;overflow:
hidden;}
#menua.dropmenu{padding-right:
20px;background-image:
url（{IMGDIR}/arrow_down.gif）;background-repeat:
no-repeat;background-position:
95%50%;}
#menua:
hover{border-color:
{HEADERBORDERCOLOR};background-color:
{MENUHOVER};color:
{MENUHOVERTEXT};}
#menuli.currenta{height:
26px;border-color:
2.网站logo.gif我们一般通过后台来调节他。
主要对应的htm代码标签为：
主要对应的样式为：
#header.wrap{position:
relative;padding:
24px022px;}
#headerh2{float:
left;}
当然有些css并不是直接加大元素上的有时候他们需要间接，复合来控制。
至于效果你要自己修改看看。
3.头部的导航栏对顶主要对应的htm代码标签为：
主要对应的样式为css_commen.htm中的:
#menu.menu1{background:
url（{STYLEIMGDIR}/menu_bg.gif）no-repeatscroll00transparent;height:
35px;margin:
0;padding-left:
25px;}
#menu.menu1ul{float:
left;width:
700px;}
#menua{font-size:
14px;border:
mediumnone;color:
#7FA1C4;font-size:
14px;line-height:
27px;}
hover{background-color:
transparent;}
#menuli.current{background:
url（{STYLEIMGDIR}/menu_cur.gif）no-repeatscroll00transparent;}
#menuli.currenta{*height:
35px;border:
0solid{HEADERBORDERCOLOR};background:
{MENUHOVER}url（{STYLEIMGDIR}/menu_cur.gif）repeat-xright-27px;overflow:
hidden;height:
35px;}
5px;height:
27px;margin:
4px00;list-style:
noneoutsidenone;}
一般都不文件大体上包含着三个元素至于一些细节问题你就要自己亲自动手试一试了。
二、下面是discuz.htm文件需要修改的地方。
主要对应得htm代码为discuz..htm中的：
主要对应的样式为css_commen.htm中的：
#nav{margin:
-8pxauto0;background:
url（{IMGDIR}/icon_nav.gif）no-repeat050%;text-align:
left;text-indent:
25px;line-height:
3em;}
#nav,#nava{color:
通常在大家修改边内容区的时候需要修改：
板块下面的背景和版块前面的默认图标。
这里主要是通过以下css来控制实现的：
.list{border-top:
1pxsolid{COMMONBORDER};}
.content.listh3{padding-left:
6px;color:
{MIDTEXT};line-height:
.listtd,.listth{height:
50px;padding:
6px0;border-top:
1pxdashed{COMMONBORDER};color:
{MIDTEXT};}
.listth{background:
url（{IMGDIR}/forum.gif）5px10pxno-repeat;padding-left:
45px!
important;}
.narrowlistth{vertical-align:
top;}
.listth.new{background-image:
url（{IMGDIR}/forum_new.gif）;}
.listthh2em{font-weight:
400;}
.listthh2emstrong{color:
{NOTICETEXT}}
注意这里的变量{IMGDIR}这种php变量在。
后台-》界面-》风格管理-》编辑-》高级模式
中都有。
他会到你置顶的目录下去搜寻图片。
如图：
内容列表：
主要对应得htm代码为：
友情链接：
主要对应的htm代码为discuz..htm中的
--{if$_DCACHE['forumlinks'][0]||$_DCACHE['forumlinks'][1]||$_DCACHE['forumlinks'][2]}-->
{langboard_links}
--{if$_DCACHE['forumlinks'][0]}-->
$_DCACHE['forumlinks'][0]
--{/if}-->
--{if$_DCACHE['forumlinks'][1]}-->
$_DCACHE['forumlinks'][1]
--{if$_DCACHE['forumlinks'][2]}-->
$_DCACHE['forumlinks'][2]
主要对应的样式为css_script.htm中的：
.forumlinks,.forumimglink,.forumtxtlink{padding:
6px;border-top:
.forumlinksulli{float:
49%;height:
50px;line-height:
1.4em;}
.forumimglinka{margin-right:
8px;}
.forumimglinkimg{margin:
2px0;}
.forumlogo{float:
left;padding-top:
2px;width:
100px;}
.forumcontent{padding-right:
18px;height:
50px;}
.forumcontentp{overflow:
17px;color:
.forumtxtlinkli{float:
left;margin-right:
5px;width:
8em;white-space:
nowrap;overflow:
hidden;text-overflow:
ellipsis;}
在线会员：
对应的dscuz..htm中的标签为：
#onlineh3{font-weight:
#onlineh3a,#onlineh3em,#onlineh3strong{font-weight:
700;}
三、下面是index_header.htm文件需要修改的地方。
主要对应的htm标签风别为：
头部——》
主要涉及到的需要修改的css为css_commen.htm中的：
.pages_btns{padding:
5px01em;line-height:
30px;}
和css.script.htm中的：
.postbtn,.replybtn{width:
67px;height:
30px;background:
url（{IMGDIR}/newtopic.gif）no-repeat00;font-size:
14px;font-weight:
700;line-height:
28px;*line-height:
32px;text-align:
center;overflow:
.replybtn{background-image:
url（{IMGDIR}/reply.gif）;}
.postbtna,.replybtna{display:
block;padding-left:
5px;color:
#FFF;letter-spacing:
5px;}
.postbtna:
hover,.replybtna:
hover{text-decoration:
none;}
底部公告内容--》
主要涉及到的需要修改的css为css.script.htm中的：
#ann{margin:
5px010px;padding:
2px5px;line-height:
30px;border:
solid{COMMONBORDER};border-width:
1px0;background:
{COMMONBG};}
#anndl{overflow:
#anndt{float:
5em;background:
url（{IMGDIR}/ann_icon.gif）no-repeat050%;text-indent:
2em;font-weight:
#anndd{margin-left:
#annli{
padding-left:
10px;white-space:
nowrap;}
#annem{margin-left:
{MIDTEXT};font-size:
0.83em;}
#annbody{height:
30px;overflow:
hidden;padding-right:
16px;}
三、下面是index_navbar.htm文件需要修改的地方。
.itemtitle{clear:
both;overflow:
hidden;margin-bottom:
10px;line-height:
23px;}
四、首页边栏对应的html代码为：
五、首页底部对应的html代码为：
#footer{padding:
1em0;}
#rightinfo{float:
#footlink{float:
right;text-align:
right;}
#footer,#footera{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样式的页面文件。
默认模板头部修改视图：
2010-3-1710:
41上传
下载附件（15.92KB）
header
如上图所示：
此头部文件对应的元素主要对应三个元素。
头部的logo：
这个部分你可以通过在后台设置界面-》模板风格-》编辑-高级模式。
下载附件（65.12KB）
admincp
在这里来替换你自己的logo就课可以了。
当然你可以调节你的头背景。
颜色，或者给头部替换一个背景图片而不是单纯的颜色。
你也可以在后台进行设置。
还是图二所在的页面
-》找到
下载附件（21.29KB）
header_bg
在这里你可以设置页头的背景颜色。
也可以设置背景图片来设置你单调的头部背景色。
但要注意的是在添加背景图片的时候一定要注意他的附加属性。
这一点很重要如果你的背景想居中显示的话可以设置为热no-repeat50%50%这里的no-repeat控制的是当您的图片不足以铺满整个头部时。
是否平铺该背景。
我们再此设置成不平铺。
默认的是以images/default的header.gif图片水平平铺。
所以一条西线就成了一个够宽的画布背景了。
在你顺利设置完这些元素后，你可能发现由于元素尺寸的改变而导致了整体尺寸布局的不协调这样我们就需要调节css了。
如我上面所说的。
如果我们是初学者可以再不动原样式的情况下修改。
Logo默认放置的位置是在：
header.htm中的
如果你想调节它的上下左右边距可以将css_common.htm中需要修改的代码拷贝到css_append.htm中。
10px60px;}
通过设置它的各项属性来控制logo的位置。
当然具体的属性值例如margin，padding的含义再次我就不多说了，你可以到网上搜索一下。
下面我来介绍第二个元素
关于它的设置我在这里具体说两点。
一．它的位置调节样式为css_common.htm中的：
#umenu{position:
0;top:
0;line-height:
20px;}
二．它的颜色，你可以通过后台同意设置它的颜色。
不过可能会改动其他元素的颜色。
如果你要单独设置的话去修改：
#umenu,#umenua,#umenu.pipe{color:
{HEADERTEXT};}去掉这个样式的颜色变量，来单独给他设置。
这样既不影响页面原有颜色基础上，单独更改它的颜色。
第三个元素——导航栏：
此元素默认是可以再后台修改的如下图：
下载附件（89.48KB）
menu
他在header.h
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1
升级会员 