‹‹ 上一主题 | 下一主题 ››
发新话题
打印

LeadBBS 4.0自定义风格详细介绍

花之残

注册会员

Rank: 2
1# 大 中 小 发表于 2007-6-9 10:16  只看该作者
92合租网

LeadBBS 4.0自定义风格详细介绍

v2.31功能加强

- 支持各类风格页首，页尾，表格头及尾部内容自定义，轻松打造完美自由风格
- 支持定义每类风格页面宽度，显示主题内容长度
- 每种风格支持自定义图片，可自定义除默认头像及文件类型外的任意图片
- 略去对回复帖子无意义字词的显示，及控制发帖主题内容，不允许使用换行等特殊符号
- 严格控制用户名所使用的字符，可以限制是否允许使用西方字符(字母数字下划线)，
  是否允许使用中文特殊字符，是否允许注册汉字用户名

改进:

- 发表帖子时，验证固顶帖是否已经满
- 查看及回复帖子内容时，自动处理回复的主题内容．
- 最新帖其它页面调用允许仅调用精华帖子（允许版面限制）
- 解决后台清除在线用户错误及服务器重启后带来的在线人数不准确状况．
- 解决其它2.30以来的网友有所反馈和未反馈的错误，进一步加强页面容错性．

新版本主要针对界面，数据库及程序核心无大改动．为使测试更全面，将尽快提供测试版下载．

自制新风格详细介绍：

1.论坛的风格全部存放在BBSSetup.asp文件中，打开BBSSetup.asp你可以看到：
LEADBBS CODE
DEF_BoardStyleString = Array("默认设置","咖啡色","红淡意浓","淡淡灰色","灰色永恒","紫色典雅","生命绿色","黑暗时代","清爽苹果","老湘社区","零柒派","雷霆回忆","谈谈幽蓝")

  共13种风格，每种风格对应一个CSS文件，存放于论坛的inc目录下面，对应顺序如下：
  "默认设置" - Style0.css
  "咖啡色" - Style1.css
  "红淡意浓" - Style2.css
  "淡淡灰色" - Style3.css
  "灰色永恒" - Style4.css
  "紫色典雅" - Style5.css
  "生命绿色" - Style6.css
  "黑暗时代" - Style7.css
  "清爽苹果" - Style8.css
  "老湘社区" - Style9.css
  "柒零派" - Style10.css
  "雷霆回忆" - Style11.css
  "谈谈幽蓝" - Style12.css

2.css文件定义方法及参数大全

   众所周知，CSS完全可以完成自定义网页的<body>，<li>，段落<p>，超级链接<a>等标签的默认属性，比如:
   
LEADBBS CODE
A {
     COLOR: #000000; TEXT-DECORATION: none
}
A:hover {
     COLOR: #000000; TEXT-DECORATION: none
}

    则定义了超级链接的样式表属性，颜色为黑色(0x000000)，下划线为无
LEADBBS CODE
TEXTAREA {
     FONT-SIZE: 9pt
}
则定义了TEXTAREA文本输入框的字体为9像素字．

    为了使定义有区别和多样化，LeadBBS自定义了一些CSS类
   
    表单类
    ⑴input.fminpt：单行输入表单属性，对应于html的<input type=text>标签
    ⑵input.fmchkbox：多选按钮与单选按钮，对应于<input type=radio>与<input type=checkbox>
    ⑶.fmtxtra：多行文本输入框，对应于<textarea>标签
    ⑷.fmbtn：表单按钮，对应于<input type=submit>等按钮[/code]
    表格，帧及文字类
    ⑸.TBTop：论坛头部导航类定义，比如：
LEADBBS CODE
.TBTop {BACKGROUND-IMAGE: url(/images/skin/9/top.gif)}

    ⑹.TBHead及.TBHead2：论坛栏目表格头部修饰定应负，比如：
