应很多朋友要求,终于到这学期考试结束了,写个风格制作教程吧
我发在ofstar官方的,呵呵,已经有朋友也转到phpwind去了
有什么不对的或不好的地方大家多提意见
如果转载,请注明出处,这么多字,我写的很累的
虽然是为刚起步的朋友们写的,
phpwind和ofstar制作基本一样,这里以ofstar2.1为例
其他论坛比如dz啊什么的,参照着做,都是一个套路:
设你准备做的风格名称是XXX,论坛目录为bbs
一.创建新风格的文件
1。复制bbsimagesofstar文件夹,粘贴到bbsimages,即得到“复件 ofstar”文件夹,

并将该文件夹重命名为XXX
2。复制并粘贴bbstemplateofstar文件夹,得到“复件 ofstar”文件夹,仍然将该文件

夹重命名为XXX
3。复制并粘贴bbsuserdatastyle目录下的ofstar.php文件,得到“复件 ofstar.php”

,将该文件重命名为XXX.php(改文件即风格核心文件)

二.风格制作
上面已经得到了你的新风格需要的文件了,现在可以进行制作属于你自己的风格啦
1。修改风格核心文件
将bbsuserdatastyleXXX.php文件用记事本打开,进行修改,具体修改如下:
注意“//”表示注释,可以不写进去,你只需要在文件里修改就可以了
颜色代码改成你自己风格需要的颜色代码
表格宽度设置为你的风格需要的宽度,可以是固定值或百分比

$stylepath =   'XXX'//此风格在images目录下的文件夹名称
$tplpath =   'XXX'//此风格在template目录下的风格文件夹名称
$yeyestyle = 'yes'//表格内部是否使用白色("yes"内部表格边框将为透明的,"no"表格
边框的颜色就是你下面定义的颜色)
$tablecolor     =     '#000000'//表格边框颜色
$tablewidth     =     ?%'//表格宽度
$mtablewidth=         ?%'//头部和尾部表格宽度
$forumcolorone     =     '#E9EEF3'//论坛版块列表颜色一
$forumcolortwo     =     '#E4EAF2'//论坛版块列表颜色二
$threadcolorone     =     '#E9EEF3'//版块内文章列表颜色一
$threadcolortwo     =     '#E4EAF2'//版块内文章列表颜色二
$readcolorone=     '#E9EEF3'//阅读主题时文章背景颜色一
$readcolortwo=     '#E4EAF2'//阅读主题时文章背景颜色二
$maincolor =   '#F3F3F3'//开发程序备用颜色(一般不用修改)

2。修改风格需要的图片
将bbsimagesXXX里的图片换成你的图片
xxx根目录下的几个图对应发新帖,回复,有无新帖什么的,不多说啦,很容易看懂
下面说说里面的几个文件夹里的图
file:一般是些小图标,比如精华贴,有附件啊什么的
forumlogo:如果要在版块前加logo图,放在这里,不过要后台设置,这里不讨论之
group:用户组小图标(游客,管理员,会员等。。)
index:首页细节的小图片,看英文意思,对照首页,就是那几个图啦,嘿嘿
level:论坛用户级别的图片
read:读帖时候的小图片(信息,引用,编辑等。。)
thread:版块里帖子状态小图片(就是置顶,热门,锁定等主题帖状态)
另外如果你模版里需要另外的图片,可以直接放在xxx目录下,或在xxx目录下新建个你自己
随便取的文件夹名字,在模版里用的时候图片路径指向该文件夹就可以了
3。修改风格的模版(重头戏来啦,嘿嘿)
将bbstemplateXXX里的html文件修改为你的风格的效果,具体参照下面
首先修改css.htm,相应效果和颜色改成你自己风格需要的。。
css详解如下:


