DZ6.1相关颜色修改方法汇总教程之二：Discuz首页各颜色详解！

   转帖请注明来自SONOCC
www.asocc.cn

前言
   首先我要说，我写的帖子《DZ6.1相关颜色修改方法汇总教程之一：导航菜单颜色详解，尾部颜色详解！》得到版主和大家的厚爱，非常感谢！因为你们的支持，我觉得要继续写一个《DZ6.1相关颜色修改方法汇总教程之二：Discuz首页各颜色详解》来回报大家。这篇文章分八章详尽介绍首页discuz.htm的所有部分颜色的后台控制及css单独调整方法,其他在templates.lang.php修改颜色方法请参看子 《DZ6.1相关颜色修改方法汇总教程之一：导航菜单颜色详解，尾部颜色详解！》 一楼介绍，在discuz.htm相关代码上直接加style="color:#ff0000;"修改颜色亦请自行研究。
    因为水平有限，错误在所难免，希望大家指正！如有修改颜色的请求，凡跟帖提出者，我亦会尽力帮助！
    再次感谢大家的支持和厚爱！  

友情提示
1、一般颜色修改优先次序是以templates.lang.php修改、Discuz.htm的添加如style="color:#ff0000;"修改、css修改和后台->界面风格->方案详情修改为排序，也就是说如果同时在css修改了颜色和后台修改颜色，则以css修改为准。
2、在css中有两次定义同一名称属性，以排最后为准；css_append.htm为用户自定义，优先于其他css的定义，应该尽量将自定义css放于其内，便于管理。
  

        目录
一、论坛信息区            一楼
二、公告区                一楼
三、文字广告区            二楼
四、热门标签区            二楼
五、板块区                三楼
六、友情链接区            四楼
七、在线会员区            四楼
八、有无新帖图标示意区    四楼

引言
我将Discuz首页划分为八个区，分别是论坛信息区、公告区、文字广告区、热门标签区、板块区、友情链接区、在线会员区、有无新帖图标示意区。见下图图示

              

一、论坛信息区
背景颜色：在css_common.htm找#foruminfo 添加{ background:#00f; }

（一）、登陆之后情形


I、左边用户信息
1、“状态：”和“您上次访问是在：”颜色：在css_append.htm尾部加#userinfo p { color:#f00; }
2、“正常模式/隐身模式”颜色：在css_append.htm尾部加#userinfo p #loginstatus a{ color:#ff0; }
3、“查看新帖”、“标记已读”颜色：在css_append.htm尾部加#userinfo a { color:#f00; }
4、显示的日期时间颜色：在css_append.htm尾部加#userinfo em{ color:#f00; }

II、右侧论坛状态
1、“今日”、“昨日”、“最高日”、“主题”、“帖子”、“会员”、“欢迎新会员”颜色：在css_append.htm尾部加#forumstats p { color:#f00; }
2、“今日”、“昨日”、“最高日”、“主题”、“帖子”、“会员”之后的数字颜色：在css_append.htm尾部加#forumstats em{ color:#00f; }
3、“精华区”颜色：在css_append.htm尾部加#forumstats a{ color:#ff0; }
4、“欢迎新会员”之后会员名字颜色：在css_append.htm尾部加#forumstats cite a{ color:#ff0; }

（二）、未登陆时情形

1、论坛名称：在后台是由【高亮链接颜色 {HIGHLIGHTLINK}】控制，单独修改则在css_common.htm找#nav a { font-weight: bold; color: {HIGHLIGHTLINK}; }修改{HIGHLIGHTLINK}为你需要的颜色如#00f。
2、输入框颜色：在后台是由【输入框边框颜色 {INPUTBORDER}】控制，在css中直接设置则在css_append.htm尾部添加#loginform input  {border-color: #00f ;  }   
3、输入用户密码背景色：在后台是由【主表格背景颜色 {TABLEBG}】控制。在css中直接设置则在css_append.htm尾部添加#loginform input  {background:#ff0;  }   
4、输入用户名、密码颜色：在后台是由【内表格中文字颜色 {TABLETEXT}:#000】控制。在css中直接设置则在css_append.htm尾部添加#loginform input  {color:#f00; }   
5、“登陆”两字颜色：在后台是由【内表格中文字颜色 {TABLETEXT}:#000】控制。在css中直接设置则在css_common.htm找        #loginform button  添加 color:#f00
6、登陆按钮边框、背景颜色：默认是由css_common.htm的button { border: 1px solid; border-color: {COMMONBOXBORDER} {LIGHTTEXT} {LIGHTTEXT} {COMMONBOXBORDER}; background: {CATCOLOR}; height: 2em; line-height: 2em; cursor: pointer; }控制所有边框及背景通用属性。要单独修改它，则在css_common.htm找#loginform button 增加border-color:#f00修改边框，增加background: #ff0修改背景。


