|
Blue
Magic Forum
风格模板入门教程
作者：
Bob Shen
最后修订于：2004-3-6
准备工作
要制作出比较完善的风格和模板来，需要具备一些基础知识：
◎
图像处理知识，最好掌握Photoshop或者Fireworks等图像处理软件的使用；
◎
色彩搭配等常识；
◎
基础的网页制作知识，初步了解HTML语言和PHP语言，当然如果了解JavaScript以及Flash等则更好；
常识
风格和模板：严格地说来，风格和模板不是同一个概念。模板的概念，简而言之就是几个HTML文件，它们起到的作用是控制论坛的布局(Layout)，而风格则可能既包括了模板，也包括了论坛的名称信息，色彩信息，CSS定义等，我宁愿称其为配色文件（Color
Scheme）。因此，可能出现多个风格共用一个模板的情况。在BMFORUM中，模板(*.htm)的存放位置是bbs/newtem/
(bbs指代论坛安装的目录，下同)。而风格配色定义文件(*.bs5)的位置是在
bbs/datafile/style/
下。
颜色代码：在风格和模板中使用的颜色，都写成16进制代码，比如#FFFFFF表示白色，#000000表示黑色。色彩的代码可以通过屏幕取色软件获得，在大多数图像制作软件中也可以得到，相信经常制作网页的朋友不会陌生。
风格的组成：一个完整的BMB风格，应该包括以下几个部分：
风格的定义文件：bbs/datafile/style/stylename.bs5
风格的头部文件：bbs/header/stylenameheader.php
风格的尾部文件：bbs/footer/stylenamefooter.php
风格所需的图像：bbs/images/stylename/
风格的模板文件：bbs/newtem/stylename/
第一节
风格定义文件各参数的意义
。
首先，我们打开bbs/datafile/style/simplecolor_blue.bs5，炫彩风格蓝色为例。该文件的内容如下：
<?
$skinrealname="炫彩系列－蓝色";
$styleidcode="2003040129201222";
$backgroundcolor= 'FFFFFF';
$titlecolor = 'BCE9FF';
$titlefontcolor= '000000';
$bordercolor = '188ECE';
$tablewidth = '98%';
$subcolor = 'BCE9FF';
$cautioncolor = '000000';
$categorycolor = '6BB9E7';
$categoryfontcolor= '000000';
$forumnamecolor= '000000';
$forumdescolor = '000000';
$forumcolorone = 'EBF9FF';
$forumcolortwo = 'FFFFFF';
$list_color1 = 'EBF9FF';
$list_color2 = 'FFFFFF';
$article_color1= 'FFFFFF';
$article_color2= 'EBF9FF';
$background_color= '';
$topfont_color1= '';
$topbg_color1= '';
$topbg_color2= '';
$topbg_color3= '';
$header_tile= 'images/simplecolor/bg_g.jpg';
$tablebg= '';
$tile_back= 'images/simplecolor/tile_b.jpg';
$newpost= 'images/simplecolor/forum_b.gif';
$onlyread= 'images/simplecolor/online_b.gif';
$nonewpost= 'images/simplecolor/forum_n_b.gif';
$posticon= '';
$pollicon= '';
$npost= 'images/simplecolor/t_new_b.gif';
$npollicon= 'images/simplecolor/t_poll_b.gif';
$replyicon=
'images/simplecolor/t_reply_b.gif';
$otherimages= 'images/simplecolor';
$cssinfo= 'p,input,select{font-size:9pt;
color:000000; FONT-FAMILY: Tahoma, Arial}
TABLE{BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM:
2px }
td{BORDER-RIGHT: 1px; BORDER-TOP: 0px; FONT-SIZE: 9pt;
color:#000000; font-family:Tahoma, Arial;
}
.outtable {
border: 1px solid #585858;
}
a {text-decoration:none; color:#000000;}
a:hover {text-decoration:underline;}
BODY {
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #cccccc;
SCROLLBAR-SHADOW-COLOR: #cccccc; COLOR: #7d7d7d;
SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR:
#ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
FONT-SIZE: 9pt; FONT-FAMILY: tahoma; COLOR: #000000;
}
TEXTAREA {FONT-SIZE: 9pt; FONT-FAMILY: tahoma}
.inputarea, option {FONT-SIZE: 9pt; FONT-FAMILY: tahoma;
background-image : url(images/simplecolor/inputbg.gif);
background-attachment: fixed;
border:1px solid; border-color:#707070 #FFFFFF #FFFFFF
#707070;
}
.menu {
FILTER: revealTrans(transition=23,duration=0.5)
blendTrans(duration=0.5); VISIBILITY: hidden; POSITION:
absolute;
height:20px; z-index:1; background-color: #FEFEFF;
layer-background-color: #FEFEFF; border: 1px none
#500000;
}
.btable {
background-image:
url(images/simplecolor/tile_b.jpg);
border: 1px solid #188ECE;
}
.btablelow {
background-image:
url(images/simplecolor/tile_b.jpg);
border-top: 1px solid #188ECE;
border-right: 1px solid #188ECE;
border-bottom: 1px none;
border-left: 1px solid #188ECE;
}
.bot {
BORDER-BOTTOM: BORDER-BOTTOM: medium none;
BORDER-LEFT: rgb(0,0,0) 1px solid; BORDER-RIGHT:
rgb(0,0,0) 1px solid; BORDER-TOP: rgb(0,0,0) 1px solid}
.bot2 { border: solid; border-width: 0px 1px 1px;
border-color: black #000000 #000000}
.bot4 { border: #000000; border-style: solid;
border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px}
.bot3 { border-color: #000000 #000000 black;
border-style: solid; border-top-width: 1px;
border-right-width: 1px; border-left-width: 1px}';
$logofile= 'images/simplecolor/logo_b.jpg';
$jiazhongcolor= '000000';
$headercode= '';
$winimages= 'images/simplecolor';
$headername= 'header/simpleheader.php';
$temfilename= 'simplecolor';
$footername= 'footer/simplefooter.php';
$decorate3='';
$decorate4='';
$decorate1= '';
$decorate2= '';
$openstylereplace=1;
请不要被这个巨大的文件吓跑，让我细细道来：
Part I
风格的名称部分
此部分涉及以下参数：
|
参数名 |
含义 |
举例 |
备注 |
|
$skinrealname |
风格的中文名 |
猴年大吉、仿星空 |
|
|
$styleidcode |
风格的id |
2003040129201222 |
不能与别的风格id重复，关于id的取名规范，可参考仿星空风格的readme文件 |
Part II
颜色的定义参数：
请参考图1阅读：
图1
图中，黑色数字表示此数字对应的是红框区域的背景颜色，蓝色数字表示此数字对应的是红框区域的文字的颜色。（下同）
此部分涉及以下参数：
|
参数名 |
对应 |
意义 |
备注 |
|
$categorycolor |
1 |
类别背景颜色 |
若设置了类别背景图片($tile_back)，则图片会覆盖背景 |
|
$categoryfontcolor |
7 |
类别的文字颜色 |
|
|
$forumnamecolor |
5 |
板块名称颜色 |
|
|
$forumdescolor |
6 |
板块描述的文字颜色 |
|
|
$forumcolorone |
2 |
板块列表背景色一 |
|
|
$forumcolortwo |
3 |
板块列表背景色二 |
|
|
$titlecolor |
4 |
板块列表指示栏背景 |
若此处还设置了背景图片($tablebg)，则图片会覆盖背景 |
|
$backgroundcolor |
|
整个论坛的页面背景颜色 |
|
|
$bordercolor |
|
所有表格的边框线颜色 |
|
请参考图2阅读：
图2
此部分涉及以下参数：
|
参数名 |
对应 |
意义 |
备注 |
|
$jiazhongcolor |
1 |
默认标题加重色 |
|
|
$list_color1 |
2 |
帖子列表背景色一 |
|
|
$list_color2 |
3 |
帖子列表背景色二 |
|
另外，还有以下几个控制色彩的参数：
|
参数名 |
意义 |
备注 |
|
$article_color1 |
帖子阅读时的列表的背景色一 |
参考$list_color1 |
|
$article_color2 |
帖子阅读时的列表的背景色二 |
参考$list_color2 |
|
$cautioncolor |
公告字体颜色 |
|
|
$subcolor |
次要表格的背景颜色 |
只要与$forumcolorone或$forumcolortwo设置相同即可保证效果 |
※颜色部分的小贴事
网页配色的一个要领就是在一个页面中尽量使用同一色系的颜色，避免对比色过多的出现。就上述参数来说，$forumcolorone/two和$categorycolor最好是一个色系，更保险一些，$article_color1/2与$list_color1/2这两组共四个参数完全可以设置与$forumcolorone/two相等。一个确保你的页面颜色不显色彩杂乱的方法，就是在使用调色板调色时，固定好一个基本色，然后上下移动色带右端的箭头，这样产生的颜色都是比较相近的，也是比较安全和协调的搭配方式。
Part III
与图片设置有关的参数：
请参考图3阅读：
图3
此部分涉及以下参数：
|
参数名 |
对应 |
意义 |
备注 |
|
$tile_back |
1处背景 |
类别背景图片 |
会覆盖此处背景色 |
|
$newpost |
2 |
有新帖板块的图标 |
|
|
$onlyread |
只读和锁定板块的图标 |
|
|
$nonewpost |
没有新帖板块的图标 |
|
请参考图4阅读：
图4
此部分涉及以下参数：
|
参数名 |
对应 |
意义 |
备注 |
|
$npost |
1
|
发新帖的图标 |
|
|
$npollicon |
2
|
回复帖的图标 |
|
|
$replyicon |
3
|
发新投票的图标 |
|
另外，还有以下几个图片设置的参数：
|
参数名 |
意义 |
备注 |
|
$logofile |
论坛的logo |
|
|
$tablebg |
类别名称下描述部分的背景 |
参考图1（4）处 |
|
$posticon |
快速发新帖的小图标 |
非必要 |
|
$pollicon |
快速发起投票的小图标 |
Part IV
与图片存放路径有关的参数：
除了第III部分讲述的图片以外，论坛还用到了大量的其他图片，比如 、 、 等等。这些图片量大而且体系烦杂，制作时需要花费一些工夫。控制这些图片存放的参数只有两个：$winimages和$otherimages。由于历史原因，这是两个不同的参数，但现在这两个参数区别已经不大，在设置时，如果你制作了一整套论坛的其他图标，则将这两个值都设置为存放这些图片的路径即可，比如
images/mynewstyle/
，或者你可以设置为 images/bmb2004，
这样以来所有其他图片都将采用BMForum默认风格中的其他图片。
在这些“其他图片”中，我将选取几个讲解它们出现的地点（见第__部分）。没有讲到的图片，大多比较好认，你可以使用默认风格找一下它们出现在何方。
Part V风格附加参数：
此部分涉及的参数均不牵涉图片和色彩，但却蕴涵着十分重要的信息：
|
参数名 |
意义 |
举例 |
备注 |
|
$headername |
头文件 |
header/bmb2004header.php |
|
|
$footername |
尾部文件 |
footer/xingkongfooter.php |
|
|
$temfilename |
模板文件路径 |
newtem/simplecolor |
|
|
$openstylereplace |
是否使用模板颜色替换 |
1为打开、
0为关闭 |
关闭的意思是在模板文件中已经内嵌了颜色和图片的信息，比如默认的模板。而只有此处为1的模板可以通过修改.bs5文件修改配色，请参阅第二节 |
Part VI
样式表（CSS）参数简述：
还有一个很重要的参数，就是$cssinfo
，规定了论坛的CSS定义。CSS是网页样式表，是控制页面样式风格的高效手段。所有制作网页者都应该对CSS有一些大致的了解。如果你还不了解，那么建议您到网上搜索一下教程，稍微知道一下其作用和大致的语法即可。
说一下最基础的部分：
对于定义一个新的CSS类，采用
.
名称
{ 内容
} 这样的形式。对于定义网页中已有的一些要素（比如td、a、option等）则采用
要素名
{ 内容
}
的形式。而“内容”部分，写作方式是
内容1
; 内容2
;
……
也就是每个内容以分号分开。最为基础的是这样几个内容：
color: #颜色代码;
字体颜色
font-size:
磅值pt;
字体大小，中文采用9pt最为合适
font-family:
字体名称;
字体
text-decoration:
修饰;
字符修饰，none无,
underline下划线
本论坛的CSS
从
$css='
开始，至
';
这里为止,
中间可以换行，但请不要使用半角单引号“
'
”。
一般的初级使用者需要修改的地方，只是以下几处：
a
{text-decoration:none; color:#000000;}
链接文字
(常态情况下)
a:hover
{text-decoration:underline;}
链接文字
(鼠标悬停时)
.btable {
background-color: #C51008;
蓝色部分请修改为$categorycolor的值
border:
1px solid #FF1717;
蓝色部分请修改为$bordercolor的值
}
.btablelow {
background-color:
#C51008;
蓝色部分请修改为$categorycolor的值
border-top: 1px solid
#FF1717;
蓝色部分请修改为$bordercolor的值
border-right: 1px solid
#FF1717;
蓝色部分请修改为$bordercolor的值
border-bottom: 1px none;
border-left: 1px solid
#FF1717;
蓝色部分请修改为$bordercolor的值
}
对于定义过$tile_back，也就是类别名称背景图片的风格，以上两段CSS
写成：
.btable {
background-image: url(images/bmb2004/middle2.gif);
border:
1px solid #005FBA;
}
.btablelow {
background-image: url(images/bmb2004/middle2.gif);
border-top: 1px solid #005FBA;
border-right: 1px solid #005FBA;
border-bottom: 1px none;
border-left: 1px solid #005FBA;
}
其中，蓝色部分请修改为$bordercolor的值，而绿色部分则修改为$tile_back的值。
至此，这个bs5文件中的内容大致讲解完毕，剩下的一些参数，请保持空值。
第二节
模板中的颜色替换与B-Template
您可能对$openstylereplace这个值所代表的意义感到困惑，也可能不明白为什么从BMB
5版本开始起，修改后台的.bs5文件常常不再奏效。这一节就讲解原因。
从BMB
Famliy V3开始，采用了独创的B-Template模板技术。关于这一技术你不需要了解太多，你暂且可以通俗但不很准确地将其理解为：打开一个页面时，论坛程序读取了模板中与这个页面对应的htm文件，然后将这个htm文件中允许其替换的部分替换成相应的色彩和图片。请打开猴年大吉风格或者任何一个炫彩系列风格的index.htm，在临近结束处你可以找到这样的代码：
<!-- BEGIN
onlineinfo -->
</table><br>
{decorate1}
<table
cellspacing=0 cellpadding=0 width={tablewidth}
border=0 bgcolor={bordercolor}
align=center>
注意我加粗且加深的部分。这两个是什么？就是刚才介绍的.bs5文件中的$tablewidth
(表格宽度参数)
和
$bordercolor (表格线颜色参数)。
当浏览器打开index.php也就是首页时，程序读取与index.php对应的index.htm文件，由于这两个风格的
$openstylereplace值为1，程序会替换{tablewidth}为$tablewidth的值，也就是
95% ，替换{bordercolor}为$bordercolor的值，也就是该风格中规定的表格线颜色。
这时如果你将$openstylereplace的值改为0，然后再打开首页，你会发现论坛惨不忍睹，这时候查看此页面的源代码，会发现，这一部分最后输出给浏览器的是：
</table><br>
{decorate1}
<table
cellspacing=0 cellpadding=0 width={tablewidth} border=0
bgcolor={bordercolor} align=center>
也就是完全没有进行替换，浏览器无法识别{}内的东西，因为它不是正确的颜色代码或者宽度的数值等，自然无法正确显示。
而对于一个$openstylereplace原先就设置为0的风格，比如仿星空风格，打开index.htm，你会发现完全没有{tablewidth}和{bordercolor}的影子。上述例子中的同样一部分，在仿星空风格中是：
<!-- BEGIN
onlineinfo -->
</table><br>
<table
cellspacing=0 cellpadding=0 width=96%
border=0 bgcolor=F1F1F1
align=center>
同样注意我加粗且加深的部分。它们已经实现内嵌了$tablewidth和
$bordercolor
的值。因此，即使在.bs5文件中把$tablewidth改成了500%
，最后到浏览器打开时仍然是width=96%
，因为程序在读取index.htm后并没有进行替换。即使将$openstylereplace改成了1，这里仍然是width=96%
，因为程序在读取index.htm后虽然进行了替换，但是由于没有可供替换的{tablewidth}，所以依然修改无效。
那么，一个风格为什么要将颜色等信息内嵌入模板呢？一方面是出于版权保护，禁止随意修改；另一方面，也是最主要的，是尽量减少页面打开时程序所需要执行的替换，从而提高效率，这也是颜色内嵌的初衷。
对于初级的风格制作者，建议您寻找$openstylereplace=1的风格，比如newyear
，simplecolor等，放心修改。此时你不用担心修改后浏览器中出现的是这两个风格的颜色，因为你借用的是它们的模板（网页的架构）而不是配色和图片等。具体到操作上，就是在.bs5中将$temfile这个值设置为newtem/simplecolor或者newtem/ny2004等。
(未完待续) |
BMForum
帮助中心 >> 风格模板 >> 入门教程