Discuz中DIY模板，怎么样能做出这个效果？

发布网友发布时间：2022-04-21 18:45

我来回答

共3个回答

热心网友时间：2023-09-02 05:27

discuz 添加自定义模板的具体操作步骤如下：

我们需要准备的材料有：电脑、

1、首先我们先将这个模块添加好，点击“编辑”选项中“数据”。

2、然后我们在该页面中点击“模块模板”选项，然后把<link rel="stylesheet" type="text/css" href="文件夹/***.css" />加到最前方。

3、之后我们在该页面中添加代码字符串后，在css自定义样式中编写所需的效果代码即可。

热心网友时间：2023-09-02 05:27

Discuz!X3是Discuz!建站程序系列的最新版本，提供了易于DIY的环境，很多新人喜欢问：我看见了那么多好看的模版，但是不符合我当前网站的需求，如何自己去DIY？

当然他们肯定去过官方论坛找教程，去看了那么多文字以后依旧不知道如何去编辑。其实最快开始DIY模版的道路是下载一个符合你心目中要求的框架的模版。例如我喜欢PHPWIND那种导航条置顶的风格，我就去下载了一个导航条置顶的模版，在这基础之上去DIY会相对容易一点。

首先我们需要了解的不是怎样开始DIY，而是需要知道，这页面是属于HTML代码制作的，HTML是一种标记语言，这就意味着你想加入什么功能的时候就要去搜索相关的功能标记。要了解HTML是如何运作的，是如何展现样式的，我们这里可以提供一个最基本的DIV代码。

<div id="headerp" class="cssheader" style="background:#ccc">headerpic</div>

这个div会显示headerpic这几个字，这个div的标识符是headerp，其他代码和程序可以通过这个表示符来访问这个div；这个div引用了cssheader这个css样式，并且除非cssheader里面相关样式(当前相关样式:background)后面加上了!important重要标记，headerp这个div都会显示background(背景)为色板十六进制代码ccc的颜色(灰色)。

这里强调一下!important重要标记，在Discuz!里面，有很多运用到!important标记的地方。其中最常用的地方就是DIY模块，在DIY模块里面设定的边距等等数据会被加上!important标记，出现这样标记的时候除非有比这个!important更高级的!important声明，否则你设定的其他同样的样式都会被这!important前面的语句盖住。例:

<div id="headerp" class="cssheader" style="background:#ccc">headerpic</div>

