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）   然后点击 [编辑] 后就可以进入该模板的风格配色方案的编辑页面，此根据你的界面风格配色方案设置一下你的配色方案。
具体的设置参数，主要对应的前台显示效果参照如下链接地址的标注：
?tid=1496344&from=recommend_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样式写入你所修改的代码所在的标签中。例如：
在修改之前你应该了解一下有关模板的知识。默认的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]

默认模板头部修改视图：

如上图所示：此头部文件对应的元素主要对应三个元素。
头部的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; }
现在我已经基本介绍完了头部元素。大家可以参照着对官方皮肤做一些尝试了。
上篇我已经介绍过了最主要头部文件现在我们接着header篇的教程接着往下将。下面就到了内容区的内容了。也就是默认模板文件中的discuz.htm中的内容。这个文件里所包含的内容比较多下面我们来逐个分析一下它:
第一部分:

这个区域放置在discuz.htm中的头部最右侧的风格切换按钮并不是这一部分的.它是header
部分的.
在这部分通常需要修改的地方不多.
他的htm文件内容放置在:                         <div id="nav"></div>标签
样式主要放在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}; }
如果你想知道以上代码的意思。可以的奥网上去查查每个属性的意思，然后根据你要修改的要求给予其适当的值。
接着下面到了页面的主题内容区域：
下面我分块给大家一部分一部分的剖析，首先是如下图的这部分：


我们这里通常需要注意的是：
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中的
<p class="right forumcount">
                {lang index_today}: <em>$todayposts</em>, {lang index_yesterday}: <em>$postdata[0]</em>, {lang index_members}: <em>$totalmembers</em>
        </p>
这段代码吧，将它放到你需要的地方。

下面我们来介绍正文了这也是大家最常用的部分，和修改最频繁的部分：
我以默认的和大家通常修改完后的样式对照着个大家说明一下这部分

[CURSCRIPT = index]

[/CURSCRIPT]

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

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

1、header.htm--页面头部
2、discus.htm--论坛首页

4、footer.htm-- 页面底部

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

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

网站头部：header.htm

1 头部登录注册菜单菜单，主要对应的htm代码标签为<div id="umenu"> </div>

  主要对应的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代码标签为：

<h2><a href="$indexname" title="$bbname">{BOARDLOGO}</a></h2>

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


#header h2 { float: left; }

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


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

<div class="menu"></div>

主要对应的样式为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中的：

<div id="nav"></div>

主要对应的样式为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代码为：

<div id="nav"></div>

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

友情链接：

主要对应的htm代码为discuz..htm中的

<!--{if $_DCACHE['forumlinks'][0] || $_DCACHE['forumlinks'][1] || $_DCACHE['forumlinks'][2]}-->


<div class="mainbox list">





<h3>




<span class="headactions"><img id="forumlinks_img" src="{STYLEIMGDIR}/$collapseimg[forumlinks].gif" alt="" /></span>




{lang board_links}</h3>



<div id="forumlinks" style="$collapse[forumlinks]">



<!--{if $_DCACHE['forumlinks'][0]}-->




<div class="forumlinks">





<ul class="s_clear">$_DCACHE['forumlinks'][0]</ul>




</div>



<!--{/if}-->



<!--{if $_DCACHE['forumlinks'][1]}-->




<div class="forumimglink">





$_DCACHE['forumlinks'][1]
</div>



<!--{/if}-->



<!--{if $_DCACHE['forumlinks'][2]}-->




<div class="forumtxtlink">





<ul class="s_clear">





$_DCACHE['forumlinks'][2]





</ul>




</div>



<!--{/if}-->



</div>


</div>

<!--{/if}-->

主要对应的样式为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中的标签为：
<div class="mainbox list" id="online"></div>

#online h3 { font-weight: 400; }

#online h3 a, #online h3 em, #online h3 strong { font-weight: 700; }

三、下面是index_header.htm文件需要修改的地方。

主要对应的htm标签风别为：头部——》<div class="pages_btns s_clear"></div>

主要涉及到的需要修改的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; }

底部公告内容- -》<div id="ann"></div>

主要涉及到的需要修改的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代码为：

<div id="sidebar" class="side" style="$collapse[sidebar]"></div>


五、首页底部对应的html代码为：


<div id="footer"></div>

主要涉及到的需要修改的css为css_commen.htm中的：

#footer { padding: 1em 0; }

#rightinfo { float: left; }

#footlink { float: right; text-align: right; }

#footer, #footer a { color: {FOOTERTEXT}; }