当前位置：文档之家 › Discuz!X2模版教程

Discuz!X2模版教程

  • 格式：doc
  • 大小：25.50 KB
  • 文档页数：5

扩展模板创建 一、创建模板套系 1、首先进入后台 - 界面 - 模板管理，扩展制作模板时需要创建一个专属套系用来后期修改 2、基于“模板套系”可以扩展针对 ./template/default/ 目录中对的模板文件 3、创建套系的原则是不破坏原有模板基础上进行全新的扩展模板设计

实例 1.在站点根目录 ./template/中创建新的目录如" ./template/mytest" 2.在 mytest 目录中创建必要子目录与文件如： ./template/mytest/common/ ./template/mytext/common/extend_common.css ./template/mytext/common/extend_module.css 其中common目录为公共模板目录，其内部新建的extend_common.css、extend_module.css为扩展型CSS文件，它们可以

在./template/default/common/common.css的和module.css的基础上进行CSS代码的覆盖性扩展 如果需要替换论坛首页模板，可以新建 ./template/mytext/common/forum/discuz.htm，或复制./template/default中的对应文件放在 mytext 对应目

录，以在缓存生成时覆盖原有模板缓存，达到修改模板而不破坏原生模板的目的

二、后台风格管理 进入后台 - 界面 - 风格管理 “风格管理”可以对已有风格进行风格变量的编辑，也可以基于前面创建的“模板套系”来全新开辟新的风格

三、新建风格 后台风格管理中，可以通过新增和复制原有风格进行新建风格的操作 新建风格之后，需要编辑它，调整里面的“匹配模板”为上面创建的新套系即可

四、风格管理编辑页面中重点风格常量介绍 匹配模板：对应的模板套系 扩展配色：此风格基础上可用于用户切换配色方案的扩展，它对应 ./template/mytest/style/ 目录中的样式文件。全新创建时应

在./template/mytest/style/目录中建立如t1/style.css之后方能生效 默认配色：指定站点访问时，用户首先看到的配色方案 默认表情分类：对应后台 - 界面 - 表情管理中所启用的表情 界面基础图片目录：可用于更改模板图片目录，在CSS文件中使用{IMGDIR}的常量进行输出，在Discuz! X2版本之后的模板中需要使用$_G['style']

['imgdir'] 扩展图片目录：用来更改扩展图片目录，在CSS文件中使用{STYLEIMGDIR}的常量进行输出，在Discuz! X2版本之后的模板中需要使用$_G['style']

['styleimgdir'] 其他风格常量：以上没有提到风格常量，均可以在后台取得以花括号框选的常量用以在CSS文件中使用（X2以后的模板中均需要$_G['style']中对应的数

组键值），涉及到CSS样式的动态变更，可以在修改对应设置如：正常字体大小 {FONTSIZE}:12px/1.5，则直接修改程序运行中CSS缓存中的值 自定义模板变量 - 新增：可以根据扩展需求，针对个性化的CSS进行全局的定义

五、CSS部分 CSS缓存存放：./data/cache/目录中，以 “style_风格自增编号_应用入口关键字_所在页面的mod值.css”形式保存

自建新套系模板文件可以通过创建 ./template/mytest/common/extend_common.css 或 extend_module.css 进行CSS扩展

/** forum::index,forum::forumdisplay **/ .mycss {font: {FONTSIZE} {FONT};} /** end **/

1.上面的写法含义是：针对 forum 的 index 和 forumdisplay 追加一个自定义的CSS样式 "mycss" ，Discuz! 模板解析将会根据 forum::index 的关