二、公告区

1、背景颜色：在css_common.htm找#announcement 添加background:#f00;
2、公告顶部虚线颜色：在在css_common.htm找#announcement { border-top: 1px dashed {CATBORDER}; line-height: 36px; height: 36px; overflow: hidden; }
修改{CATBORDER}为你需要的颜色
3、公告边框线颜色：公告是有一个边框线的，只是默认设成{BGCOLOR}和背景同色，看不见而已。有时想让它显示出来，有时因为和顶部虚线重叠单加打架也需要修改。在css_common.htm找#announcement div { border: 1px solid {BGCOLOR}; padding: 0 10px; line-height: 35px !important; height: 36px; overflow-y: hidden;}
修改{BGCOLOR}为你需要的颜色。
4、公告右侧日期颜色：在css_common.htm找#announcement li em { font-size: 0.83em; margin-left: 5px; color: {TEXT}; }修改{TEXT}为你需要的颜色。
5、公告标题颜色：进后台->其他->论坛公告->编辑，对标题修改增加<font color=#f00>公告标题</font>

[ 本帖最后由 sonocc 于 2008-10-6 16:27 编辑 ]

三、文字广告区

1、背景颜色：通用定义是由后台的聚合背景{PORTALBOXBGCODE}控制。单独修改，在css_common.htm找.ad_text { border: 1px solid {CATBORDER}; margin-bottom: {BOXSPACE}; padding: 6px; {PORTALBOXBGCODE}; background-repeat: repeat-x; }修改{PORTALBOXBGCODE}为background:#f00;你需要的颜色或background: url({IMGDIR}/背景图文件)，其中background-repeat: repeat-x;要视情况修改和删除。
2、边框颜色：在css_common.htm找.ad_text { border: 1px solid {CATBORDER}; margin-bottom: {BOXSPACE}; padding: 6px; {PORTALBOXBGCODE}; background-repeat: repeat-x; }修改{CATBORDER}为你需要的颜色。
3、广告文字颜色：进后台->广告->编辑->文字内容，对文字内容修改增加<font color=#f00>你的广告内容</font>。

四、热门标签区

1、背景颜色：在css_common.htm找..portalbox td { padding: 10px; vertical-align: top; {PORTALBOXBGCODE}; background-repeat: repeat-x; background-position: 0 0; background-repeat: repeat-x; border: 1px solid {TABLEBG}; }修改{PORTALBOXBGCODE}为background:#f00;你需要的颜色或background: url({IMGDIR}/背景图文件)，其中background-repeat: repeat-x;要视情况修改和删除。
2、边框颜色：在css_common.htm中有两个代码都可以控制其边框颜色：.portalbox 是{CATBORDER}; .portalbox td 是border: 1px solid {TABLEBG};由于默认风格主表格背景颜色 {TABLEBG}是#fff白色，因此实际边框颜色是由栏目边框色 {CATBORDER}实现的。如果有冲突就应该在这两处进行设置调整，或者干脆将.portalbox td 中border: 1px solid {TABLEBG}删除。
3、“热门标签”颜色：在css_append.htm尾部加#hottags h3 a { color:#00f; }
4、标签名字颜色：在css_common.htm中找#hottags a 添加color:#f00;
5、数字颜色：在css_append.htm尾部添加#hottags em { color:#00f; }

[ 本帖最后由 sonocc 于 2008-9-29 05:36 编辑 ]

五、板块区
     
