编辑“BMForum 风格设计手册”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[BMForum|上一页]]</span>
<div style="clear:both;"></div>
== 风格准备 ==
=== 软件 ===
推荐使用以下软件作为修改和制作风格使用：

'''文本编辑器：'''[[EditPlus]] 2.12以上版本; [[EmEditor]] 4.0以上版本

'''图形处理软件：'''Adobe [[Photoshop]] 或者 Macromedia [[Fireworks]]

'''解压缩软件：'''[[Winrar]]最新版本

'''环境：'''为了避免每一次改动都要上传到[[服务器]]看效果，请在您的机器上建立本机测试PHP的环境！并在您的机器上装好BMB。本文均以本地环境为例。

=== 理念 ===
请先在脑海中设想一下新风格的样子，当然将其他论坛的风格转换过来是一个省事的方法，不过在转换之余也建议研究一下这些风格的配色和作图技巧等。也可以在图形处理软件上大概比划一下。网上也有不少配色辅助软件，找两个来玩玩也无妨。

=== 毅力 ===
作风格不难，不过很烦琐，要有决心有毅力。面对困难不要退缩，反复调试一定会有解决之道。
另外，能自己动手改风格的一定有了一些网页制作的基础知识，比如颜色代码、[[CSS]]、表格等概念应该是了解的。

== 制作流程 ==
=== 新建风格 ===
#首先，复制一份datafile/style/bsd01.bs5文件到同一个文件夹下，重命名其为你希望的文件名，如test.bs5。
#打开文本编辑器，这里以EditPlus（以下简称EP）为例。在EP内打开这个文件。确定你看到了这样的一句话：$skinrealname="默认主题"; ，如果看见的是乱码，请到菜单项 “文档-重新载入为-转换器”下，选择编码为UTF-8即可。
#编辑此文件，修改<br/>$skinrealname="默认主题";<br/>$styleidcode="test";<br/>$cachedstyle=1;<br/>这三行为你所需的内容。这三行的意义如下：<br/>$skinrealname代表风格名称，修改为所需的。例如这里我们改成<br/>$skinrealname="Test Style";<br/><br/>$styleidcode代表风格id。每个风格都要有一个独立的不同于其他风格的id，id名称任意。因此，请命名一个不可能与其他风格重复的，或者重复几率很小的id。例如，我们这里改成<br/>$styleidcode="mystylemadein20050522cannotbethesameasothers";<br/><br/>$cachedstyle是是否打开缓存，请在编辑风格时改为0，发布风格之前恢复为1。即<br/>$cachedstyle=0;<br/>按Ctrl+S保存你的文件。
#进入你论坛的管理中心，调整论坛数据->刷新风格缓存。为了便于测试，你可以暂时设置新风格为默认风格。
注意：如果打开风格[[缓存]]，则每次修改都需要“刷新风格缓存”，故请按下文的方法先关闭缓存，然后刷新风格列表，再开始修改风格。

接下来，就可以直接编辑 test.bs5文件来修改风格的一些配色了。每次改动保存后都可以通过刷新测试论坛体现出来。

=== 修改.bs5文件 ===
这是必要的制作过程。基本设置部分修改都在 .bs5 文件内可以直接完成。

==== 变量解释 ====
先解释一下每个变量的含意。双斜杠后是注释，之前为原来的内容。你也可以暂时忽略以下介绍的内容。

<? //PHP开始

$skinrealname="Test Style"; //风格名称

$styleidcode="test"; //风格id

$cachedstyle=0; //是否打开缓存。请在调试风格前关闭，设置为0；调试风格后，将其打开，设置为1。

$newpost='images/bsd01/forum_new.gif'; //某个板块有新帖时在首页的图示

$onlyread='images/bsd01/forum_lock.gif'; //某个板块为锁定和精华区时在首页的图示

$nonewpost='images/bsd01/forum.gif'; //某个板块无新帖时在首页的图示

$posticon='images/bsd01/minipost.gif'; //此处修改无效，保留

$pollicon='images/bsd01/minipoll.gif'; //此处修改无效，保留

$npost='images/bsd01/t_new.gif'; //此处修改无效，保留

$npollicon='images/bsd01/t_poll.gif'; //此处修改无效，保留

$replyicon='images/bsd01/t_reply.gif'; //此处修改无效，保留

$otherimages='images/bsd01'; //请修改为您存放自己这个风格的图片的文件夹名，如 

$otherimages='images/test';

$logofile='images/bsd01/logo.gif'; //此处修改无效，保留

$headername='header/bsd01header.php'; //指明header文件

$temfilename='bsd01'; //指明所用模板，菜鸟阶段无需修改

