如何为discuz 模板增加新的配色方案

在我的电影视频加强版模板（安装地址    https://addon.dismall.com/?@bpbank_spjq.template   ）和信息资讯门户模板（安装地址    https://addon.dismall.com/?@bpbank_bp.template  ）中均扩展了4-5种配色方案，方便站长选择，也方便网站用户切换自己喜欢的风格。

支持多风格切换的disucz 模板-电影视频加强版

那么如何再增加新的配色方案呢，毕竟你只提供恶4-5种，而且未必是我喜欢的。

有的站长提出这个问题，我在这里解答下，以我的电影视频加强版模板为例，其他的或者官方默认的原理相同。

首先要理解几个小问题

模板文件位置：

所有的模板文件夹都在网站根目录下的template文件夹里，一个模板一个文件夹，比如官方默认模板文件夹是default，我的电影视频加强版模板是bpbank_spjq，以下文件位置如未特别说明，均指在bpbank_spjq。

所有的模板都以一个文件夹的形式存放在网站根目录下的template文件夹中，比如官方默认模板所在的文件夹是default，我的电影视频模板所在的文件夹是bpbank_spjq

模板中包含的文件：

在我的bpbank_spjq文件夹里，包含有这几个文件夹，common（全局头部和尾部文件以及定义样式的css）、css（决定幻灯片效果的css文件）、forum（定义论坛主题列表和帖子内容页样式的模板）、images（使用到的图片）、js（实现幻灯效果的js文件）、member（会员登录样式）、style（实现扩展配色的文件）。

discuz 模板目录中文件夹的结构，以我的电影视频加强版discuz 模板为例

这里主要用到的是style文件夹，要实现扩展配色，必须要保证模板中有这个名称的文件夹。点开之后会发现，内有t1、t2、t3、t4、t5 共个文件夹，一个文件夹代表一种风格，每个文件夹里的文件和结构均相同，包括数量和名称，当然你可以使其不相同，但为了方便管理，最好保持一致。

style文件夹下要包含从t1到t任意数字的文件夹，每个文件夹定义一种扩展配色方案

以t1为例，打开t1文件夹，会看到一个style.css文件，要实现扩展配色，必须要保证每个t*文件夹里有且只能有一个style.css文件。还可以在这个文件夹里放置一些style.css里会用到的图片。

每个t数字文件夹必须要包含一个style.css的css文件，里面定义此种扩展配色的样式

打开style.css后的代码

打开style.css，结构如图，头部的这个是固定的，要保证每个t*文件里的均相同，你要修改的只是name名称，这也是你在后台-界面-风格管理-编辑后看到的扩展配色名称，下面的#色值是这种配色色值，最好同你的扩展配色保持一致，这不仅是你在后台扩展配色中看到的配色色块，也是网站用户在前台切换配色时看到的切换色块。

头部配色方案名称和标识色块定义

/* [name]绿[/name] [iconbgcolor]#038934[/iconbgcolor] Powered by Discuz! X */

之下就是专为t1配色实现的css效果，比如原本导航#nv背景色是蓝色#0000ff，我想让t1扩展配色中使其变成红色，那么只需要在这里加行css代码： #nv{background:#ff0000;}就可以了，它会覆盖默认的导航背景色，因为他的优先级更高。

我在这个文件里定义的样式解释如下，你可以根据需要修改

底部定义扩展配色样式

/* 底部 样式1 */

#nv, #ft { background: #038934 none; color: #fff; }
/* #038934是导航条以及最底部的背景色，#fff是相应背景色所在区域大的文字颜色 */


#ft a { color: #fff; }
/*底部区域的链接的颜色*/


/* 导航nv样式1 */

#nv li.a { background: #1D9549 none; }
/* 当停留在导航上某一项时的背景颜色，比如当前在门户首页，这里就是定义导航上门户字样所在位置的背景颜色，下面的这条代码是定义门户字样的颜色 */
#nv li.a a { color: #ffee00; }  


/* 论坛页之下的3：1框架标题的样式 1 */

body#nv_forum .frame-3-1-l .frame-tab .tab-title span.titletext { color: #026890; }
/*定义论坛页导入的diy框架中，乐生活、悦专栏等标题的颜色 */

body#nv_forum .frame-3-1-l .frame-tab .tab-title .tb .a a { background: #E8E8E9; color: #37AB4D; }
/*定义当鼠标移动到上一条所说的标题上时的背景色#E8E8E9,以及文字颜色#37AB4D*/

body#nv_forum .frame-3-1-r .block .blocktitle span.titletext { color: #026890; }
/* 同样是定义论坛页导入的diy框架。右侧焦点特惠等处的标题文字颜色 */



/* 门户导入 右上角的色块导航区域 */

.kuaijie div.z a { background: #038934; color: #fff; }
/* 定义门户页导入的diy框架的右上角部分的色块，左侧的背景颜色#038934和文字颜色#fff，也就是寻找团队处的 */

.kuaijie div.y a { background: #FEB009; color: #fff; }
/* 定义门户页导入的diy框架的右上角部分的色块，左侧的背景颜色#038934和文字颜色#fff，也就是寻找赞助处的 */

.kuaijie div a:hover { background: #898989; }
/* 定义门户页导入的diy框架的右上角部分的色块，当鼠标移动上去时的背景颜色，寻找团队和寻找赞助 */


然后如何开启扩展配色？

到网站后台-界面-风格管理，找到需要开启扩展配色的模板，点击编辑， 进入配置界面，选中需要开启的扩展配色，并选择一种默认扩展色

登录网站后台-界面-风格管理，找到需要开启的风格，点击“编辑”，选中扩展配色方案，并选择一种默认方案，然后提交，在这里建议将你默认扩展配色方案中的代码复制一份到extended_common.css中，防止没有启用扩展配色方案时显示方面的错误。

演示站地址

电影视频加强版模板 http://sp.wanglu123.com

信息资讯门户模板  http://bp.wanglu123.com

等X3.0版本的风格

我的x3.0已经提交审核了，官方太慢了，都两天了还没审核

没看懂你的意思。