1、“内表头背景颜色”：在后台是由【内表头背景颜色 {HEADERCOLOR},{HEADERBGCODE}】控制。其“#2F589C header_bg.gif”的header_bg.gif为图片链接，#2F589C为16进制颜色，其含义为图片优先，在找不到图片时以#2F589C显示。
2、“上级板块名称”颜色；在后台是由内表头文字颜色 {HEADERTEXT}控制颜色。单独修改则在css_append.htm尾部添加.forumlist h3 a{ color: #f00; }
3、“分区版主”颜色：在后台是由内表头文字颜色 {HEADERTEXT}控制颜色。单独修改则在css_append.htm尾部添加.forumlist .headactions { color: #f00; }
4、“分区版主名”颜色：在后台是由内表头文字颜色 {HEADERTEXT}控制颜色。单独修改则在css_append.htm尾部添加.forumlist .headactions a{ color: #f00; }
5、“栏目背景”颜色：在后台是由【栏目背景颜色 {CATCOLOR},{CATBGCODE}】控制颜色。其“#E8F3FD cat_bg.gif”含义同“内表头背景颜色”
6、“板块”颜色：在后台是由【外表格中 (表格除外) 文字颜色 {TEXT}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist thead th{color: #f00;}
7、“主题”、“贴数”颜色：在后台是由【外表格中 (表格除外) 文字颜色 {TEXT}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist thead td{color: #f0f;}
8、“最后发表”颜色：在后台是由【外表格中 (表格除外) 文字颜色 {TEXT}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist thead td.lastpost{color: #f0f;}
9、“板块名称”颜色：在后台是由【内表格中超级链接文字颜色 {LINK}】控制颜色；用css单独修改则在css_append.htm尾部添加.forumlist h2 a { color: #0ff; }；如要使每个板块名称具有五颜六色，则在后台->板块->板块管理->被选板块的编辑->修改其板块名称为<font color=red>你的板块名称</font>
         
10、“板块名称”右侧的“今日及发帖数”颜色：在后台是由【高亮链接颜色 {HIGHLIGHTLINK}】。 单独修改则在css_common.htm找.forumlist h2 em { color: {HIGHLIGHTLINK}; }修改{HIGHLIGHTLINK}为你需要的颜色。
11、“板块简介”、“子板块”颜色：在后台是由【外表格中 (表格除外) 文字颜色 {TEXT}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist tbody th p{ color: #00f;}
12、“子版块名称”颜色：在后台是由【内表格中超级链接文字颜色 {LINK}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist tbody th p a {color:#f00;}
13、“版主”颜色：在后台是由【外表格中 (表格除外) 文字颜色 {TEXT}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist tbody th p.moderators { color: #00f; }
14、“版主名”颜色：在后台是由【高亮链接颜色 {HIGHLIGHTLINK}】单独修改则在在css_append.htm尾部添加.forumlist tbody th p.moderators a { color:#f00; }
15、“主题数”、“发帖数”颜色：在后台是由【外表格中 (表格除外) 文字颜色 {TEXT}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist tbody td.nums{color:#f0f;}
16、“by”、“发贴日期”颜色：在后台是由【外表格中 (表格除外) 文字颜色 {TEXT}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist tbody td.lastpost{color:#00f;}
17、“标题”、“用户名”颜色：在后台是由【内表格中超级链接文字颜色 {LINK}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist tbody td.lastpost a{color:#f00;}
18、“标题”、“用户名”颜色：在后台是由【内表格中超级链接文字颜色{LINK}】控制颜色。单独修改则在css_append.htm尾部添加.forumlist tbody td.lastpost a{color:#f00;}
19、“内表格背景配色1”颜色：在后台是由【内表格背景配色 1 {ALTBG1}】控制颜色。也可以在css中直接设置，在css_common.htm找.forumlist tbody th, .forumlist tbody td, .threadlist tbody th, .threadlist tbody td { color: {TEXT}; padding: 1px 0px; border-bottom: 1px solid {TABLEBG}; background-color: {ALTBG1};
line-height: 2em;}修改background-color: {ALTBG1}为你需要的颜色。
20、“内表格背景配色2”颜色：在后台是由【内表格背景配色 2{ALTBG2}】控制颜色。也可以在css中直接设置，在css_common.htm找.forumlist tbody tr:hover th, .forumlist tbody tr:hover td, .threadlist tbody tr:hover th, .threadlist tbody tr:hover td { background-color: {ALTBG2}; }修改background-color: {ALTBG2}为你需要的颜色。
21、“内表格边框色”颜色：在后台是由【内表格边框色 {BGBORDER}】控制颜色。这条线是以画一条顶部横线定义的，也可以在css中直接设置，在css_common.htm找.mainbox tbody th, .mainbox tbody td { border-top: 1px solid {BGBORDER}; padding: 5px; }修改border-top: 1px solid {BGBORDER};中{BGBORDER}为你需要的颜色。
    注意：在默认风格css_common.htm中.forumlist tbody th, .forumlist tbody td, .threadlist tbody th, .threadlist tbody td { color: {TEXT}; padding: 1px 0px; border-bottom: 1px solid {TABLEBG}; background-color: {ALTBG1};  line-height: 2em;}的border-bottom: 1px solid {TABLEBG}也是表格线，是以画一条底部横线定义的，但因采用的颜色是{TABLEBG}和主表格背景颜色一致，就看不见这条线。如果修改该线颜色，则就会和 border-top: 1px solid {BGBORDER}有冲突。
22、“主表格外边框颜色”：在后台是由【主表格外边框颜色 {BORDERCOLOR}】控制颜色。也可以在css中直接设置，在css_common.htm找.mainbox { background: {TABLEBG}; border: {BORDERWIDTH} solid {BORDERCOLOR}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }修改border: {BORDERWIDTH} solid {BORDERCOLOR}为你需要的颜色。如果背景色{TABLEBG}设置的是深色，有可能会出现{TABLEBG}色边框，其实是背景所致！
   注意：.mainbox是将首页和主题列表页一起修改了，如果只想修改首页则在css_append.htm尾部添加.forumlist {border: {BORDERWIDTH} solid #f00;}

[ 本帖最后由 sonocc 于 2008-9-29 05:51 编辑 ]

六、友情链接区
      
1、“友情链接”颜色：在后台是由【内表格中文字颜色 {TABLETEXT}】控制。在ccs中直接设置则在css_common.htm找.box h4 添加你需要的颜色如color:#f00;
2、“表头背景”颜色：在后台是由【聚合版块背景颜色 {PORTALBOXBGCODE}】控制。在css中直接设置则在css_common.htm找.box h4 { {PORTALBOXBGCODE}; background-repeat: repeat-x; background-position: 0 0; line-height: 30px; padding: 0 10px; }修改{PORTALBOXBGCODE}为你需要的颜色如background:#00f;
3、“链接区背景”颜色：在后台是由【主表格背景颜色 {TABLEBG}】控制。在css中直接设置则在css_common.htm找.box { background: {TABLEBG}; border: {BORDERWIDTH} solid {CATBORDER}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }修改background: {TABLEBG};为你需要的颜色。
4、“边框”颜色：在后台是由【栏目边框色 {CATBORDER}:#CAD9EA】控制。在css中直接设置则在css_common.htm找.box { background: {TABLEBG}; border: {BORDERWIDTH} solid {CATBORDER}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }修改border: {BORDERWIDTH} solid {CATBORDER};中{CATBORDER}为你需要的颜色如#f00。
5、“表格线”颜色：在后台是由【通用显示区域边框颜色 {COMMONBOXBORDER}:#E8E8E8】控制。在css中直接设置则在css_common.htm找.box td { border-top: 1px solid {COMMONBOXBORDER}; }修改{COMMONBOXBORDER}为你需要的颜色如#00f。
6、“链接论坛名称”颜色：在后台是由【内表格中超级链接文字颜色 {LINK}】控制颜色；在非紧凑型模式下用css单独修改则在css_append.htm尾部添加.box td h5 a {color:#00f}。在紧凑型模式没有logo情形下，用css单独修改则在css_append.htm尾部添加.box td a {color:#00f}。
7、“文字说明”颜色：在后台是由【浅色文字颜色 {LIGHTTEXT}:#999】控制颜色；在css中直接设置则在css_append.htm尾部添加.box td p {color:#00f}。

七、在线会员区
        
1、“在线会员”颜色：在后台是由【内表格中超级链接文字颜色 {LINK}】控制颜色。在css中直接设置则在css_append.htm尾部添加#online h4 strong a{ color:#f00; }。
2、“在线状况”颜色：在后台是由【外表格中 (表格除外) 文字颜色 {TEXT}】控制颜色。在css中直接设置则在css_common.htm找#online h4 { font-weight: normal; color: {TEXT}; }修改color: {TEXT}的{TEXT}为你需要的颜色如#f00等。
3、“表头背景”颜色：在后台是由【聚合版块背景颜色 {PORTALBOXBGCODE}】控制。在css中直接设置则在css_common.htm找.box h4 { {PORTALBOXBGCODE}; background-repeat: repeat-x; background-position: 0 0; line-height: 30px; padding: 0 10px; }修改{PORTALBOXBGCODE}为你需要的颜色如background:#00f;
4、“会员区背景”颜色：在后台是由【主表格背景颜色 {TABLEBG}】控制。在css中直接设置则在css_common.htm找.box { background: {TABLEBG}; border: {BORDERWIDTH} solid {CATBORDER}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }修改background: {TABLEBG};为你需要的颜色。
5、“表格线”颜色：在后台是由【通用显示区域边框颜色 {COMMONBOXBORDER}:#E8E8E8】控制颜色。在css中直接设置则需要在三处设置，因为表格线是由“生日顶部线”、“用户组顶部线”和“用户列表顶部线”分别控制，见图。
         
（1）“生日顶部线”颜色：在css_common.htm找#bdayslist { padding: 10px 0 10px 55px; border-top: 1px solid {COMMONBOXBORDER}; background: url({IMGDIR}/bdays_cake.gif) no-repeat 10px 5px; }修改border-top: 1px solid {COMMONBOXBORDER};中{COMMONBOXBORDER}为你需要的颜色如#ff0。
（2）“用户组顶部线”颜色：在css_common.htm找 #onlinelist { background: url({IMGDIR}/online.gif) no-repeat 10px 10px; border-top: 1px solid {COMMONBOXBORDER}; } 修改border-top: 1px solid {COMMONBOXBORDER};中{COMMONBOXBORDER}为你需要的颜色如#f00。
（3）“用户列表顶部线”颜色：在css_common.htm找#online dd { border-top: 1px solid {COMMONBOXBORDER}; } 修改{COMMONBOXBORDER}为你需要的颜色如#f0f。
6、“边框”颜色：在后台是由【栏目边框色 {CATBORDER}:#CAD9EA】控制。在css中直接设置则在css_common.htm找.box { background: {TABLEBG}; border: {BORDERWIDTH} solid {CATBORDER}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }修改border: {BORDERWIDTH} solid {CATBORDER};中{CATBORDER}为你需要的颜色如#f00。
7、“生日状况”颜色：分为
（1）“今天没有过生日的用户”颜色：在后台是由【内表格中文字颜色 {TABLETEXT}:#000】控制。
在css中直接设置则在css_common.htm找#bdayslist 添加color:#f0f;
（2）“今日生日”和“生日会员”颜色：
在后台是由【内表格中超级链接文字颜色 {LINK}】控制颜色。在css中直接设置则在css_append.htm尾部添加#bdayslist a{  color:#00f; }。
8、“会员用户组”颜色：在后台是由【内表格中文字颜色 {TABLETEXT}:#000】控制。在css中直接设置则在css_common.htm找#onlinelist 添加color:#f00;
9、“会员用户名”颜色：在后台是由【内表格中超级链接文字颜色 {LINK}】控制颜色。在css中直接设置则在css_append.htm尾部添加#online dd a{ color: #00f; }。

八、有无新帖图标示意区
1、“有新帖的板块”和“无新帖的板块”颜色：在后台是由【内表格中文字颜色 {TABLETEXT}:#000】控制。在css中直接设置则在css_common.htm找.legend label 添加color:#f00;
2、“边框”颜色：在后台是由【内表格边框色 {BGBORDER}】控制颜色。在css中直接设置则在css_common.htm找.legend { border: 1px solid {BGBORDER}; background: {ALTBG1}; padding: 10px; margin: 10px auto; width: 500px; text-align: center; line-height: 35px; }修改border: 1px solid {BGBORDER};中的{BGBORDER}
为你需要的颜色如#00f。
3、“背景”颜色：在后台是由【内表格背景配色 1 {ALTBG1}】控制颜色。在css中直接设置则在css_common.htm找.legend { border: 1px solid {BGBORDER}; background: {ALTBG1}; padding: 10px; margin: 10px auto; width: 500px; text-align: center; line-height: 35px; }修改 background: {ALTBG1};中{ALTBG1}为你需要的
颜色如#00f。

[ 本帖最后由 sonocc 于 2008-9-29 06:09 编辑 ]

这篇小文早就写好了，因为这一段时间上DZ有点困难一直没发（可能从海外进DZ的问题吧）。今天虽然能上传，但还是有点难啊，因此排版方面也就凑合了，待以后我再修改吧，请大家担待了！！

[ 本帖最后由 sonocc 于 2008-9-29 07:04 编辑 ]

这叫沙发吗？

没弄明白楼主到底要做什么

111111111111111111111111111111

楼主在发布一个基本的教程给大家