$footername='footer/bsd01footer.php'; //指定footer文件

$openstylereplace=1; //变量替换开关，务必设置为1

$notext_button=0; //是否不显示帖子内工具栏文字

$bm_skin[myvar]="自定义变量"; //在制作自己的通用模版时可以用到


==== 推荐制作流程 ====
这是本文重点了。你只需按照这里说的修改这个文件即可。

1) 准备图片，修改CSS
现在images/文件夹下新建一个空文件夹，这个文件夹将存放新风格用到的图片。例如，images/test。
为了避免遗漏图片，到images/bsd01/目录下，把里面的所有文件和子文件夹复制到 images/test 下。
到test.bs5文件中，把 $otherimages 的值设置正确，即
$otherimages='images/test';

然后，把这个文件里所有调用images/bsd01文件夹的地方都改为调用images/test。方法是 “搜索-替换”。查找所有 images/bsd01 ，替换为 images/test 。大功告成。

最后，按照 [[BMForum CSS结构说明|CSS结构说明]] 修改 images/test/styles.css中的内容。这是最重要的部分！

2）修改图片。
现在请修改所用的图片。你可以看看上面对 bs5 文件的说明，照着改一下要改的地方。
修改的方法，举一个例子：
 更改“分类名” “今日过生日的会员”  “论坛在线统计” 这些文字所在表格行的背景颜色/图片。
 一般说来，如果是仿照别的论坛的风格在做自己的风格，那么这些图片都是现成的。
 比如这个背景图，你可以在别的论坛的同样的位置上点击右键，
 保存背景图......记得放到images/test/下，比如这个图片叫catbg.gif。
 那么请在bs5文件内将$tile_back的值改掉，即
 $tile_back='images/test/catbg.gif';
 如果这里没有背景图片，只是背景颜色，那么这个变量请填入颜色的代码。例如是白色的，即
 $tile_back='FFFFFF';
 
 然后更改“分类名” “今日过生日的会员”  “论坛在线统计” 这些文字的颜色。以黑色为例，即
 $categoryfontcolor='000000';

请依次完成上面这个bs5文件里所有颜色和图片项的修改。
请修改css的部分设置，以达到更好的效果。

3) 更换图片
接下来，列出需要替换的images/test下的所有图片的含意。请将这些图片（全部或部分，看个人喜好和精力）替换成和新风格相配的。

首先，images/test 文件夹：
* 一般图片

announce.gif  公告帖子的图示  

email1.gif  email连接前的图标

fav_add1.gif  将本帖加入收藏夹的图标 

forum.gif  板块没有新帖时的图示

forum_lock.gif  板块锁定、只读时的图示  

forum_new.gif  板块有新帖时的图示

hand.gif  评负分时的图示

hand2.gif  评正分时的图示   

logo.gif  论坛页顶的logo 

menu.js  悬停鼠标菜单的js文件，勿改动 

menubg.gif  悬停鼠标菜单的背景图片

mpages.gif  帖子超过一页时的图标

nw.gif  “新窗口”  

openwindow.gif  开新窗口阅读的图标  

outerbg.gif  整个论坛的大背景图片

sms.js  短信提示框的js文件，勿改动 

sms.wav   短信提示音乐，我是删除了的

t_new.gif  发表新帖子

t_poll.gif  发表新投票

t_reply.gif  发表新回复 

w.gif  “原窗口”

xml_button.gif  rss连接的图标


文件夹 images/test/system

*等级图标组：

0stars.gif   

1stars.gif   

2stars.gif   

3stars.gif

4stars.gif 

5stars.gif 

6stars.gif  

7stars.gif  

8stars.gif 

9stars.gif

10stars.gif 

10starsa.gif

分别代表从0级到10级外加坛主的图示。

*条状图组成图示：

bar1.gif 

bar2.gif    

bar3.gif    

bar4.gif    

bar5.gif    

bar6.gif    

bar7.gif    

bar8.gif    

bar9.gif    

bar10.gif   

共十种颜色的条状图单元图片


*用户组图示：

messages0.gif   

messages1.gif   

messages2.gif   

messages3.gif  

messages4.gif   

messages5.gif   

messages6.gif   

messages7.gif   

messages8.gif  

messages9.gif  

messages10.gif    

messages12.gif   

代表了坛主、版主、游客等的小图示


*帖子状态图示

closesta.gif  关闭了的投票

holdtopic.gif  置顶帖子

mytopichot.gif  热门帖子（由当前用户发表的） 

mytopiclocked.gif  锁住的帖子（由当前用户发表的） 

mytopicnew.gif   新帖子（由当前用户发表的）

topichot.gif   热门帖子

