Discuz模板修改教程演示.docx

--{/if}-->

--{/if}-->

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

.forumlinks,.forumimglink,.forumtxtlink{padding:

6px;border-top:

1pxsolid{COMMONBORDER};}

.forumlinksulli{float:

left;width:

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:

hidden;height:

17px;color:

{MIDTEXT};}

.forumtxtlinkli{float:

left;margin-right:

5px;width:

8em;white-space:

nowrap;overflow:

hidden;text-overflow:

ellipsis;}

在线会员：

对应的dscuz..htm中的标签为：

#onlineh3{font-weight:

400;}

#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:

hidden;}

.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:

hidden;}

#anndt{float:

left;width:

5em;background:

url（{IMGDIR}/ann_icon.gif）no-repeat050%;text-indent:

2em;font-weight:

700;}

#anndd{margin-left:

30px;}

#annli{

padding-left:

10px;white-space:

nowrap;}

#annem{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:

1em0;}

#rightinfo{float:

left;}

#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样式的页面文件。

）

#ann{margin:

5px010px;padding:

2px5px;line-height:

30px;border:

solid{COMMONBORDER};border-width:

1px0;background:

{COMMONBG};}

[/CURSCRIPT]

默认模板头部修改视图：

2010-3-1710:

41上传

下载附件（15.92KB）

header

如上图所示：

此头部文件对应的元素主要对应三个元素。

头部的logo：

这个部分你可以通过在后台设置界面-》模板风格-》编辑-高级模式。

2010-3-1710:

41上传

下载附件（65.12KB）

admincp

在这里来替换你自己的logo就课可以了。

当然你可以调节你的头背景。

颜色，或者给头部替换一个背景图片而不是单纯的颜色。

你也可以在后台进行设置。

还是图二所在的页面

-》找到

2010-3-1710:

41上传

下载附件（21.29KB）

header_bg

在这里你可以设置页头的背景颜色。

也可以设置背景图片来设置你单调的头部背景色。

但要注意的是在添加背景图片的时候一定要注意他的附加属性。

这一点很重要如果你的背景想居中显示的话可以设置为热no-repeat50%50%这里的no-repeat控制的是当您的图片不足以铺满整个头部时。

是否平铺该背景。

我们再此设置成不平铺。

默认的是以images/default的header.gif图片水平平铺。

所以一条西线就成了一个够宽的画布背景了。

在你顺利设置完这些元素后，你可能发现由于元素尺寸的改变而导致了整体尺寸布局的不协调这样我们就需要调节css了。

如我上面所说的。

如果我们是初学者可以再不动原样式的情况下修改。

Logo默认放置的位置是在：

header.htm中的

{BOARDLOGO}

如果你想调节它的上下左右边距可以将css_common.htm中需要修改的代码拷贝到css_append.htm中。

#headerh2{float:

left;padding:

10px60px;}

通过设置它的各项属性来控制logo的位置。

当然具体的属性值例如margin，padding的含义再次我就不多说了，你可以到网上搜索一下。

下面我来介绍第二个元素

关于它的设置我在这里具体说两点。

一．它的位置调节样式为css_common.htm中的：

#umenu{position:

absolute;right:

0;top:

0;line-height:

20px;}

二．它的颜色，你可以通过后台同意设置它的颜色。

不过可能会改动其他元素的颜色。

如果你要单独设置的话去修改：

#umenu,#umenua,#umenu.pipe{color:

{HEADERTEXT};}去掉这个样式的颜色变量，来单独给他设置。

这样既不影响页面原有颜色基础上，单独更改它的颜色。

第三个元素——导航栏：

此元素默认是可以再后台修改的如下图：

2010-3-1710:

41上传

下载附件（89.48KB）

menu

他在header.htm中包含在下面的元素中：

它的位置样式调节为：

#menu{bottom:

0;height:

26px;position:

absolute;right:

0;}

由英文直译可知他在头部盒模型（不懂的去搜索一下）中定位方式为绝对定位，距离bottom为0，右边距为0；所以他出现的位置为右下方。

如果你不满足于已有的

最后在头部文件中

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

Discuz 模板 修改 教程 演示

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。