LEADBBS CODE
.TBHead {BACKGROUND-IMAGE: url(/images/skin/9/bg1.gif); BACKGROUND-COLOR: #00aadb}

    ⑺.HeadFont：论坛栏目表格头部所显示的文字字体属性，比如：
LEADBBS CODE
.HeadFont {COLOR: #000000}

    ⑻.TBBG9：表格背影色，一般对应于定义为较浅的部分
    ⑼.TBBG1：表格背影色，一般对应于定义为较深的部分
    ⑽.TBBGbody：论坛的body的类型，等同于BODY.
    ⑾.TBone：表格边框的颜色及属性定义
    ⑿.TBthree：发帖，回复帖等链接处的表格背景属性，这些表格边框默认为TBone，当有扩展风格属性定义并且有头部自定义信息时，表格边框使用TBthree类
    ⒀.TBframeBG：定义帧页面背影
    ⒁.TBframeButton：定义帧buttom页面的属性(背景色等)
    ⒂.TBfour：用户区的表格头部定义
    ⒃.TBtwofont：
    ⒄.NavColor：导航字体的颜色，比如：首页 >> 讨论区 >> 技术论坛
    ⒅.GrayFont：灰色字体的属性
    ⒆.TBtwo：
    ⒇.RedFont：定义论坛红色字颜色
    21.GreenFont：定义论坛绿色字颜色
    22.GreenFont：定义论坛蓝色字颜色
    23.GreenFont：定义论坛蓝色字颜色
    24.TBMenu{BACKGROUND-COLOR:#D8D3C9}：定义下拉菜单边框色
    25.MenuBG{BACKGROUND-COLOR:#F8F8F3}：定义下拉菜单背景色
    26.MenuColor{BACKGROUND-COLOR:#E0DCD3}：定义下拉菜单选中项目颜色

4.0

    27.TBAnc{BACKGROUND-COLOR:#FFFFFF;BACKGROUND-IMAGE:url(/images/skin/5/tb.gif);}
       定义code quote等编码的边框颜色
    28.TBBGAnc{BACKGROUND-COLOR:#EFEEE9;}：定义code quote等编码的背影色
   
3.定义扩展属性

   ⑴使用管理员账号进入后台管理
   ⑵在线编辑其他文件
   ⑶在相应的“编辑风格样式定义”后面点击“[定义更多参数]”链接
   ⑷根据说明填写相应项目
   
4.自定义每种风格的图片

   在定义扩展属性的第四步中，如果选择了自定图片为有，则必须在相应skin目录中建立完整的论坛小图片
   比如你定义的是第14种风格(对应style13.css)，必须在/images/skin/目录下面建立目录名13
   需要的图片大小都是固顶的(请参考默认风格图片)，必须包括以下目录和图片文件：
   alltop.GIF：总固顶帖
   chnuser.GIF：用户区图片
   clear.GIF：清空（回收站）图片
   collect.gif：收藏帖子图片
   Del.gif：删除操作
   edit.GIF：编辑操作
   friend.gif：加为好友
   home.gif：网站主页(保留)
   hot.gif：热门回复帖子
   inbox.GIF：收件箱
   intop.gif：版面固顶
   ip.gif：IP地址
   jh.gif：精华帖子
   LeadBBS.gif：网站logo图片
   lock.gif：锁定帖
   mail.gif：用户邮箱(保留)
   makealltop.gif：总固顶或取消总固顶操作
   maketop.gif：固顶版面帖或取消操作
   ManageDirectory.GIF：后台管理图片
   message.GIF：发送短消息
   move.GIF：转移帖子
   new.gif：新的短消息
   ob.gif：游客标志
   of.GIF：隐身会员
   oicq.gif：ＱＱ(保留)
   ol.GIF：在线会员
   pms.gif：论坛公告
   re.GIF：回复帖子
   repair.GIF：修复整个主题
   sch.gif：搜索帖子
   signature.gif：签名分隔符
   splt.gif：论坛顶行功能导航分隔符
   ti.GIF：提帖子
   tpc.gif：普通主题贴子
   ts.gif：重新文字自动排版
   userchnlnav.GIF：用户会员区？
   userinfo.gif：查看用户信息(保留)
   vote.gif：投标百分比BAR
   vt.gif：投标帖子
   vthot.gif：热门投票帖
   
   目录BF：
   bf/face0.gif,face1.gif...face9.gif：论坛发帖表情图片
   目录BoardTopic：
   BoardTopic/1.gif，_1.gif：今日无新帖子常规版面，今日有新帖子常规版面
   BoardTopic/lock.gif，_lock.gif：今日无新帖子密码锁定版面，今日有新帖子密码锁定版面
   BoardTopic/lock2.gif，_lock2.gif：今日无新帖子认证会员版面，今日有新帖子认证会员版面
   BoardTopic/open.gif，_open.gif：今日无新帖子开放版面，今日有新帖子开放版面(游客可以发帖)
   BoardTopic/readonly.gif，_readonly.gif：今日无新帖子只读版面，今日有新帖子只读版面(不可发帖，修改，转移，删除，回复)
   BoardTopic/elist.gif 查看精华区文章
   BoardTopic/post.gif 发表新主题
   
   目录cnstl，用户星座图片
   cnstl/z1.gif...z12.gif，对应十二星座小图片
   cnstl/z1b.gif...z12b.gif，对应十二星座大图片
   
   目录frame，帧方式浏览时自定义图片：
   frame/arrow-l.gif：收缩帧
   frame/arrow-r.gif：展开帧
   frame/hot.gif：版面修饰图片
   frame/minus.gif：展开的分类
   frame/plus.gif：未展开的分类
   frame/weblogo.GIF：网站logo
   
   目录lvstar，用户等级图片：
   lvstar/level0.gif...level20.gif，对应21个等级
   
   目录manage，对应后台管理员所使用到的图片
   manage/bbsmanageDirectory.GIF
   
   目录other，建立放置此风格的其它图片，比如页首页尾，表格头表格尾用到的图片
   
   目录snxa，对应于用户的十二生肖
   snxa/sx1.gif...sx12.gif，十二生肖大图片
   snxa/sx1s.gif...sx12s.gif，十二生肖小图片
   
   目录sxmg，对应于人物性别及在线状态的四幅图片：
   sxmg/FeMale.gif，女性在线状态
   sxmg/Male.gif，男性或未指定性别或游客在线状态
   sxmg/OfFeMale.gif，女性离线状态
   sxmg/OfMale.gif，男性或未指定性别离线状态
     
下面举例添加第三元素自定义风格的步聚

   一、打开BBSSetup.asp，更改代码
   
LEADBBS CODE
DEF_BoardStyleString = Array("默认设置","咖啡色","红淡意浓","淡淡灰色","灰色永恒","紫色典雅","生命绿色","黑暗时代","清爽苹果","老湘社区","零柒派","雷霆回忆","谈谈幽蓝")

   添加第三元素
   
LEADBBS CODE
DEF_BoardStyleString = Array("默认设置","咖啡色","红淡意浓","淡淡灰色","灰色永恒","紫色典雅","生命绿色","黑暗时代","清爽苹果","老湘社区","零柒派","雷霆回忆","谈谈幽蓝","第三元素")

   
   二、在论坛inc目录下建立Style13.css，内容如下：
   
LEADBBS CODE
BODY {
     FONT-SIZE: 75%; COLOR: #3c7796; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #B2C5D3;background-image:url(/images/skin/13/bg.gif); background-position:center;
}
TEXTAREA {
     FONT-SIZE: 9pt
}
INPUT {
     FONT-SIZE: 9pt; HEIGHT: 20px
}
SELECT {
     FONT-SIZE: 9pt; HEIGHT: 20px
}

input.fminpt
{
    BORDER-RIGHT: #666666 1px solid;
    BORDER-TOP: #666666 1px solid;
    FONT-SIZE: 9pt;
    BORDER-LEFT: #666666 1px solid;
    BORDER-BOTTOM: #666666 1px solid;
    HEIGHT:19px;
    font: "menu";
}
input.fmchkbox
{
    FONT-SIZE: 9pt;
}
.fmtxtra
{
    BORDER-RIGHT: #666666 1px solid;
    BORDER-TOP: #666666 1px solid;
    FONT-SIZE: 9pt;
    BORDER-LEFT: #666666 1px solid;
    BORDER-BOTTOM: #666666 1px solid
}
.fmbtn{border: 1px solid #666666;height:20px;font: "menu";}


P {
     FONT-SIZE: 9pt;
}
TD {
     FONT-SIZE: 9pt;
}
LI {
     FONT-SIZE: 9pt; MARGIN-LEFT: 0pt;
}
UL {
     FONT-SIZE: 9pt; MARGIN-LEFT: 20pt;
}
A {
     COLOR: #3c7796; TEXT-DECORATION: none
}
A:hover {
     COLOR: #3c7796; TEXT-DECORATION: underline
}
SELECT {
     FONT-SIZE: 12px; COLOR: #000000; BACKGROUND-COLOR: #ffffff
}
TEXTAREA {
     FONT-SIZE: 12px; COLOR: #000000
}
INPUT {
     FONT-SIZE: 12px; COLOR: #000000
}
.TBTop {
     BACKGROUND-COLOR: #ffffff
}
.TBHead {
     BACKGROUND-IMAGE: url(/images/skin/13/bg1.gif); BACKGROUND-COLOR: #00aadb
}
.HeadFont {
     COLOR: #000000
}
.TBHead2 {
     BACKGROUND-IMAGE: url(/images/skin/13/bg2.gif); BACKGROUND-COLOR: #00aadb}
.TBBG9 {
     BACKGROUND-COLOR: #F0F1F5
}
.TBBG1 {
     BACKGROUND-COLOR: #F5F6FA
}
.TBBGbody {
     SCROLLBAR-FACE-COLOR: #cfcfcf; SCROLLBAR-SHADOW-COLOR: #595959; SCROLLBAR-3DLIGHT-COLOR: #616161; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #cfcfcf
}
.TBone {
     BACKGROUND-COLOR: #66666A
}
.TBtwo {
     
}
.TBthree {
     BACKGROUND-COLOR: #ffffff
}
.TBfour {
     COLOR: #000000
}
.TBtwofont {
     COLOR: #444444
}
.NavColor {
     COLOR: #3c7796
}
.GrayFont {
     COLOR: #666666
}
.TBframeButton {
     BACKGROUND-COLOR: #777777
}
.TBframeBG {
     BACKGROUND-COLOR: #999999
}


   三、进入后台 >> 在线编辑其他文件 >> 在相应的“编辑风格样式定义”后面点击“[定义更多参数]”链接
       论坛宽度中填写740
       主题长度中填写51
       自定图片选择无
       网站首部内容自定使用HTML　框中填入
      
LEADBBS CODE
<div id=menuDiv style='Z-INDEX: 2; VISIBILITY: hidden; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px; BACKGROUND-COLOR: #9cc5f8'></div>
 
<div align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="770" height="90">
    <param name="movie" value="/images/skin/13/other/top.swf">
    <param name="quality" value="high">
    <embed src="/images/skin/13/other/top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="90"></embed></object></div>

       网站尾部内容自定使用HTML　框中填入
      
LEADBBS CODE
<table width="770" border="0" cellspacing="0" cellpadding="0" align=center>
    <tr>
      <td background="/images/skin/13/other/footerbg1.gif"><img src="/images/skin/13/other/footerbg1.gif" width="2" height="9"></td>
    </tr>
  </table>
  <TABLE cellSpacing=0 cellPadding=0 width="770" border=0 align=center>
    <TBODY>
      <TR>
        <TD width="3%" background="PIC/xs18/copyright_bg.gif"><a href="#top"><IMG
            src="/images/skin/13/other/top.gif" width="32" height="28" border=0></TD>
        <TD width="95%" background=/images/skin/13/other/footerbg.gif align=left> LeadBBS v2.30+引用第三元素风格测试</TD>
        <TD width="2%" align=middle
            background=/images/skin/13/other/footerbg.gif><div align="right"><a href="#top"><img
            src="/images/skin/13/other/top.gif" width="32" height="28" border=0></div></TD>
      </TR>
    </TBODY>
  </TABLE>


       表格头部内容自定使用HTML　框中填入
      
LEADBBS CODE
<TABLE width="100%" border=0 align=center cellPadding=0 cellSpacing=0>
  <TBODY>
    <TR>
      <TD background="/images/skin/13/other/top_bg.gif"><IMG height=28 src="/images/skin/13/other/top_left.gif" width=28></TD>
      <TD width="100%" background="/images/skin/13/other/top_bg.gif"> </TD>
             <TD><img src="/images/skin/13/other/top_end.gif" width="19" height="28"></TD>
      <TD> <DIV align=right><IMG height=28 src="/images/skin/13/other/top_right.gif" width=296></DIV></TD>
    </TR>
  </TBODY>
</TABLE>


       表格尾部内容自定使用HTML　框中填入
      
LEADBBS CODE
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <TR>
    <TD width=8><IMG src="/images/skin/13/other/bottom_left.gif" width="100" height="23" border=0></TD>
    <TD width="100%" background="/images/skin/13/other/bottom_center.gif">　</TD>
    <TD width=14><IMG src="/images/skin/13/other/bottom_right.gif" width="100" height="23" border=0></TD>
  </TR>
</TABLE>


   三、进入目录 images/skin/ 建立目录13，将需要的图片复制到下面，bg.gif,bg1.gif,bg2.gif....
       上面的安装仅是将论坛安装在根目录下面为例，如果是其它路径，请修改相应图片及链接的位置。

第三元素相关图片下载，解压后所有文件放到/images/skin/13/目录下面(如果你将它作为第14种风格的话，对应style13.css文件)

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题