.cssheader{ background:#aaa !important;}
#headerp{ background:#bbb;}

在这个案例中，由于css样式.cssheader被添加了!important标记，所以即使element.style(background:#ccc)比.cssheader在样式优先顺序里面更高级，background属性也会使用.cssheader里面加了!important的数据。

记住了这些以后让我们来真正去DIY属于自己的模版吧。

Discuz!X的模版位于根目录/template 文件夹里面，在这里面每一个文件夹都会被识别成一个新模版。如果你有想要安装的模版，只需要把模版的整个文件夹复制到这个目录然后进入后台-界面-风格设置里面找到对应的模版然后安装。安装好以后勾选为默认模版以后提交即可。创建模版的时候我们需要把default(默认模版)文件夹里面的discuz_style_default.xml复制到你的模版目录/discuz_style_你的模版名.xml。然后安装官方的模版xml去修改里面的内容。

<?xml version="1.0" encoding="ISO-8859-1"?>
<root>
<item id="Title"><![CDATA[Discuz! Style]]></item>
<item id="Data">
  <item id="name"><![CDATA[默认风格]]></item>
  <item id="templateid"><![CDATA[1]]></item>
  <item id="tplname"><![CDATA[默认模板套系]]></item>
  <item id="directory"><![CDATA[./template/default]]></item>
  <item id="copyright"><![CDATA[康盛创想（北京）科技有限公司]]></item>
  <item id="style">
   <item id="smfont"><![CDATA[Arial]]></item>
   <item id="threadtitlefontsize"><![CDATA[14px]]></item>
   <item id="threadtitlefont"><![CDATA[Tahoma,'Microsoft Yahei','Simsun']]></item>
   <item id="smfontsize"><![CDATA[0.83em]]></item>
   <item id="tabletext"><![CDATA[#444]]></item>
   <item id="midtext"><![CDATA[#666]]></item>
   <item id="lighttext"><![CDATA[#999]]></item>
   <item id="link"><![CDATA[#333]]></item>
   <item id="highlightlink"><![CDATA[#369]]></item>
   <item id="noticetext"><![CDATA[#F26C4F]]></item>
   <item id="bgcolor"><![CDATA[#FFF background.png repeat-x 0 0]]></item>
   <item id="msgfontsize"><![CDATA[14px]]></item>
   <item id="sidebgcolor"><![CDATA[ vlineb.png repeat-y 0 0]]></item>
   <item id="headerborder"><![CDATA[0]]></item>
   <item id="headerbgcolor"><![CDATA[]]></item>
   <item id="inputborderdarkcolor"><![CDATA[#848484]]></item>
   <item id="stypeid"><![CDATA[1]]></item>
   <item id="inputbg"><![CDATA[#FFF]]></item>
   <item id="commonborder"><![CDATA[#CDCDCD]]></item>
   <item id="commonbg"><![CDATA[#F2F2F2]]></item>
   <item id="specialborder"><![CDATA[#C2D5E3]]></item>
   <item id="specialbg"><![CDATA[#E5EDF2]]></item>
   <item id="dropmenuborder"><![CDATA[#DDD]]></item>
   <item id="floatmaskbgcolor"><![CDATA[#000]]></item>
   <item id="dropmenubgcolor"><![CDATA[#FEFEFE]]></item>
   <item id="floatbgcolor"><![CDATA[#FFF]]></item>
   <item id="lightlink"><![CDATA[#FFF]]></item>
   <item id="menuhoverbgcolor"><![CDATA[#005AB4 nv_a.png no-repeat 50% -33px]]></item>
   <item id="titlebgcolor"><![CDATA[#E5EDF2 titlebg.png repeat-x 0 0]]></item>
   <item id="fontsize"><![CDATA[12px/1.5]]></item>
   <item id="font"><![CDATA[Tahoma,'Microsoft Yahei','Simsun']]></item>
   <item id="styleimgdir"><![CDATA[]]></item>
   <item id="imgdir"><![CDATA[]]></item>
   <item id="boardimg"><![CDATA[logo.png]]></item>
   <item id="available"><![CDATA[]]></item>
   <item id="headertext"><![CDATA[#444]]></item>
   <item id="footertext"><![CDATA[#666]]></item>
   <item id="menubgcolor"><![CDATA[#2B7ACD nv.png no-repeat 0 0]]></item>
   <item id="menutext"><![CDATA[#FFF]]></item>
   <item id="menuhovertext"><![CDATA[#FFF]]></item>
   <item id="wrapbg"><![CDATA[#FFF]]></item>
   <item id="wrapbordercolor"><![CDATA[#CCC]]></item>
   <item id="contentwidth"><![CDATA[630px]]></item>
   <item id="contentseparate"><![CDATA[#C2D5E3]]></item>
   <item id="inputborder"><![CDATA[#E0E0E0]]></item>
  </item>
  <item id="version"><![CDATA[X3.1]]></item>
</item>
</root>

需要注意的是这里的Title值不能改，必须保持原样才能够被安装和运行。version代表你这个模版能适用的Discuz!版本。可以用逗号分隔，例:

templateid是模版的标识符，这个如果是本地模版的话直接删掉这行即可。不然会识别错误。如果想自定义参数必须在style下面添加行。例如:

Discuz!的这个自定义的参数非常好用，在之后的内容里面会被提及。

需要导入自定义模版的时候只需要在后台的界面-风格选项里面上面有个导入标签，点入以后会提示你一步一步导入你已经上传的模版。你也可以直接在对应的模版设置里面修改好参数然后到模版列表页导出你自定义好的模版XML文件。

所谓制作模版就是复制官方文件到自己的模版文件夹里面然后加以修改。

Discuz!额外提供了一些便利设置方便我们设置CSS样式，那就是extend_。我们可以用添加这个

前缀的CSS来达到不替换原有CSS文件的情况下追加或者覆盖原CSS内容。添加的位置就是根目录/template/你的模版文件夹/common/extend_common.css。

要注意的是mole.css里面的注释能起到划分区域的效果，优先级比extend_common.css还要高，但是common.css里面的!important依旧优先级比没有!important的mole.css的对应内容要高。例：

/** forum::viewthread,group::viewthread,forum::trade,forum::misc **/
.pls {background:rgba(0,0,0,0.03);border-right:none;width:200px;}
.ad .pls {background: #ffffff;}
.ad .plc {background: #ffffff;}
.pls .avatar img {width: 145px;padding:8px;background: #FFF;box-shadow:0px 0px 10px rgba(0,0,0,0.2);}
.pls .avatar {text-align:center;}
.pls p, .pls .pil, .pls .o {margin: 10px 20px;text-align: center;}
.dvbg {background: #fff;}
/** end **/

这些代码只在区域是forum::viewthread,group::viewthread,forum::trade和forum::misc生效。

你在模版文件会看见这样的注释代码，这代码实际上能调用模版文件夹里面的网页文件，要求后缀是.htm,例如我在forum文件夹里面添加了一个timeline.htm,那么就可以添加如下代码在响应位置调用timeline这个页面

我们现在掌握了这些知识以后可以考虑开始初步为网站添加点料了。

我们都很喜欢在网站上面添加一个大大的图片横幅，当然不一定是广告，也会喜欢添加一些美图。这个时候我们需要自己定义一个div，而不是用导航条上面那片区域的背景图片来解决。因为那会导致一些背景和插件色块重叠，看起来不美观。而且本例还要达成让用户来自定义这个背景图片的效果。

这里我们就得说一下Discuz!一个很有意思的地方。在模版里面，注释的内容并不是没用的，相反，注释的内容是可以被当作是PHP代码运行的。让用户自定义图片，我们就需要调用cookie.在Discuz!里面提供了一个调用COOKIE的一个标准方法：$_G['cookie']['cookiename']，这样我们就能调用名为cookiename的cookie了。具体实现代码如下(需要你有基本编程基础)：

在discuz.htm中第一段注释下面添加：

<div id="headerpic" class="headerpic" style="background:url($_G['cookie']['sttbg'])"></div>

<div id="headerpic" class="headerpic"></div>

然后去DIY添加静态模块，选择自定义HTML模版。添加如下代码：

<ul>
<li>
<span style="float:left">顶部图片链接</span>
<form name="setdiyoptbg" onsubmit="setcookie('sttbg',setdiyoptbg.sttbg.value,60*60*24*30*12);">
<input type="text" name="sttbg" />
<input type="submit" value="设置" />
</form>
</li>
</ul>

然后在common文件夹内新建extend_common.css，添加如下代码:

.headerpic {background:url({STYLEIMGDIR}/{HEADERBG}) no-repeat right 0 transparent;background-size:cover;background-position:0% 10%;height:220px;box-shadow:0 0 15px #8f8f8f;}

最后在模版设置里面的最下方添加自定义参数HEADERBG，内容指向想添加为默认头部图片的图片文件地址。图片文件前面添加了STYLEIMGDIR,这样就可以直接把图片放在模版文件夹里面的扩展图片文件夹里，不会搞乱格式。

至此，添加自定义内容的教程结束。

这个教学旨在去学会如何学习制作，而并不是学习制作方法，就是授人以鱼不如授人以渔的意思。概念会比较泛，必须要自己去动手做才能理解。

我们很多时候不止要添加元素，还需要修改已有的元素。这个时候我们就需要开发者模式了，不然很多时候你会一头雾水。这里推荐chrome和ie10以上的开发者模式，都支持页面编辑，即时让代码生效。满意了以后直接去修改对应文件即可，不过你要熟悉那部分的代码，就如同上一步添加模块一样你需要知道所有代码的意思，不然很可能导致失败效果。

这里特殊说一下plugin接口，当你在修改元素的时候，可能会导致一些插件无法被正常使用，这个时候你就需要尝试修改一下插件接口的位置。例如我把viewthread_node.htm里面的用户名移动到了头像下方，这个时候某插件的橙名功能失效了，联系插件作者无果以后决定自己亲手来修改模版以达到适应插件的效果。

网页跟我们平时所知道的顺序阅读载入方式有点不一样，网页的代码只会读取已经载入好的地方，所以接口不能放在程序代码前面，经过分析插件源文件，我把那个接口放在了修改了以后的用户名那段代码的后面，成功修复了橙名不显示的问题。代码如下

<div class="anc">
      <div class="authi"><a href="home.php?mod=space&uid=$post['authorid']" target="_blank" class="xw1"{if $post[groupcolor]} style="color: $post[groupcolor]"{/if}>$post[author]</a>$authorverifys</div>
     </div>

注意这里面最后的hook注释句，这就是Discuz插件的入口。通过移动它来调整插件载入的位置。

很多同学会问，我如果想要加入jQuery模块但是各种出错，到底应该怎么做？在header_common.htm找到common.js的载入行，在这之前载入你的jQuery文件，然后紧接着加上这段代码

var jQ = jQuery.noConflict();

然后把jQuery模块里面的$符号替换成jQ就大功告成了。不是所有的都要替换，只有在括号前的$才要替换。直接查找和替换搜 $( ，替换成 jQ( 即可。

至此，我独家的Discuz自定义模版教程编写完毕。以上内容均为原创纯手打，你在网络上无法找到第二份比这篇文章还要早的同内容文章，如有不懂请在评论里面追问。

热心网友时间：2023-09-02 05:28

WP网站模板开发，自定义导航菜单怎样添加？一招帮你搞定

discuz中diy怎么使用的

DiscuzX系统基本DIY流程:1以管理员身份登录网站前台，点击头部右上方“DIY”按钮，进入DIY模式：2进入DIY模式后，页面中内置的可DIY区域（模板标签中已经讲过）将会以灰蓝色显示：(1)首先，要选择合适的框架，点击框架来选择合适的框架拖拽到所需位置：(2)然后，点击模块，来选择合适的模块，拖拽到...

DIY怎么做出调用不同版块内容的效果

第一步，要在论坛后台设置好分类信息，这里就不详细讲解了，我的博客有一篇关于此操作的详细文章，不了解的朋友可以查看下(http://blog.sina.com.cn/s/blog_8c8fe0840100x76l.html);第二步，进入论坛管理中心，找到：论坛-分类信息-分类管理-企业招聘(这里我还是以招聘为例)-详细;找到你想要在DI...

discuz怎么使用模板discuz模板如何套用

找到Discuz模板后，点击安装应用程序(通常会有演示)。安装完成后，可以在界面风格管理中选择已安装的模板，选择一个新模板，点击提交(如果要删除模板，勾选卸载，然后点击提交)。另一种方法是下载模板文件(通常包含很多文件，找到xml文件，以discuz_style开头，在界面风格管理中导入后就可以使用了)。使用FTP...

discuz 怎么添加自定义模板

1、首先我们先将这个模块添加好，点击“编辑”选项中“数据”。2、然后我们在该页面中点击“模块模板”选项，然后把加到最前方。3、之后我们在该页面中添加代码字符串后，在css自定义样式中编写所需的效果代码即可。

DISCUZ门户DIY自定义模块怎么弄标题背景

如果你的div只有260X32是不可能把980X32的背景图片全部显示出来的，你说的设置X,Y是指设置背景图片的显示位置并不能解决你的问题，他只能设置背景图片显示哪一部分。写法：background:url(assets/images/folding-up.png) 10px 10px;解决办法一：在div里面写一个img标签把这个图片链接进来，可是对于你...

如何实现Discuz前台DIY功能自定义框架比例

1）复制第四行，粘贴（注意红线处数字要相同）2）直接在这个文件写CSS属性（当然你也可以整理一下放到Style.css文件里）3）现在打开论坛首页DIY，拖入一个100%框架会自动变为80 4 注意步骤：Discuz默认主页是forum.php。而上述操作事例在门户主页index.php上修改，所以要先在后台-界面增加门户页面导航...

discuz的diy样式怎么修改

开启diy，经过diy区域可见“编辑”点击打开，再选择“模块模板”打开，里面就是该diy区域的html代码，根据html调整css，也可自己写html和css。

Discuz DIY添加的模块里面的内容(文章之类的)如何添加呢?

自定义DIY模块的步骤：添加DIY框架---选择模块——如果想调用门户文章类的（比如文章、文章栏目、专题、频道等）就选择：”门户“，然后选择相应的内容即可。如图：如果是调用论坛版块、帖子、商品分类信息、活动等，就选择”论坛“模块。总之你可以一个个的尝试，但是前提是你想要调用的模块下必须有内容...

discuz 首页diy问题。

使用DIY里的tab框架比较容易，也快。（推荐这么做）或者tab选项卡效果写在模板里，每个选项内容里放个diy容器，这种虽然可以实现，但diy带来的冗余代码太多，而且并不能像DIY的tab框架那样使用模块标题作为tab选项。哦，对了，DIY的tab框架的每个选项是一个模块，添加模块拖到tab框架的标题栏那里。

discuz模板制作中常用代码大全

在进行Discuz模板制作时，常用代码是不可或缺的部分。本文汇总了在实践中频繁使用的Discuz模板制作实用代码，以帮助自学建站的学员高效运用Discuz代码。首先，判断管理员身份的代码至关重要。这能够区分管理员与普通用户，确保网站管理权限分配得当。其次，判断用户是否登录是任何网站都需实现的基础功能。通过编写...

ps怎么做出光线效果 ps怎么做出打光效果 ps怎么做出棱角的效果怎么删除ppt模板的动画效果 ppt对比效果怎么做 ae可以做出什么效果如何用ps做出金粉效果效果对比ppt模板 pr效果模板