discuz 风格模板制作
一、Discuz!模板风格制作:
1、在Photoshop中制作风格页面并切图保存;
2、制作html文档,css调整;
在制作html文件之前,您必须熟悉Discuz ! 模板的元素和css。需要注意的是,在定制您的css的时候建议您参考Discuz!模板文件css.htm来制作,这样您所制作出来的模板文件就可以方便的在Discuz !管理后台中作调整。
制作一套新的模板,其实并不需要将上面所有模板文件重新制作,只需要将几个必要的文件进行替换成您所制作的风格模板文件即可(当然,如果您觉得必要,可以将每个模板文件根据您的设计风格进行调整,只要保证模板文件中的程序结构完整),以下几个文件是一个论坛中最常用到的几个页面,对一套风格模板影响相对较大,详细如下:
css.htm --- CSS样式
header.htm --- 论坛头部
footer.htm --- 论坛底部
index.htm --- 论坛主页
viewthread.htm --- 阅读主题
forumdisplay.htm --- 论坛主题列表
forumdisplay_subforum.htm --- 子论坛列表
当然刚开始接触模板制作也可以只修改其中的一部分,只要将css.htm,header.htm,footer.htm这三个文件按照您的风格制作出来就可以让模板风格作变换,其他文件也可以根据您对风格的要求进行调整。
本次演示就是只将css.htm,header.htm,footer.htm这三个文件按照演示的风格制作出来来达到模板风格的改变的。
Discuz!模板文件的简单讲解:
刚接触discuz!模板文件,您会发现在这些htm文件中包含着很多像:
<!--{if $discuz_uid}-->……<!--{else}-->……<!--{/if}-->
{template css}
<!--{loop $plugins['links'] $plugin}-->……<!--{/loop}-->
$charset
{lang memberlist}
{MAINTABLECOLOR}
这样6类在一般htm文件中不常见的语句和变量,这些语句是Discuz!模版中的特有语句,具体说明如下:
<!--{if ×××}-->……<!--{else}-->……<!--{/if}-->
这类语句并非普通HTML中的注释语句,而是Discuz!特有的模板判断语法,就好比php或者其他语法中的 if,else,then等等。 通过这些语法,来控制一些功能的显示控制等效果。
{template ×××}
这类语句是模板调用语句,比如在某个模板中,想调用另一个模板中的内容,可以通过上面的语句对其他模板文件进行调用,比如在header.htm模板文件中的{template css},将css.htm模板文件调入。index.htm模板文件中最顶有 {template header},最底有 {template footer},分别调入的是header.htm和footer.htm两个模板文件,这样根据页面结构和功能的细分,使Discuz!模板的设计制作更为灵活,方便。
<!--{loop ×××}-->……<!--{/loop}-->
这类语句为循环语句,循环执行内部程序,直到数据输出完毕结束。通过这些语句,能够达到把同一系列的资料进行循环显示效果,常见的如论坛列表、帖子列表等。
$×××
这样以$开头的是Discuz! 参数和变量,一般情况下不建议修改。另外还有一些是Discuz! 固定参数,如:
$seohead 后台设置的头部信息
$charset —— config.inc.php中设置语言字符集,必不可少,不能删除!
$extrahead —— 控制论坛自动跳转参数,必不可少,不能删除!
{ updatesession();} —— 更新论坛 session 表的参数,必不可少,不能删除!
{ output();} —— 结束论坛输出,必不可少,不能删除!
以上的参数以Discuz! 4.0为准,这些参数会因应不同版本而有所不同!
还有一些 $××× 的也是一些参数如非插件作者或程序开发请勿乱修改!
{lang ×××}
这类以lang开头的是Discuz!语言包调用语句,后面的变量可以在语言包文件中找到相对应的字段,在模板中所调用的大部分都是 templates.lang.php 文件中的,如下,左侧为模版文件中调用语句,右侧为语言包中对应字段:(用户可以根据自己的需求对语言包进行修改)
{lang pm} 'pm' => '短消息'
{lang admincp} 'admincp' => '系统设置'
{lang memberlist} 'memberlist' => '会员'
{×××}
{IMGDIR}这类括弧内大写的变量是Discuz!风格配色方案中的参数,可根据您的需要通过后台定义新的风格变量。
3、通过Discuz!管理后台新增模板:
图片和html文档制作好,css调整好以后我们就可以通过管理后台来定义新的风格了。
首先,将图片和htm模板文件上传到相应的目录,现在制作这套模板叫navyblue,那么我们就在images目录和
templates目录下分别建立一个navyblue目录。
images/navyblue文件夹用于存放这套模板的图片,把在第1步中切好的所有图片保存到这个文件夹中。
templates/navyblue文件夹用于存放这套模板的htm文件,先从templates/default/目录中复制css_append.htm、index.htm这三个文件,到这个文件夹中。
接下来的工作都要在论坛后台设置中来完成
(1)进入论坛点击 “系统设置 ——> 界面风格 ——> 模板编辑”,在新增模板后填入模板名称,模板文件所在 目录,板权信息然后提交即可!
(2)在“界面风格 ——>界面风格” 中,在新增界面风格后填入方案名称然后提交即可!
(3)提交方案名称后,您就可以在界面风格中看到您所定义的新的风格方案。
到此,一套新的风格模板方案就添加到模板库里了,但还不是我们需要的最终效果,接下来要对模板文件 继续进行调整,以达到模板的最终效果。
(4)点击 [详情] 后就可以进入该模板的风格配色方案的编辑页面,您会发现,页面中的文本框内大部分都是空 白的,这是因为我们之前添加到 templates/navyblue 中的 css.htm 是默认模板,需要根据我们所设计的风 格把各个对应参数填入相应位置就可以了。
(5)在制作界面方案 navy blue 的时候作者自定义了几个 css,主要是用来控制用登陆信息部分的文字颜色、 背景,为了方便调整,将这些颜色和背景图片通过后台定义成变量。({HMIMG1}-menu_left.gif, {HMIMG2}-menu_right.gif,hmtextcolor-#FFFFFF)
注意:Discuz!管理后台的编辑界面方案功能,可以很方便的定义新的变量,用来控制设计者所定义的css式样 表,所以在写css的时候如果您需要按照您的需求来制作新的css,在后台中将您所定义的css中的颜色、 字体、字号、等参数值(宽度、高度、百分比等)定义成新的变量,这样在制作风格模板的时候方便调整
(6)需要注意的是,在 css.htm 模板文件中,需要把右侧的替换内容用这些自定义变量名来替代,这些变量才 可以起到作用。我们打开“界面风格 ——> 模板编辑”,点击 navyblue 模板后面的 [详情] ,进入模板维护界 面。
(7)您会看到,这这个页面中包含 css,footer,header 三个模板文件,这三个文件是我们之前通过 default 目 录复制过来的默认模板文件。我们要将这些文件的内容替换成我们自己的模板文件内容才可以,点击 css 后的 [编辑] 进入模板文件编辑页面,将自己定义的 css 粘贴到默认 css 模板文件。
(8)接下来,我们将自定义 css 中的颜色值和背景图片用之前在风格配色方案定义的变量替换,提交后,这样 这些变量就可以通过后台来调整了。
(9)最后一步,因为这套模板 footer 部分未作调整,只要将 header 部分替换成自己制作的内容就可以了,点 击 header 后的 [编辑] 进入模板文件编辑页面,将自己制作好的 header.htm 代码替换原始 header.htm 代码 ,提交。
(10)进入“系统设置 ——> Discuz!工具->更新缓存”,首页->控制面板->编辑个人资料-论坛个性化设置
->界面风格:选择您制作好的风格即可。
自此,整套模板的制作到此结束。如果您的编码能力比较强,模板文件这部分完全可以在 Discuz! 后台直接进行编辑,不过还是建议先在一些工具软件里编辑后检验一下,这样能避免一些不必要的错误。
二、风格的导出及安装方法:
1、风格的导出:
以上面制作好的模板风格的导出为例:
首页,“系统设置 ——> 界面风格“:点击“导出”栏下的[下载],将导出的文件保存到命名为“showstyle”的文件夹目录下;
然后,将.. emplates下的navyblue目录下的文件拷贝到“showstyle”目录下的templates文件夹下;
其次,将..images下的navyblue目录下的文件拷贝到“showstyle”目录下的images文件夹下;
最后,将命名为“showstyle”的风格打包即可发布共享了。
(也可重新定义风格名称,此处为了方便区分将风格名称命名为showstyle)
2、风格的安装:(也是以上面导出的风格为例做一下演示)
(1)打开 discuz_style_navyblue.txt 文件,把里面所有内容复制出来,
到论坛“系统设置 -> 界面风格 -> 界面风格”内,在 “导入界面方案”内粘帖上复制出来的内容,然后点 “提交”;
(2)把风格包中的 images 内的 navyblue 目录上传到论坛目录下 images 目录内;
(3)把风格包中的 templates 内的 navyblue 目录上传并覆盖到论坛目录下 templates 目录内的 navyblue;
(4)到论坛“系统设置 -> Discuz!工具 -> 更新缓存”;
(5)首页->控制面板->编辑个人资料-论坛个性化设置->界面风格:选择您制作好的风格即可。
discuz 风格模板制作相关推荐
- discuz X2模板制作方法。
1. 通过网站后台,新建一套风格模板并导入替换"默认模板"(自己认为:这样比修改原来的默认页面更简单,原有页面比较多,部分功能短时间还不大清楚): 2. 根据页面内容的需要,编 ...
- Discuz的模板制作与源代码分析
许多使用discuz的人都会自然的想到论坛的风格.样式和模板,如何修改它,如何让它符合心中的要求,相信大家只要对discuz的模板源代码进行钻研的话,那就肯定能够自己独立修改,并且达到自己想要的风格和 ...
- Discuz3.3精仿小米风格整站模板制作——1、新建模板方案
术语说明: 模板--模板是一堆按照规定命名方式的html文件,用于指定整个论坛不同页面的外观. 标签--标签和模板共同作用以实现论坛换肤功能,其中标签主要控制页面显示什么数据,显示多少条等. 风格-- ...
- 怎么安装php模板,PHPWind八风格模板的安装及制作教程
PHPWind八风格模板的安装及制作教程 PHPWind 8风格模板的安装及制作教程 一.PHPWind风格模板的安装: 1.下载自己喜欢的PHPWind模板,由于PHPWind使用者众多,所以为了符 ...
- phpwind9.0 read.php 修改,phpwind9.0模板制作教程——制作论坛风格
由于论坛模板机制和门户等模板机制不同,所以今天我就先重点讲讲论坛模板制作的大概过程. 一.先来熟悉下phpwind9.0的论坛模板机制. 其实phpwind9.0的模板机制和discuzx2.5差不多 ...
- php168模板制作教程,PHP168风格模板安装教程
PHP168风格模板安装教程: 将解压文件上传到相应的目录底下,然后在后台点系统操作 点击"网站核心设置" 在网站默认风格中选择是加的相应名称刷新首页即可. PHP168模板常见问 ...
- Discuz! X2.5 添加风格模板
首先,我们直接用默认模板复制一个副本出来,修改名字,然后进入后台-->界面-->风格管理.这时,你会看到我们新增的风格模板. 这时候,你点击"安装",提示界面方案安装完 ...
- php模板初级教程,风格模板初级不完全修改教程
风格模板初级不完全修改教程 更新时间:2006年10月09日 00:00:00 作者: 就自己的一点点经验,希望能给初接触模版修改的朋友有个参考. 关于模版修改, 引用星星签名里的一句话" ...
- 个人认为最佳模板制作方案
原文地址: http://www.discuz.net/forum.php?mod=viewthread&tid=2468557 第一步:复制template里面的default,然后改名 ...
- Discuz!NT 模板机制分析(转)
作为产品中的一大特色,模板机制一经推出,就引来了大家特别是站长们的关注.但它所饱受的风风 雨雨也成了那时不少人关注的话题.而今天本人将结合在产品组中的开发经历,介绍一下模板机制在设计 使用时的一些体会 ...
最新文章
- explain都不懂,还好意思说会SQL调优?
- 【Github上有趣的项目】TensorKart 自动驾驶马里奥赛车(玩不了)
- 客户端显示服务器图片不显示,客户端请求服务器图片不显示
- kibana设置中文
- SQLServer2008设置开启INTERNET远程连接
- JavaScript回顾与学习——运算符
- Android 分享两个你学习android 平台开发必须碰到的几个知识点的组件【天气预报、日期】View 组件...
- java excel 2007兼容包_Microsoft Office 2007兼容包
- linux全自动备份网站到百度云盘,Linux定时备份数据到百度云盘
- Arduino Nano与SIM800C 通信
- 用HTML绘制三线表,R语言-临床三线表
- 地理和遥感数据获取方法
- virtualbox中给redhat安装增强功能
- 数据可视化--实验三:空间可视化
- java压缩文件解压失败_java安装 解压缩核心文件失败
- Pr:自动添加字幕​
- 分享99个PHP源码,总有一款适合您
- 汉字转换拼音 java_java 汉字转换拼音
- 通过 Terracotta实现基于Tomcat的Web应用集群
- pytest_bdd.exceptions.FeatureError: Step definition outside of a Scenario or a Background.
热门文章
- scratch成绩查询 电子学会图形化编程scratch等级考试四级真题和答案解析2022年6月
- 基于IS-LM模型的宏观经济政策成效分析:弹性视角
- Python Post提交简单案例,文本内容在线语音合成
- 计算机学院教学质量改进的制度,计算机科学与技术学院教学管理文件规章制度汇编.doc...
- SAP基本计量单位更改
- 程序员的梗_你知道程序员是什么人?1024程序员节是什么梗吗?
- python爬虫|post的响应,利用python实现有道翻译在线翻译
- chrome下载速度慢,手把手教学
- 删除电脑桌面的IE(Internet Explorer)浏览器图标
- redis数据类型命令