FAQ首页 > 模板风格 > Discuz!NT > 查看文章
收起边栏
大字 小字 收藏 复制URL










3.1
Discuz!NT3.1模板制作说明
2010-10-12┆32,801 Views┆28
Comsenz于2010年2月初发布了Discuz!3.1版本,此版本总体具有了安全,稳定,高效等优点,可以称得上里程碑!鉴于客户需求量和用户需求的增多,特推出模板制作蓝本,以便大家可以在此蓝本基础上进行少量必要的修改即可形成自己的模板。

      纵观Discuz!NT的模板总体分为四个部分:主论坛模板,聚合页面,空间插件,相册插件。在每个模板文件夹下也对应有不同的样式定义和相应的文件夹。处于模板根目录下的样式为以下几个:dnt.css(论坛的模板样式定义),editor.css(论坛中编辑器样式定义),float.css(论坛弹窗的样式定义),seditor.css(论坛中快速发帖,回复,无刷新回复处的编辑器样式定义),website.css(此为聚合页面的样式定义)。夹子中大家从字眼就可以看出album是为相册插件的相关图片和样式定义文件夹,同理,space则为空间插件的相关定义。而根目录中images则为论坛和聚合页面所用的图片文件夹,其中聚合页面的图片是放在了images下的gather这个文件夹中,模板的具体结构可以看下图。



通过上面的结构图大家对NT的整体模板文件夹的构成有了一个醒目的了解,从下面开始一步一步的自定义个性化模板。

一.下载模板蓝本model,将下载好的模板model解压缩放在templates这个论坛模板文件下。你可以直接在这个模板基础上进行自定义,也可以将其重新命名,在重新命名时请一定要修改这个夹子下的about.xml这个文件中的template name="model",将那个name="model" 也相应修改为你新的命名。当然夹子中的那个about.png是模板缩略图,这个待你定制完模板后,做个截图即可。

二.以上准备工作完成以后,进入到后台的模板管理列表中就可以看到你新加入的模板了,选中它,然后将其入库,这样就生成了这个模板文件,生成后的模板蓝本雏形截图如下,这步完成以后,就要发挥你的聪明才智了,当然是要有一个设计初稿,在设计稿基础上,进行个性化模板制作了。



三.模板蓝本模板生成后,可以通过前台切换模板看到具体的效果。下面开始着手做个小修改,找到一点满足感。当然如果做到非常性化,还是需要下功夫的。打开dnt.css这个主论坛的样式定义。

      在样式中大家找到body{background:#009B97;text-align:center;}将其中的#009B97这个色值修改为#669900看一下,当然这个你可以修改为任意的值了!如果你“哇”了,说明你感觉到效果还不错,那继续吧!如果你使用的是dreamweaver这个软件,那么按一下ctrl+F吧!将样式中的所有#009B97替换为你想定义的那个色值,就此一步,你的论坛可就有了小小的模样了。用此方法将float.css中的那个值也替换一下吧。你再把自己的logo一换,这个不用讲,就相当简单了,只要把文件夹images中的logo图片一替换就行了。就这么简单,你可以先坐下来欣赏你的初作吧!

      嘿,你现在是不是有了一点点成就感,就这么简单啊!当然了,我们的需求可能更复杂哟!在这里就官网提供的discuz7这个模板的制作过程来做个说明吧!先看看设计稿的模样,如下图



这个不管你是用什么软件设计的,总要有一个设计稿。这样才好下手,说下手就下手,咱们开始一步一步的来!学习这个过程,大家也可以对照着官方的discuz7模板来进行学习

1.        首页就定义一下body的背景,大家细看一下吧,将你下载的model中body{background:#009B97;text-align:center;}进行修改即可,同上一样,也是只修改那个#009B97即可,因为有一个背景图哟,所以修改为#0D2345 url(images/bodybg.gif) repeat-x 0 120px; 这个bodybg.gif就是设计稿中头部下方那个渐变了,切出来输出网页格式的图不用讲了吧!为什么是120px,这个自然是样式中对背景的位置定义了,看没?这一步如果你跟着做完成的话,就会发现大的背景变化了

2.        Body定义完了,那就头部吧!当然同理一看,也是一个背景图啊!那就找一下头部定义吧!#header这个很明确就是定义头部,找不到就按ctrl+F搜索了。找到它后,你发现在咱们model中有定义哟!background:#FFF,这就好了,将其修改为#00A2D2 url(images/headbg.gif)  repeat-x 50% 100%;  这几个定义,如果不明确,就稍看一下css样式学习文档吧!同道理,将上面子导航栏的背景也修改一下吧!

3.        主导航的标签效果那,想必不难做了,大家可以稍分析一下官方样式定义代码吧!

4.        还有一步很重要wrap,论坛中有不少人特别问,论坛的宽窄如果定义啊!那就是它了,看到没,看不到搜过一下,它里面定义有一个width:95%哟,说到这了,那就改这个值就行了,同时,还有一个ad_text也有一个宽度要修改一下哟!随你便了,愿意怎么修就怎么修

5.        进行完以上几步,大概成形了哟,接来就需要你修改一下细节的东西了,象链接的颜色等,a{text-decoration:none; color:#000;}   a:hover{text-decoration:underline;} 当然还得替换一下#009B97将它修改为与整体色调一致的

6.        当然论坛部分定义完了,还有聚合页面和空间及相册部分,这个不做主体说明,大家制作过程可以摸索一下。如果你有css功底,应该不成问题!

      以上几点只是一个模板修改的几个小的入手点,不过方式都如出此辙,大家在具体的制作过程中,可以随便发挥,要敢于试哟!大家在制作过程中如果对模板机制有什么好的建议,也可以到官方给fanzjgw发信息哟!

Discuz!NT3.1模板制作说明

Discuz!NT3.1模板制作说明.zip(90.1 KB)

model

model.zip(234 KB)

28

满意

不满意

本篇文章用到的Tags : Discuz 模板 制作

没找到您想要的答案吗?建议您到我们的讨论区发帖寻求大家和 Comsenz 工作人员的帮助。