TABL E { BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 2px}
//这里定义了表格的基本属性,可以不需要修改
SELE CT { FONT-SIZE: 9pt; COLOR: #000000; BACKGROUND-COLOR: $forumcolorone}
//这里定义了选择框的属性
A  { TEXT-DECORATION: none;}
a: h over{ text-decoration: underline;}
//上面定义了链接效果
B ODY {scrollbar-base-color: $maincolor;scrollbar-arrow-color:$tablecolor;FONT-
SIZE: 9pt;color: #000000;background: #ffffff;}
//这里定义了正文的属性.字体,字号,颜色,背景色(如果要加论坛背景图,在background:
#ffffff后面加url(图片路径))
textarea,input,object     { font-family: Tahoma, Verdana; font-size: 12px; color: #000000;font-weight: normal; background-color: $forumcolorone }
//这里定义了输入框,文本框的属性
TD { BORDER-RIGHT: 1px; BORDER-TOP: 0px; FONT-SIZE: 9pt; COLOR: #000000;}
//这里定义的表格内属性,字号,边框,颜色。。
. head { color: #FFFFFF;background: #8394B2 url($imgpath/$stylepath/tablebg.gif);padding: 6px;}
//为表格头一行的颜色
. f_one {background: $forumcolorone;}
. f_two {background: $forumcolortwo;}
. t_one {background: $threadcolorone;}
. t_two {background: $threadcolortwo;}
//这里定义的是论坛内表格的颜色,在后台定义
.topbg { color: #ffffff;background: #606096;}
.footbg { color: #ffffff;background: #606096;}
//头部和尾部主表格里的效果,可以自己设置
.cbg { color: #000000;background: #D1DCEB url($imgpath/$stylepath/cat_bg.gif);}
//为论坛类别下一行的颜色(与上一行形成对比) 可以加图片
.smalltxt {font-family: Tahoma, Verdana; font-size: 8pt;color: #000000;}
//为字体和字体大小控制等
.table { color:#000000;}
//为特殊字体颜色
.cfont { color:#FFFFFF }
//为论坛类别名字的颜色
.fnamecolor { color:#003366;}
//各版块名字颜色
.bold {font-weight:bold;}
//字体加粗
.headurl { color:#ffffff;}
//为链接等字体的颜色
.index_font{color: #3A4F6C;background-color:#D1DCEB; font-weight:bold;padding: 7px;}
//论坛部分字体,可以在模版里找到相应设置的地方
.tpc_title { font-size: 12px;}
//帖子标题的字体大小
.tpc_content { font-size: 12px;}
//font-size帖子内容字体大小
.i_table {BORDER-RIGHT: $ tablecolor 1px solid; BORDER-TOP: $tablecolor 1px solid; BORDER-LEFT: $ tablecolor 1px solid; BORDER-BOTTOM: $tablecolor 1px solid;}
//表格内部表线为透明色,外部为核心文件里设置的表格颜色

风格里html模版文件说明

css.htm----------------css文件
faq.htm----------------帮助
fastpost.htm-----------快速发帖
favor.htm--------------控制面板-收藏夹
footer.htm-------------页面底部
getpwd.htm-------------取回密码
head_pop.htm-----------登陆提示框
header.htm-------------页面头部
index.htm--------------论坛首页
login.htm--------------会员登陆页
masingle.htm-----------版主管理页一
mawhole.htm------------版主管理页二
member.htm-------------用户列表
message.htm------------短消息
notice.htm-------------公告
post.htm---------------发表主题、投票、回复
profile.htm------------编辑个人资料
read.htm---------------帖子浏览
read_sell.htm----------出售帖子
refreshto.htm----------跳转页
register.htm-----------注册页
search.htm-------------搜索程式
sendmail.htm-----------发送邮件
sendpwd.htm------------找回密码
showmsg.htm------------论坛提示
showuserdb.htm---------查看个人资料
thread.htm-------------帖子列表
thread_children.htm----子版块
thread_online.htm------版内在线信息
todayinbbs.htm---------今日到访会员
top.htm----------------编辑总置顶



关于html模版文件修改的说明
1。你想做成什么样的风格就把模版修改成什么样子啦,可以随便改
2。html里灰色的注释部分不能删,那是php逻辑信息,嘿嘿
3。模版里用到的图片路径问题,图片路径设置为$imgpath/$stylepath/图片名字
如果自己在images/xxx里加了个如yyy文件夹,放在yyy里的图片路径技术$imgpath/$stylepath/yyy/图片
4。常用模版,一般只要修改这几个文件就可以了
index.htm,header.htm,footer.htm,css.htm,别的文件根据自己的需要修改

 

风格制作方面一些问题和技巧,写的我好累哦
大家有问题可以发贴提问,也可以加我的风格群里去讨论
风格QQ群:2733390
1。关于css,你可以自己加效果,比如你想把表格或者某一部分定义为特殊效果,可以自己在css里加你需要的修改的部分。比如加一个效果名称为boylee在css里加一行,这样写“.boylee{你需要的效果}”,然后模版里需要调用的地方只要写个class=boylee就可以了
2。自编css技巧请看4楼,css如何编写,附中文说明(非风格css的内容,是通用的css编写)
3。风格里复杂点的还有表格的处理和效果。表格效果可以在css定义,在需要加定义效果的地方写上class=“你定义的效果名称”。表格嵌套结构只要注意不影响注释逻辑部分就可以了。举个例子,也可以在header里写table,在footer里结束表格完成整个页面表格嵌套。。。。等等等等自己可以慢慢摸索。有时候表格结构写的好可以做出很多效果来。简单表格写法参照7楼
4。关于装插件的问题。很多插件,安装的时候需要修改模版,安装新模版前如果你需要装的什么插件的,请自行按照插件安装规范,在模版里安装即可。
5。关于特定页面加上自己需要加的比如广告啊,特殊效果啊什么的,参照上面模版文件说明,在相应的模版页里加。

更多方面想不起来了,别的好象也没什么难点了,大家有问题就回贴,我不断补充和完善中

原文见Ofstar官方论坛

Back