风格设计手册

来自BMForum
跳转至: 导航搜索

本文最后更新时间:2006-5-28

风格准备

软件

推荐使用以下软件作为修改和制作风格使用: 文本编辑器:EditPlus 2.12以上版本; EmEditor 4.0以上版本 图形处理软件:Adobe Photoshop 或者 Macromedia Fireworks 解压缩软件:Winrar最新版本 环境:为了避免每一次改动都要上传到服务器看效果,请在您的机器上建立本机测试PHP的环境!并在您的机器上装好BMB。本文均以本地环境为例。

理念

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

毅力

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

制作流程

新建风格

  1. 首先,复制一份datafile/style/bsd01.bs5文件到同一个文件夹下,重命名其为你希望的文件名,如test.bs5。
  2. 打开文本编辑器,这里以EditPlus(以下简称EP)为例。在EP内打开这个文件。确定你看到了这样的一句话:$skinrealname="默认主题"; ,如果看见的是乱码,请到菜单项 “文档-重新载入为-转换器”下,选择编码为UTF-8即可。
  3. 编辑此文件,修改
    $skinrealname="默认主题";
    $styleidcode="test";
    $cachedstyle=1;
    这三行为你所需的内容。这三行的意义如下:
    $skinrealname代表风格名称,修改为所需的。例如这里我们改成
    $skinrealname="Test Style";

    $styleidcode代表风格id。每个风格都要有一个独立的不同于其他风格的id,id名称任意。因此,请命名一个不可能与其他风格重复的,或者重复几率很小的id。例如,我们这里改成
    $styleidcode="mystylemadein20050522cannotbethesameasothers";

    $cachedstyle是是否打开缓存,请在编辑风格时改为0,发布风格之前恢复为1。即
    $cachedstyle=0;
    按Ctrl+S保存你的文件。
  4. 进入你论坛的管理中心,调整论坛数据->刷新风格缓存。为了便于测试,你可以暂时设置新风格为默认风格。

注意:如果打开风格缓存,则每次修改都需要“刷新风格缓存”,故请按下文的方法先关闭缓存,然后刷新风格列表,再开始修改风格。

接下来,我们就可以直接编辑 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 。大功告成。

最后,按照 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部分。

将一下最关键的,修改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的部分,就可以修改出理想的头部文件了。

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

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

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

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。

提醒

下面一点很重要:

目前由于各编辑器对 UTF-8 的兼容性参差不齐,所以我们在这里推荐两款适合修改 BMForum 插件、风格、程序的编辑器以供使用。建议使用我们推荐的编辑器,我们不保证其他编辑器的兼容性。

(推荐)目前已知可用的编辑器:

EmEditor http://www.skycn.com/soft/3644.html

Editplus http://www.skycn.com/soft/3641.html

修改 BMForum 的文件,切勿使用记事本、UE等兼容UTF-8较差的程序!