topiclocked.gif   锁住的帖子  

topicnew.gif  新帖子

statistic.gif   开放的投票

jhinfo.gif  精华帖子小图示


*论坛功能图标
artmode.gif  文章模式阅读图标

batch.gif  批量引用图标 

fav_add1.gif  本帖加入收藏夹图标  

find.gif  搜索该用户的帖子的图标

newblue.gif

newgreen.gif  

newred.gif  以上三个为新帖子的特别new标识

refresh.gif  刷新页面的图标   

print.gif  可打印模式图标

gotop.gif  推荐给朋友的图标

offline.gif  用户不在线

online3.gif   用户在线 

repoter.gif   举报此帖

gb.gif   “发布分论坛公告”前的图标


*单帖内部图标
del.gif  删除此帖

email.gif   给作者发email

friend.gif   将作者加入我的好友

icq.gif    作者的[[ICQ]]

msn.gif     作者的[[MSN]]

message.gif   给作者发短信

home.gif   作者的主页

oicq.gif     作者的[[QQ]]

profile.gif    查看作者的档案

replynow.gif    回复此篇

ip.gif    作者ip

quote.gif     引用此篇

posttime.gif    发布于


*其他
mal.gif     男

fem.gif    女

signature.gif   签名与帖子内容区分线


4）修改header
基本至此已经修改大半了。现在需要修改header。这有点难度，因为需要一些基础的[[php]]知识。不过就算不具备也没关系，小心一些修改即可。

首先，复制一份 newtem/header/bsd01header.php 到newtem/header 文件夹，这里重命名为 newtem/header/testheader.php 。

修改 test.bs5 中，$headername 的值，即
$headername='header/testheader.php';

然后编辑newtem/header/testheader.php文件。注意，<?php 和 ?>包括起来的是php部分，不去动它，只修改这些标记以外的html部分。

<nowiki>将一下最关键的，修改logo的大小：
  <td width=382 height="70"><a href=index.php><img alt="Create The World With Creativity" border=0 src="<?php echo $otherimages;?>/logo.gif" width="382" height="70"></a></td>
以上代码，width="382" height="70" 这里改成所需的宽度和高度。
再比如，修改导航栏的位置为居中显示：

<table cellspacing=0 cellpadding=0 width=100%><tr><td align=right>

这里改成

<table cellspacing=0 cellpadding=0 width=100%><tr><td align=center>
总之，这个文件是很简单的htm组成的，你只需忽略那些php的部分，就可以修改出理想的头部文件了。</nowiki>

5）修改footer
首先，复制一份 newtem/footer/bsd01footer.php 到footer 文件夹，这里我们重命名为 newtem/footer/testfooter.php 。

修改 test.bs5 中，$footername 的值，即
$footername='footer/testfooter.php';

<nowiki>然后编辑newtem/footer/testfooter.php文件。你可以在这里加上你的名字，替换本来的默认风格的制作者。注意，务必保留
Powered by<a href="http://www.bmforum.com/"><?php echo $verandproname;?></a>
否则会引起版权问题。</nowiki>

6）结束制作
至此风格已经做完了。你现在可以看看整体的效果。并且，如果你愿意，可以将风格打包提供给别的用户下载。
打包的结构参考如下：

 teststylepatch  <dir>
  │-- datafile  <dir>
        │-- style  <dir>
              │-- test.bs5
  │-- images  <dir>
        │-- test  <dir>
              │-- system
  │-- newtem <dir>
        │-- header  <dir>
             │-- testheader.php
        │-- footer  <dir>
             │-- testfooter.php
  │-- readme.txt

== 后续 ==
写完以后，发现可能有些地方还是没有详细说明，但是大致上这些参数和图片的分解已经可以满足基本风格制作的需要了。对于更希望进一步美化论坛的高手，请注意下列内容：

1）您可以修改模板文件，它们都是htm文件。您可以将 newtem/bsd01 文件夹复制一份，命名为 newtem/test ，然后在 test.bs5 里修改 $temfilename 的值，如

$temfilename='test';

2）由于 .bs5 文件可下载，因此如果您不希望大作被轻易下载，请注意 skinid 和skinname 的值不要一样，且不要用容易被猜出的skinname。

== 提醒 ==
修改 BMForum 的文件，切勿使用记事本、UE等兼容[[UTF-8]]较差的程序！

==相关条目==
*[[Discuz]]
*[[phpBB]]
*[[PHPWind]]

==参考来源==
*[http://wiki.bmforum.com/%E9%A3%8E%E6%A0%BC%E8%AE%BE%E8%AE%A1%E6%89%8B%E5%86%8C 参考来源]

[[category:BMForum|F]]