人気ブログランキング | 話題のタグを見る

今日開始是M魚


by binofish
カレンダー
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

[轉轉]教大家一招 修改 风格的办法[節選]

本文所有來自我也为这做点贡献吧,教大家一招 修改 风格的办法,很有效果哦,呵呵[作者:feigege]
僅作自己查閲用!



1.打开后台---风格管理
看到 编辑当前默认风格:wind 的css (更改默认风格请到核心设置里设置)
这就是修改CSS的地方了,论坛背景图片啊,前景图片啊,颜色啊,什么都可以在这里设置

2.先把里面的内容复制下来,放到电脑的记事本里,这样如果你改错了,造成了论坛无法显示呢,直接将记事本里的内容重新覆盖就可以了,新手一定要记得这一步啊,要不后悔都来不及了。

3.进入正题
先说名下几点 一般风格都是以例如 body[CSS名称]{font-family: Verdana; [每一段语句都是由;结尾] } [由{}包裹]

body {font-family: Verdana;FONT-SIZE: 12px;MARGIN: 0;color: #000000;background: #ffffff;}
body{} 这里面是论坛整体设置;
font-family: Verdana;文字字体,基本可以不用设置
FONT-SIZE: 12px;论坛文字大小
MARGIN: 0;检索或设置对象四边的外补丁
color: #000000;文字颜色
background: #ffffff;背景颜色


另外你可以通过加入这句话给你论坛加个背景图片
background:url(图片地址);

我们进入第二句
td {FONT-SIZE: 12px;}
这句很简单
td在htm中就是单元格的意思
那么这个定义就是定义td单元格中的CSS
FONT-SIZE: 12px;
表示字体大小为12
除此之外你还可以加入
color: #000000;文字颜色
等其他效果

第三段
textarea,input,select{
font-family: Verdana;
font-size: 12px;
background-color: #ffffff;
}

这段主要负责表单的CSS,用到的方面有发贴写字框,提交,重制按扭等效果
font-family: Verdana;
font-size: 12px;
background-color: #ffffff;
这三个在上面也分别介绍了作用了,分别是字体、字体大小以及背景颜色
你可以试这加个背景看看啊

form{margin:0px; display:inline}

第四段
这句我还真记不清了
form在HTM里表示表单,不过改了后在论坛没见效果,还是等高人吧,我跳过这段了

第五段
div.quote{margin:5px 20px;border:1px solid $tablecolor;padding:5px;background:$forumcolorone;line-height : normal;}

这个比较有意思,是你风格中的引用框的样式

margin:5px 20px;检索或设置对象四边的外补丁 说直白点就是个相对距离,5px和20px指的是横距和竖距,可以根据自己喜好调整

border:1px solid; 是边框属性 1px是大小
solid是实线 none是无 dotted是点线 dashed是虚线 double是双线 groove是立体线 ridge也可以说是立体线吧 inset是凹线 outset是凸线

$tablecolor;是说引用框和你论坛边框一样的颜色

padding:5px;是内补丁属性,margin是外补丁属性,也是相对距离,只不过他是对内的距离

background:$forumcolorone; background刚才说过的,背景颜色$forumcolorone是你论坛版块列表颜色一

第六段
a { TEXT-DECORATION: none;}
a:hover{ text-decoration: underline;}
img {border:0;}
这就论坛超连接属性
a { TEXT-DECORATION: none;}
表示在鼠标没指到超连接情况下没有什么反应
a:hover{ text-decoration: underline;}
表示鼠标经过的时候有下划线
img {border:0;}
表示图片连接没边框,有边框会很恐怖的

另外你可以为你的超连接变更颜色,当鼠标经过的时候变成什么颜色
方法还是加个color: #******;

下面这段

.banner{background: #84AACE;}
.imglogo {
MARGIN: 0px;
padding: 0px;
TEXT-ALIGN: center;
background-color:#84AACE;
background-image:url(://bbs.lunqun.com/image/lunqun/logo.gif);
WIDTH: 295px;
HEIGHT:87px;
}

.banner{background: #84AACE;}顾名思义就是论坛头部,这里只有句头部的背景颜色为兰色
.imglogo {}顾名思义就是头部LOGO等相关设置啦,里面的东西上面都说过了,我就用一句话介绍过去了啊
论坛头部的LOGO呢是一个位置于bbs.lunqun.com/image/lunqun/logo.gif的宽为295,高为87的图片,这个图片的外部位置和内部相对位置都为0
另外你可以通过加入这句话给你论坛头部加个背景图片
background:url(图片地址);

.head {color: #FFFFFF;background: #84AACE;padding: 5px;font-weight:bold;}
.head a{color: #FFFFFF;}

这段呢是管论坛分类啊、-=>论坛相关这一条的,只是这一条啊
.head {color: #FFFFFF;background: #84AACE;padding: 5px;font-weight:bold;}
分别表示在这一条中的文字颜色、在这一条中的背景颜色、内置相对距离、表格内的字体属性

这里有个数值,大家看下吧
取值:
normal : 默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置
bold : 粗体。相当于 700 。也相当于 b 对象的作用
bolder : 比 normal >粗
lighter : 比 normal >细
100 : 字体至少像 200 那样细
200 : 字体至少像 100 那样粗,像 300 那样细
300 : 字体至少像 200 那样粗,像 400 那样细
400 : 相当于 normal
500 : 字体至少像 400 那样粗,像 600 那样细
600 : 字体至少像 500 那样粗,像 700 那样细
700 : 相当于 bold
800 : 字体至少像 700 那样粗,像 900 那样细
900 : 字体至少像 800 那样粗

.head a{color: #FFFFFF;}顾名思义就是那一条中有超连接的文字颜色

.f_one {background: $forumcolorone;}
.f_two {background: $forumcolortwo;}


这里是论坛版块列表颜色一、论坛版块列表颜色二

.hr {border-top: 1px solid $tablecolor; border-bottom: 0; border-left: 0; border-right: 0; }

hr在htm中表示水平线的意思,不过我没见到P4哪有水平线啊,难道是P3留下来忘删了,呵呵,不尽业。
呵呵,上面是我瞎猜的,我也不知道为什么要多出一个这个,不过有那就说明下吧

—_,—真吃力不讨好,居然一大堆属性,哭了

border 表示边框属性,那后面加上 top bottom……分别表示:上、下、左、右
属性则继续参照上面说的边框属性

solid是实线 none是无 dotted是点线 dashed是虚线 double是双线 groove是立体线 ridge也可以说是立体线吧 inset是凹线 outset是凸线

.t_one {background: $threadcolorone;}
.t_two {background: $threadcolortwo;}
.r_one {background: $readcolorone;}
.r_two {background: $readcolortwo;}
这个我就一起讲了
分别表示
版块内文章列表颜色一
文章列表颜色二
阅读主题时文章背景颜色一
阅读主题时文章背景颜色二
其实这个可以通过这页上面那个编辑风格直接写,不要在CSS里改啊

上面说到的
.f_one {background: $forumcolorone;}
.f_two {background: $forumcolortwo;}
也不要到这里改

.cbg { color:#000000;background: #E5E8EA;}
.cbg a{ color:#000000;}
这个是 “论坛 主题 文章 最后发表 版主 ”“ -=>我的信息 ”这几条里的样式,也是只是一条的属性啊
方法和上面

.head {color: #FFFFFF;background: #84AACE;padding: 5px;font-weight:bold;}
.head a{color: #FFFFFF;}

这个相似

这里重点提下,我想大家都记得有些论坛在这些地方都有背景图片吧,例如“论坛群官方网”
只要加上background:url(图片地址);就可以了

.smalltxt {font-family: Tahoma, Verdana; font-size: 24px;}
这是通过调用PHP语句显示的文字属性—_—||,也就是一部分超连接的属性
上面分别表示字体 字体大小 不加颜色的话就表示为默认颜色

.tinytxt {font-family: Tahoma, Verdana; font-size: 11px;}
.cfont { color:#FFFFFF; }
这两项很久没做风格了,我忘了,时间不早了,就暂时不说了,改了下,没看到哪有变化,大概是细节处吧。

.fnamecolor { color:#003366;}版快名称字体颜色
.index_font{color: #3A4F6C;background-color:#E5E8EA; font-weight:bold;padding: 5px;}
纠正个10楼的错误,这段才是-=>我的信息等下面几条相关的样式
分别是背景颜色、字体颜色,内置相对距离

.tpc_title { font-size: 12px;font-weight:bold;}文章标题大小 发现24这么大也挺好看
.tpc_content { font-size: 13px;}文章内容字体大小

.i_table {BORDER: $tablecolor 1px solid;background:#D6E3EF;}
.tool {color:#84AACE;}
论坛表格边框属性

[----完----]
by binofish | 2006-08-25 17:44 | memo