BMForum CSS结构说明

来自站长百科
跳转至： 导航、​ 搜索

导航: 上一页

本文将讲述 BMForum风格体系的核心——CSS 文件设计说明。

在您设计风格前，您需要有一定的CSS基础或英语基础，以便读懂设置信息。

以默认风格为例，下面CSS的内容都在位于 images/bsd01/styles.css


/* 下面是表格边框控制 */
table{
border-top: 0px;
border-left: 0px;
border-bottom: 2px
}
td{
border-right: 1px;
border-top: 0px;
}
/* 控制超级链接 */
a {
text-decoration:none;
color:#444444;
}
a:hover {
text-decoration:underline;
color:#ff6600;
}
/* 网页背景 */
body{
background-color: #F0F3F8;
}
.bmforum_background{
background-color: #F0F3F8;
}
/* 页脚版权处背景 */
.bmforum_footer_background{
background-color: #F0F3F8;
}
/* 文本框等输入框样式控制 */
p, body, textarea, input, select, option, td{
font-size: 9pt;
font-family: tahoma;
color: #444444;
}
textarea, input, select, option {
border: 1px solid #d2d2d2;
background-color: #F8F8F8;
}
/* 论坛发贴排行榜“作者”“发贴数”等标题字体颜色 */
.title {
color:#ffffff;
}
.title a {
text-decoration:none;
color:#ffffff;
}
.title a:hover {
text-decoration:underline;
color:#ffffff;
}
/* 表格线，暂时不用设置 */
.linetable {
border-top:none;
}
/* 主表格的边框颜色，例如默认风格是灰色的 (基本废止,以tableborder取代,这里主要用于向下兼容) */
.bmbnewstyle {
/* all table's border color, bmforum set a table as a border to contain tables. */
border: 0px solid #444444;
width: 100%;
background-color: #cccccc;
}
.bmbnewstyle_withoutwidth {
/* no width value.same below.nowidth is same*/
border: 0px solid #444444;
background-color: #cccccc;
}
/* 页顶导航栏的背景色 */
.bmforum_base_menu{
/* navigation menu bar table */
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
background-color: #EEEEEE;
}
/* 页面导航栏，即您所在的位置那栏 */
.nav_bar_bg {
/* navigation menu bar background */
border: 1px solid #cccccc;
width: 100%;
background-color: #FFFFFF;
}
/* 暂时不用修改 */
.btable {
background-image: url("middle2.gif");
border: 1px solid #537CBC;
}
/* 首页版块名称样式，可控制是否居中 */
.indexalign1 {
/* index forum name align */
text-align :center;
font-weight : bold;
background-color: #537CBC;
}
.indexalign2 {
text-align : center;
background-color: #537CBC;
height: 18px;
}
/* 外表格边框 */
.tableborder {
width: 100%;
background: #d6e0ef;
border: #446A8E 1px solid;
}
.tableborder_withoutwidth {
background: #d6e0ef;
border: #446A8E 1px solid;
}
/* 一些表格的背景颜色，默认为白色 */
.tablebg {
background-color: #FFFFFF;
}
/* 板块内子论坛名称样式，可控制是否居中 */
.forumalign1 {
/* forum page's forum name align */
text-align : center;
}
/* 页码处CSS，下面的分别控制左中右，即总计数，当前页码，可选页码 */
.pagenumber{
/* pages navigation */
width:18px;
text-align:center;
background-color: #537CBC;
width: auto;
color: #FFFFFF;
}
.pagenumber_1{
width:18px;
text-align:center;
background-color: #FFFFFF;
}
.pagenumber_2{
width:18px;
text-align:center;
background-color: #FCFCFC;
}
/* 一些表格的样式设置，如不了解可不更改 */
.btablelow {
background-image: url("middle2.gif");
border-top: 1px solid #537CBC;
border-right: 1px solid #537CBC;
border-bottom: 1px none;
border-left: 1px solid #537CBC;
}
/* 公告栏背景 */
.announcement { /* announcement color */
background-color: #537CBC;
white-space: nowrap;
}
/* 加重、高亮字体颜色 默认帖子标题加重色 */
.jiazhongcolor{ /* bolder color */
color: #444444;
}
.jiazhongcolor a {
text-decoration:none;
color:#444444;
}
.jiazhongcolor a:hover {
text-decoration:underline;
color:#ff6600;
}
/* 非 forums.php 的主题列表背景设置，1、2设置不同起间隔效果 */
.list_color1{
/* threads list color 1 */
background-color: #ffffff;
}
.list_color2{
/* threads list color 2 */
background-color: #FCFCFC;
}
/* 表格边框颜色 */
.bordercolor{
border-color: #CCCCCC;
}
.bordercolor_right{
border-right: 1px solid #CCCCCC;
}
.bordercolor_left{
border-left: 1px solid #CCCCCC;
}
.bordercolor_top{
border-top: 1px solid #CCCCCC;
}
.bordercolor_all{
border: 1px solid #CCCCCC;
}
.bordercolor_background{
background-color: #CCCCCC;
}
.topic_bordercolor_px{
border: 1px solid #CCCCCC;
border-top:none;
background-color: #FFFFFF;
}
/* “重要主题”“论坛主题” 边框、背景 */
.importtopic_border{ /* Importance Threads Tips Table */
border: 1px solid #CCCCCC;
border-top:none;
width: 100%;
}
.tablebg_important_topic {
background-color: #FFFFFF;
text-align: center;
}
/* “重要主题”“论坛主题” 文字 */
.important_topic_split{
color: #444444;
font-weight : bold;
}
.bordercolor_top_right{
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
/* 控制绝大多数表格宽度 */
.tablewidth{
/* all tables width */
width: 100%;
}
/* 论坛顶部背景 */
.background_color{
background-color: #537CBC;
}
/* 分类、 “今日过生日的会员 （共 1 人）”、 “论坛在线统计 [详细]”等字样所在表格行的背景颜色/图片 （主项背景颜色/图片），均以tile_back开头 */
.tile_back_nowidth{
background-color: #537CBC;
}
.tile_back_title{
color: #FFFFFF;
background-color: #537CBC;
width: auto;
}
.tile_back_tablewidth{
width: 100%;
background-color: #537CBC;
}
.tile_back_color{

/* background for a title */

background-color: #537CBC;
width: auto;
}
/* 在线列表背景 */
.tile_back_online{
background-color: #537CBC;
width: auto;
}
.tile_back_online_2{
background-color: #537CBC;
text-align: center;
width: auto;
}
/* 版块规则背景 */
.tile_back_rule{
background-color: #537CBC;
width: auto;
}
/* 读帖时背景 */
.tile_back_readpost{
background-color: #537CBC;
border-right: 1px solid #CCCCCC;
text-align: center;
height: 22px;
width: 20%;
}
/* 短信背景，如“快捷菜单” */
.tile_back_pm{
background-color: #537CBC;
}
.tile_back_menu_pm{
background-color: #FFFFFF;
height: 10px;
}
/* 用于显示首页版块介绍等表格的背景 */
/* 背景1 */
.forumcoloronecolor {
/* forum display color 1*/
background-color: #ffffff;
}
.forumcoloronecoloronly {
background-color: #ffffff;
width: 100%;
}
.forumcolorone_align{
background-color: #FFFFFF;
text-align: left;
}
.forumcolorone_ex{
background-color: #FFFFFF;
text-align: center;
height: 42px;
}
/* 背景2 */
.forumcolortwo {
background-color: #ffffff;
text-align: center;
}
.forumcolortwo_noalign{
/* forum color 2 */
background-color: #FFFFFF;
}
/* 当鼠标移动到该表格后，样式改变为下面所定 */
.forumcolor_onmouseover{
/* onmouseover forumcolor */
background-color: #FCFCFC;
}
/* 横列广告背景设置（黄金广告位）*/
.row_ads{
/* ads */
background-color: #ffffff;
text-align: center;
}
/* 首页等显示的“最后更新” 处内容文字样式 */
.indexsummaryalgin {
/* index latest post */
text-align: left;
}
/* 次要颜色，建议修改为和forumcolorone或forumcolortwo样式一样 */
.subcolor {
/* some table's background */
background-color: #FFFFFF;
}
/* 历史遗留变量，为兼容一些插件请修改为和tile_back的颜色一样 */
.cautioncolor {
/* text on subcolor's table */
color: #537CBC;
}
.cautioncolor a {
text-decoration:none;
color:#537CBC;
}
.cautioncolor a:hover {
text-decoration:underline;
color:#537CBC;
}
/* 分类、 “今日过生日的会员 （共 1 人）”、 “论坛在线统计 [详细]”等字样的颜色（主项颜色）*/
.categoryfontcolor_font{
/* category link font */
color: #FFFFFF;
font-weight : bold;
}
.categoryfontcolor_font a {
text-decoration:none;
color:#FFFFFF;
}
.categoryfontcolor_font a:hover {
text-decoration:underline;
color:#FFFFFF;
}
.categoryfontcolor_normal{
/* no text-decoration */
color: #FFFFFF;
}
.categoryfontcolor_normal a {
text-decoration:none;
color:#FFFFFF;
}
.categoryfontcolor_normal a:hover {
text-decoration:underline;
color:#FFFFFF;
}
/* 页顶导航栏的背景色 */
.titlecolor{
/* some table's background */
background-color: #EEEEEE;
}
/* 首页上“讨论区名称 主题数 回复数 最后更新 版主”等表格，此行文字颜色 */
.titlefontcolor{
color:#444444;
}
.titlefontcolor a{
text-decoration:none;
color:#444444;
}
.titlefontcolor a:hover {
text-decoration:underline;
color:#444444;
}
.titlefontcolor_row_forum{
color:#444444;
}
/* “本版规则” 文字颜色*/
.rule_title_font{
color: #FFFFFF;
}
/* 主题列表（forums.php）等页面，显示多页主题时，主题页码连接的样式 */
.forum_page_links{
font-size:7pt;
font-family:verdana;
}
.forum_page_links a {
text-decoration:none;
font-size:7pt;
font-family:verdana;
}
.forum_page_links a:hover {
text-decoration:underline;
font-size:7pt;
font-family:verdana;
}
/* 版块描述样式 */
.forumdescolor{
color:#444444;
}
/* 版块名称 */
.forumnamecolor{
font-family:verdana;
color: #444444;
}
.forumnamelink a {
text-decoration:none;
color:#444444;
}
.forumnamelink a:hover {
text-decoration:underline;
color:#ff6600;
}
/* 消息框的表格头背景，如“消息：您还没有登陆”（Global.php CSS） */
.msg_box_categoryfontcolor{
/* message box text color */
color: #FFFFFF;
}
/* 主题列表（forums.php），主题背景样式，1/2为间隔效果 */
.forum_border_1{
background-color: #FFFFFF;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.forum_border_2{
background-color: #FCFCFC;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.forum_border_3{
background-color: #FCFCFC;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.thread_list_border{
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
/* 当鼠标移动到该表格时，样式变化为下面指定 */
.forum_border_2_onmouseover{
background-color: #FCFCFC;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}

/* 显示帖子时背景颜色，1/2为间隔效果 */
.article_color1{
background-color: #ffffff;
}
.article_color2{
background-color: #FCFCFC;
}
.article_color1_memberinfo{
background-color: #ffffff;
border-right: 1px solid #CCCCCC;
}
.article_color2_memberinfo{
background-color: #FCFCFC;
border-right: 1px solid #CCCCCC;
}
.article_color1_timeline{
background-color: #ffffff;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.article_color2_timeline{
background-color: #FCFCFC;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.article_color1_bottombar{
background-color: #ffffff;
border-top: 1px solid #CCCCCC;
}
.article_color2_bottombar{
background-color: #FCFCFC;
border-top: 1px solid #CCCCCC;
}
/* 快速回复 */
.article_color1_fast_reply{
background-color: #ffffff;
border-left: 1px solid #CCCCCC;
}
.article_color2_fast_reply{
background-color: #FCFCFC;
border-left: 1px solid #CCCCCC;
}
.article_color1_reply_content{
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-bottom:none;
border-right:none;
}
.article_color2_reply_content{
background-color: #FCFCFC;
border: 1px solid #CCCCCC;
border-bottom:none;
border-right:none;
}
/* topic.php 内主题标题背景 */
.topic_title{
background-color: #FFFFFF;
table-layout: fixed;
word-wrap: break-word;
border: 1px solid #CCCCCC;
}
/* 帖子内发帖者名 样式 */
.author_name{
color: #444444;
font-size: 14px;
font-weight: bold;
}
/* 签名处样式，可控制最大签名高度 */
.signature_div{
max-height: 18em;
overflow: hidden;
}
/* 主题内“引用” “收藏” “报告” 背景和文字样式，1/2为间隔效果 */
.toolbox_thread_1 {
height:16px;
width:auto;
text-align:center;
background-color:#FFFFFF;
}
.toolbox_thread_2 {
height:16px;
width:auto;
text-align:center;
background-color: #FCFCFC;
}
/* [quote] 引用代码 “层”样式 */
.quote_dialog {
background-color: #FFFFFF;
margin: 5px;
padding: 8px;
border: 1px solid #CCCCCC;
}
/* 文章模式显示主题 页面背景 */
.article_background{
background-color: #F0F3F8;
width: 100%;
}
/* 文章标题 */
.article_headline{
font-size: 14px;
font-weight: bold;
}
/* 文章信息，如 阅读：XX 次 */
.article_information{
font-size: 14px;
}
/* 文章内容 */
.article_content{
font-size: 14px;
}
/* “引用该文 | 发表评论 | 转寄该文 | 关闭窗口”背景 */
.article_toolbar_row{
background-color: #537CBC;
height: 28px;
width: 100%;
border: 1px solid #CCCCCC;
}

/* 短消息设置 */
/* 短信列表背景颜色 */
.pm_list_bgcolor{
background-color: #FFFFFF;
}
/* 短信“使用状态”背景 */
.status_pm{
background-color: #FFFFFF;
height: 40px;
}
/* 短信使用率样式 */
.status_progress_pm{
background-color: #537CBC;
}
.status_progress_blank_pm{
background-color: #FFFFFF;
}
/* “快捷操作”等文字颜色 */
.title_color_pm{
color: #FFFFFF;
}
/* 短信“使用状态”边框 */
.pm_status_border{
border: 1px solid #FFFFFF;
width: 95%;
}
/* JavaScript菜单，即“ 论坛信息”等处的悬停菜单 */
.gray {
cursor:pointer;
}
.menuskin {
border: 1px solid #CCCCCC;
visibility: hidden;
font: 12px verdana;
position: absolute;
background-color:#ffffff;
background-image:url("menubg.gif");
background-repeat : repeat-y;
}
.menuskin a {
padding-right: 10px;
padding-left: 25px;
color: black;
text-decoration: none;
}
#mouseoverstyle {
background-color: #FFFFFF;
margin:2px;
padding:1px;
border:1px solid #CCCCCC;
}
#mouseoverstyle a {
color: #444444;
}
.menuitems{
margin:2px;
padding:2px;
word-break:keep-all;
}
/* 快速回复表格样式 */
table#fastreply {
border: 1px solid #CCCCCC;
border-top:none;
}
/* 快速表情选择菜单 */
.fast_emot_selector{
overflow: auto;
left:595px;
position:absolute;
width:auto;
height:110px;
z-index:1111;
background-color: #FCFCFC;
border: 1px solid #CCCCCC;
visibility:hidden;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:5px
}
.post_emot_selector{
width:170px;
height:110px;
z-index:8;
overflow: auto;
clip: rect(50 0 0 50);
}
/* 发帖时“设置选项”菜单 */
.post_options {
position:absolute;
width:370px;
height:auto;
z-index:1;
background-color: #FCFCFC;
border: 1px solid #CCCCCC;
visibility:hidden;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
}
/* FAQ 帮助表格 */
.faq_table{
width: 100%;
background-color: #CCCCCC;
border: 0;
}
.faq_table_tr{
height: 22px;
background-color:#537CBC;
}
/* 跳转页面（如“发表成功”）“层”的位置和样式*/
#redirectwrap{
margin: 150px auto 0 auto;
text-align: left;
width: 500px;
align:center;
}
/* 帖子内容层 */
.content_div{
overflow-x: auto;
}


相关条目[ ]

参考来源[ ]

取自“https://www.zzbaike.com/wiki/index.php?title=BMForum_CSS结构说明&oldid=39784”