键词将 mycss 分别追加在“./data/cache/style_2_forum_index.css”和“./data/cache/style_2_forum_forumdisplay.css”中(里面的数字2，根据

新增的风格编号而定) 2.这样的写法好处就是，不变更默认模板的情况下有效的扩展CSS，并可以很好的进行多站点移植

Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并： 1.template/default/*.css 文件 2.当默认模版是非默认模版时，template/模版目录/extend_*.css 文件 或 template/模版目录/*.css 3.当某插件启用时，source/plugin/插件目录/template/extend_*.css 文件 因此非默认模版目录中的 CSS 属性将继承默认模版中的 CSS 属性，插件目录中的 CSS 文件将继承前二者的 CSS 属性 CSS 自身的集成顺序为：当 CSS 属性名称相同是，CSS 文件中，写在后面的替换前面的代码

CSS书写规范 1.属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { width: 400px; height: 300px; }

2.属性的书写顺序： 1.针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:; 2.按照元素模型由外及内，由整体到细节书写，大致分为五组： 1.位置：position,left,right,float 2.盒模型属性：display,margin,padding,width,height 3.边框与背景：border,background 4.段落与文本：line-height,text-indent,font,color,text-decoration,... 5.其他属性：overflow,cursor,visibility,... 3.谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式

4.选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix

5.勿使用冗余低效的 CSS 写法，例如：ul li a span { ... } 6.慎用 !important 7.建议使用在 class/id 名称中的词语 1.表示状态：a->active 2.表示结构：h->header,c->content,f->footer 3.表示区域：mn->main,sd->side,nv-navigation,mu->menu 4.表示样式：l-list,tab,p_pop

常用CSS 左浮动、右浮动 .z { float: left; } .y { float: right; } 因为左右浮动造成的父级浮动溢出，及使用方法 .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

行内分割竖线 .pipe { margin: 0 5px; color: #CCC; }

文字字体大小 .xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; } .xs1 { font-size: 12px !important; } .xs2 { font-size: 14px !important; } .xs3 { font-size: 16px !important; }

灰色文字 .xg1, .xg1 a { color: {LIGHTTEXT} !important; } .xg1 .xi2 { color: {HIGHLIGHTLINK} !important; } .xg2 { color: {MIDTEXT}; }

高亮文字，1为橙色，2为蓝色 .xi1, .onerror { color: {NOTICETEXT}; } .xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }

文字粗体 .xw0 { font-weight: 400; } .xw1 { font-weight: 700; }

层下边线 .bbda { border-bottom: 1px dashed {COMMONBORDER}; } .bbs { border-bottom: 1px solid {COMMONBORDER} !important; }

去除边框 .bw0 { border: none !important; } .bw0_all, .bw0_all th, .bw0_all td { border: none !important; }

去除背景 .bg0_c { background-color: transparent !important; } .bg0_i { background-image: none !important; } .bg0_all { background: none !important; }

外边距样式 .mtn { margin-top: 5px !important; } .mbn { margin-bottom: 5px !important; } .mtm { margin-top: 10px !important; }

合集下载

discuz模板制作教程精品

discuz模板制作教程精品

一、如何在模块中增加“标题”及“更多”的链接如下图样式方法：通过框架或模块都可以实现上述样式，我们以框架为例，我们在DIY的时候选中要编辑的框架点击编辑如下图所示之后点击标题在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示，会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程” 改成“更多” ，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右”完成，这样框架就有了标题及更多，模块的方法同上二、DIY的模块中如何调整链接的颜色如下图样式方法：选中要修改的模块，点击编辑，选择数据如下图所示在弹出层中选择编辑如下图所示在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作完成三、如何在现有的模块中添加新的数据选中要添加数据的模块点击编辑--数据如下图所示在弹出的层中选择任意一条数据点击编辑如下图所示点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据如下图所示点击获取会填充模块内相应的数据字段（此处的数据字段会根据模块样式的不同有所变化，请注意）完成四、DIY时如何调用外部程序的数据当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示如上图所示选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进HTML代码框就可以了如下图所示完成五、首页多格或首页四格如何DIY出来我们以论坛首页为例（在任何页面都可以）来制作一个首页四格首先在论坛首页拖一个1:1的框架如下图所示接下来向已拖好的1-1框架的框架里左侧的1 里面拖入一个1:1的框架如下图所示接下来向右侧的1里面也拖入一个1:1的框架如下图所示接下来我们就可以通过拖拽模块到框架中去了此时我们可以去掉框架的标题，同时为每一个模块增加一个标题如下图所示你可以通过不同的模块样式或者CSS来美化这里完成六、如何修改整个模块的链接样式比如下图方法：选中要编辑的模块，点击编辑--样式进行修改如下图所示以上修改针对整个模块完成七、如何修改两个模块或两个框架之间的距离如下图样式选择要编辑的框架或者模块，点击编辑--样式选择外边距，勾选分别设置，在右边距中写入合适的数字就可以了例如10如下图所示完成后的效果如下图样式完成。

Discuz模板修改教程演示

Discuz模板修改教程演示

Discuz模板修改教程演示Discuz教程演示, Discuz模板修改近几天做了几套模板先将心的整理一下发给大家以供各位参考借鉴。

在做模板之前大家最好具备一些基本的网页制作方面的知识。

那么咱们先来看看如何制作一套简单的模板流程。

1、在Photoshop中制作风格页面并切图保存；2、制作html文档，css调整；在开始前，先了介绍一下discuz!的几个模板文件：3、index_header.htm--头部发帖按钮，和公告内容页。

4、footer.htm-- 页面底部5、viewthread.htm-- 查看帖子内容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）然后点击[编辑] 后就可以进入该模板的风格配色方案的编辑页面，此根据你的界面风格配色方案设置一下你的配色方案。

discuzx2.0(ucenter)和帝国cms、phpcms、ecshop整合

discuzx2.0(ucenter)和帝国cms、phpcms、ecshop整合

discuzx2.0（ucenter）和帝国cms、phpcms、ecshop整合.docx一、与帝国cms整合1、下载必要文件ucenter整合接口/OpenSource/2、上传整合接口：把下载的“upload”目录里的文件上传至帝国CMS的“e”目录里3、在discuzx2.0的ucenter后台里添加应用程序:discuzx2.0后台“ucenter”“应用管理”“添加新应用”4、设置参数后点击提交，然后返回应用列表就可以看到我们刚才增加的应用5、配置Ucenter整合接口的配置参数文件e/config.inc.php注意：数据库表前缀的写法数据库貌似要加“`”二、与phpcms v9整合1、在UCenter中添加“phpsso应用”2、配置phpssoPhpcms v9，“phpsso”——“系统设置”——“UCenter配置”媚博设置如下：3、查看通信状态Discuz!X2.0后台——“UCenter”——“应用管理”查看phpsso应用与UCenter通信是否成功。

如果通信失败，请检查各项参数配置是否正确。

4、修改Discuz!X2.0会员登录相关。

若不修改，在Phpcms v9登录后可以同步到DZX2.0，但是在DZX2.0登录却无法同步到Phpcms v9步骤如下：1、找到DZX2.0目录下template\default\member\login.htm，删除onsubmit="{if$this->setting['pwdsafety']}pwmd5('password3_$loginhash');{/if}pwdcle ar=1;ajaxpost('loginform_$loginhash','returnmessage_$loginhash', 'returnmessage_$loginhash','onerror');return false;"2、找到DZX2.0目录下template\default\member\login_s imple.htm，删除onsubmit="return lsSubmit();"3、找到DZX2.0目录下/source/function/function_message.php，查找$param['header']=true;替换为$param['header']=false;最好修改文件前先备份一下三、与ecshop整合1、会员管理——会员整合——安装ucenter按绿豆人提示设置后2、在ucenter里添加应用添加后效果图。

Discuz!美化模板系列教程--风格制作之二

Discuz!美化模板系列教程--风格制作之二

Discuz!美化模板系列教程--风格制作之二====================================================================== ============____________调用图片____________↓↑图片[images]--------[风格图片目录] ┠css_common.htm ［css文件］/↑模板--[TXT导入文件]----[主要是配色方案] ┠header.htm ［头部文件］\↙↓ ↘文件[templates]-----[风格模板目录]------┠discuz.htm ┠forumdisplay.htm ┠viewthread.htm↘↓ ↙┠footer.htm ［底部文件］↙↓ ↘首页二级列表页帖子内容页====================================================================== ============﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎选定图片目录←----------- | 文字背景色|/↑﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊界面风格----[所用风格]----详情--文字背景配色调﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎/ \ ↑ | 风格图片|后台取选定模板目录用﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊\ ↓ ↑ ﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎模板管理----[所用风格]----详情----[风格模板文件]--------→ |风格框架|﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊====================================================================== ============安装风格：1.上传风格包中的images文件 2.上传templates中的文件 3.后台导入TXT配色文本[风格图片有了] + [风格框架有了] + [风格配色有了]显示风格：后台--界面风格--设置--OK====================================================================== ============教你做第一个风格[其实这个在官方的使用手册里就有说过]﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹍| 编写语：做一个风格．如果说代码框架都是自己来写的话工作量是很大的．很没必要．当然一般特殊的风格除外|| 其实一般的风格都脱离不了ＤＺ的基本模式．所以我们完全可以在ＤＺ默认风格的基础上来改|﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊第一步：准备1.复制images/default目录同时把文件夹名字改为你想要的风格的名字[比如kaibbs]2.复制templates/default目录里的[css_commmon.htm header.htm footer.htm discuz.htm][如果用得到别的可以自己加]同时把文件夹名字改为你想要的风格的名字[比如kaibbs]3.把以上二个文件目录上传到相应该目录下．就和装风格一样4.在后台导入[]5.修改设置［a.导入后.风格管理处．新加一个菜单．名字写你想要的风格名字.如:开论坛.模板目录为templates/kaibbsb.界面风格－把名字改成你想要的名字.同时在详情里设置图片目录为images/kaibbs］6.设置显示你的风格.﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹍| 当然现在显示的出来的是默认风格.刚刚其它就是相当于装了一个风格而已．如果以前操作你都知道为什么了．说明你已经理|| 解了DZ风格的结构做上面6步主要是拿出单一风格来给自己改．想怎么改就怎么改．就是错了也没事都不会影响到别的风格. |﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊第二步：改配色[以下改动均在kaibbs风格上运作]介绍[见手册]================================== 等续篇===============================================================以下是本人的一点心得:案例分析====================================================================== ===========================偷风格工具====================================================================== ===========================。