DZ7.0颜色修改教程之一：页头文字、导航菜单颜色和尾部颜色详解！

网络推手

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


一、页头文字、导航菜单颜色
1、页头背景颜色：
（1）后台控制：从后台-界面-风格管理-默认风格编辑找【页头背景{HEADERBGCOLOR},{HEADERBGCODE}:#00A2D2和header.gif】修改#00A2D2和header.gif
（2）css修改：在css_common.htm中找

1. 
   
2. #header { margin-bottom: 8px; width: 100%; border-bottom: {HEADERBORDER} solid
   
3. {HEADERBORDERCOLOR}; {HEADERBGCODE}; }
   

复制代码

}直接修改背景颜色代码{HEADERBGCODE}

2、页头文字颜色:
（1）在后台控制：从后台-界面-风格管理-默认风格编辑找【页头文字颜色 {HEADERTEXT}:#97F2FF】修改#97F2FF为你需要颜色代码
（2）css调整方法：在templates\default目录下打开css_common.htm找到

1. 
   
2. #umenu, #umenu a, #umenu .pipe { color: {HEADERTEXT}; }
   

复制代码

（3）单独修改方法：
I、“用户名”颜色：在templates\default目录下打开css_append.htm，在尾部添加#umenu cite a { color:red; }
II、“在线/隐身”：在templates\default目录下打开css_append.htm，在尾部添加#umenu cite span a { color:red; }
III、竖线分割线颜色：在templates\default目录下打开css_append.htm，在尾部添加#umenu .pipe { color:red; }
IV、“论坛任务”在“您有未完成的任务”时颜色：在templates\default目录下打开css_append.htm，在尾部添加#task_ntc.new{color:blue;}
V、“短消息”在有短消息时颜色：在templates\default目录下打开css_append.htm，在尾部添加#pm_ntc.new{color:blue;}
VI、“在线/隐身”之后的颜色除上面IV和V两处介绍外在css中全是由#umenu  a { color:red; }控制，如要单独设置，只须在templates\default目录下header.htm文件中调整。在相应的<a>中增加 style="color:#FF0000;"即可。
增加并修改后代码如下：
A、“我的帖子”
        <a href="my.php?item=threads{if $forum}&srchfid=$forum[fid]{/if}"style="color:#FF0000;" >{lang my_posts}</a>
B、“空间”
                                <!--{if $ucappopen['UCHOME']}-->
                                        <a href="{$uchomeurl}/space.php?uid=$discuz_uid" target="_blank"style="color:#FF0000;"  >{lang space_short}</a>
                                <!--{elseif $ucappopen['XSPACE']}-->
                                        <a href="{$xspaceurl}/?uid-$discuz_uid" target="_blank"style="color:#FF0000;" >{lang space_short}</a>
                                <!--{/if}-->
C、“短消息”颜色
a、有短消息时                                <a href="pm.php" id="pm_ntc"<!--{if $newpm && $_DCOOKIE['pmnum']}--> class="new" title="{lang pm_new}"style="color:#FF0000;" <!--{/if}
-->
b、无短消息时
target="_blank"style="color:#0000FF;" >{lang pm}
c、有短消息时短消息数字和括号颜色
<!--{if $newpm && $_DCOOKIE['pmnum']}--><span style="color:#00FFFF;" >($_DCOOKIE[pmnum])</span><!--{/if}--></a>
D、“论坛任务”
a、“您有未完成的任务”时
                                <!--{if $taskopen}-->
                                        <a id="task_ntc" {if $newtask}href="task.php?item=doing" class="new" title="{lang task_unfinish}"style="color:#FF0000;"
b、未申请任务时
{else}href="task.php"{/if} target="_blank"style="color:#FF0000;" >{lang task}</a>
                                <!--{/if}-->
                                 
E、“个人中心”
                <a href="memcp.php"style="color:#FF0000;" >{lang user_center}</a>
F、“版主管理”
                                <!--{if $discuz_uid && $adminid > 1}--><a href="modcp.php?fid=$fid" target="_blank"style="color:#FF0000;" >{lang modcp}</a><!--{/if}-->
G、“系统设置”
                                <!--{if $discuz_uid && $adminid == 1}--><a href="admincp.php" target="_blank"style="color:#FF0000;" >{lang admincp}</a><!--{/if}-->
H、“退出”
<a href="logging.php?action=logout&formhash={FORMHASH}"style="color:#FF0000;" >{lang logout}</a>
                        <!--{elseif !empty($_DCOOKIE['loginuser'])}-->
                                 
I、“激活”
                                <a href="logging.php?action=login" style="color:#FF0000;"   >{lang activation}</a>
J、“退出”
                <a href="logging.php?action=logout&formhash={FORMHASH}" style="color:#FF0000;" >{lang logout}</a>
                        <!--{else}-->
K、“注册”
                                <a href="$regname" class="noborder" style="color:blue;"  >$reglinkname</a>
        
L、“登陆”
                        <a href="logging.php?action=login" style="color:red;"  >{lang login}</a>
                        <!--{/if}-->
3、导航菜单颜色：
（1）菜单边框色：
I、后台控制：后台-界面-风格管理-默认风格编辑找【菜单边框色 {MENUBORDER}:#B0E4EF】修改#B0E4EF
II、css修改：在css_common.htm中找#menu a { float: left; padding: 0 14px; height: 25px; border: solid {MENUBORDER}; border-width: 1px 1px 0; background: transparent none; line-height: 25px; color: {MENUTEXT}; text-decoration: none; overflow: hidden; }
修改{MENUBORDER}为你需要的颜色代码
（2）导航菜单背景
I、后台控制：后台-界面-风格管理-默认风格编辑找【菜单背景颜色 {MENUBGCOLOR},{MENUBGCODE}:#EBF4FD、mtabbg.gif】修改#EBF4FD、mtabbg.gif
II、css修改：在css_common.htm中找找#menu li { display: inline; float: left; margin-left: 5px; {MENUBGCODE}; }
修改{MENUBGCODE}为你需要的颜色代码
（3）菜单文字颜色
I、后台控制：后台-界面-风格管理-默认风格编辑找【菜单文字颜色 {MENUTEXT}:#666】修改#666
II、css修改：在css_common.htm中找#menu a { float: left; padding: 0 14px; height: 25px; border: solid {MENUBORDER}; border-width: 1px 1px 0; background: transparent none; line-height: 25px; color: {MENUTEXT}; text-decoration: none; overflow: hidden; }
修改{MENUTEXT}为你需要的颜色代码
（4）菜单高亮背景（鼠标悬停背景）：
I、后台控制：后台-界面-风格管理-默认风格编辑找【菜单高亮背景 {MENUHOVER}:#1E4B7E】修改#1E4B7E
II、css修改：在css_common.htm中找#menu a:hover { border-color: {HEADERBORDERCOLOR}; background-color: {MENUHOVER}; color: {MENUHOVERTEXT}; }
修改{MENUHOVER}为你需要的颜色代码
（5）菜单高亮文字颜色（鼠标悬停）
I、后台控制：后台-界面-风格管理-默认风格编辑找【菜单高亮文字颜色 {MENUHOVERTEXT}:#C3D3E4】修改#C3D3E4
II、css修改：在css_common.htm中找#menu a:hover { border-color: {HEADERBORDERCOLOR}; background-color: {MENUHOVER}; color: {MENUHOVERTEXT}; }
修改{MENUHOVERTEXT}为你需要的颜色代码
（6）文字颜色单独修改
由后台-界面-界面设置-导航栏-菜单名编辑进入，在内可以选择设置下划线、斜体、粗体；菜单字体颜色选择，默认是default属性在后台控制（上面介绍的后台控制），另外尚有有8种颜色可供选择！注意在此选择了颜色等操作上面介绍的高亮等特性就没了！
尾部颜色待续！

网络推手

12
评分人数
taihaol   金币 + 1 个




78137302
www.cd7.cn/bbs   金币 + 1 个




huyi23
精品文章   金币 + 1 个




水易寒
haha muzhi   金币 + 1 个




0304861985
精品文章   金币 + 2 个




没有箭的射手
辛苦了   金币 + 2 个




一文天
这是我来DZ见过最有用的帖子，抱歉只能评2?  金币 + 2 个




社区泡泡
很详尽的教程，多谢了！   金币 + 1 个




五月阳光
精品文章   金币 + 5 个 威望 + 5




huangliming
我很赞同   金币 + 1 个




單純で白いだ
本主题由 sonocc 于 2009-11-13 05:05 推荐收藏 分享 5252 0 顶 踩  
做站的，都不喜欢别人在你的站大量发AD，那你为啥就喜欢在DZ发呢，dz也很烦！请支持我们工作！！

《PHPer》电子杂志免费下载
回复 引用 报告 使用道具

  

发短消息
加为好友
sonocc 当前在线

UID440001 帖子1495 精华3 积分3674 威望198  金币292 个 体力674  激情431  阅读权限100 在线时间2330 小时 注册时间2006-09-14 最后登录2010-01-02   
Moderator



帖子1495 积分3674 威望198  金币292 个 体力674  注册时间2006-09-14  沙发
sonocc发表于 2008-12-21 22:50 | 只看该作者
可以互通论坛积分的网页游戏插件免费下载
本帖最后由 sonocc 于 2008-12-22 05:43 编辑

二、尾部Footer颜色
尾部Footer文字和链接分别显示在左右两边和上下两行，现分别介绍如何修改其颜色。
（一）尾部文字和链接颜色通用控制：
1、后台控制：后台-界面-风格管理-默认风格编辑找【页脚文字颜色 {FOOTERTEXT}:#8691A2】修改#8691A2为你需要颜色代码，则修改了尾部所有文字和链接的颜色
2、css控制：在css_common.htm中找#footer, #footer a { color: {FOOTERTEXT}; }
修改{FOOTERTEXT}为你需要的颜色代码如#FF0000。为了分别修改文字和链接的颜色，可以将#footer, #footer a { color: #FF0000; }
分开表达即#footer { color: #FFFF00; }
和#footer a { color: #FF0000; }
（二）尾部各文字和链接颜色分别控制：
1、右边第一行从左向右介绍
这一行显示网站名称、备案信息、“联系我们”、“论坛统计”和“Archiver”以及竖线分割线|
（1）网站名称颜色：在templates\default目录下打开css_append.htm，在尾部添加#footlink p strong a{color:red;}
（2）备案信息、“联系我们”、“论坛统计”和“Archiver”颜色
I、通用调整：这四个在css中是被一起控制的。在templates\default目录下打开css_append.htm，在尾部添加#footlink p a{color:#00f;}
II、单独调整：
A、备案信息颜色：在footer.htm中找<a href="http://www.miibeian.gov.cn/" target="_blank">$icp</a>
改为<a href="http://www.miibeian.gov.cn/" target="_blank"style="color:blue;">$icp</a>
另外备案信息的两个括号（）颜色在templates\default目录下打开css_append.htm，在尾部添加#footlink p {color:#0ff;}
B、“联系我们”颜色：在footer.htm中找<a href="mailtoadminemail">
改为<a href="mailtoadminemail"style="color:blue;">
C、“论坛统计”颜色：在footer.htm中找<a href="stats.php">
改为<a href="stats.php"style="color:blue;">
D、“Archiver”颜色：在footer.htm中找<a href="archiver/" target="_blank">
改为<a href="archiver/" target="_blank"style="color:blue;">
（3）竖线分割线|颜色：在templates\default目录下打开css_append.htm，在尾部添加#footlink p span.pipe {color:#ff0;}
2、右边第二行从左向右介绍
这一行一般显示为GMT+8, 2008-12-22 03:49, Processed in 0.119460 second(s), 4 queries.
（1）“GMT+8, 2008-12-22 03:49,”颜色：在templates\default目录下打开css_append.htm，在尾部添加#footlink p.smalltext{color:red;}
（2）“Processed in 0.119460 second(s), 4 queries”颜色：在templates\default目录下打开css_append.htm，在尾部添加#footlink p.smalltext span#debuginfo{color:#fff;}
3、左边第一行从左向右介绍
这行显示Powered by Discuz! 7.0.0 Licensed
（1）“Powered by”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p{color:#fff;}
（2）“Discuz!”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p strong a{color:#f0f;}
（3）“7.0.0”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p em{color:#0f0;}
（4）“Licensed”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo a{color:#f00;}
4、左边第二行从左向右介绍
这行显示&copy; 2001-2008 Comsenz Inc.
（1）“&copy; 2001-2008 ”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p.smalltext{color:#ff0;}
（2）“Comsenz Inc.”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p.smalltext a{color:#0ff;}

网络推手

二、尾部Footer颜色
尾部Footer文字和链接分别显示在左右两边和上下两行，现分别介绍如何修改其颜色。
（一）尾部文字和链接颜色通用控制：
1、后台控制：后台-界面-风格管理-默认风格编辑找【页脚文字颜色 {FOOTERTEXT}:#8691A2】修改#8691A2为你需要颜色代码，则修改了尾部所有文字和链接的颜色
2、css控制：在css_common.htm中找#footer, #footer a { color: {FOOTERTEXT}; }
修改{FOOTERTEXT}为你需要的颜色代码如#FF0000。为了分别修改文字和链接的颜色，可以将#footer, #footer a { color: #FF0000; }
分开表达即#footer { color: #FFFF00; }
和#footer a { color: #FF0000; }
（二）尾部各文字和链接颜色分别控制：
1、右边第一行从左向右介绍
这一行显示网站名称、备案信息、“联系我们”、“论坛统计”和“Archiver”以及竖线分割线|
（1）网站名称颜色：在templates\default目录下打开css_append.htm，在尾部添加#footlink p strong a{color:red;}
（2）备案信息、“联系我们”、“论坛统计”和“Archiver”颜色
I、通用调整：这四个在css中是被一起控制的。在templates\default目录下打开css_append.htm，在尾部添加#footlink p a{color:#00f;}
II、单独调整：
A、备案信息颜色：在footer.htm中找<a href="http://www.miibeian.gov.cn/" target="_blank">$icp</a>
改为<a href="http://www.miibeian.gov.cn/" target="_blank"style="color:blue;">$icp</a>
另外备案信息的两个括号（）颜色在templates\default目录下打开css_append.htm，在尾部添加#footlink p {color:#0ff;}
B、“联系我们”颜色：在footer.htm中找

1. <a href="mailto:$adminemail">

复制代码

改为：

1. <a href="mailto:$adminemail"style="color:blue;">

复制代码

C、“论坛统计”颜色：在footer.htm中找<a href="stats.php">
改为<a href="stats.php"style="color:blue;">
D、“Archiver”颜色：在footer.htm中找<a href="archiver/" target="_blank">
改为<a href="archiver/" target="_blank"style="color:blue;">
（3）竖线分割线|颜色：在templates\default目录下打开css_append.htm，在尾部添加#footlink p span.pipe {color:#ff0;}
2、右边第二行从左向右介绍
这一行一般显示为GMT+8, 2008-12-22 03:49, Processed in 0.119460 second(s), 4 queries.
（1）“GMT+8, 2008-12-22 03:49,”颜色：在templates\default目录下打开css_append.htm，在尾部添加#footlink p.smalltext{color:red;}
（2）“Processed in 0.119460 second(s), 4 queries”颜色：在templates\default目录下打开css_append.htm，在尾部添加#footlink p.smalltext span#debuginfo{color:#fff;}
3、左边第一行从左向右介绍
这行显示Powered by Discuz! 7.0.0 Licensed
（1）“Powered by”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p{color:#fff;}
（2）“Discuz!”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p strong a{color:#f0f;}
（3）“7.0.0”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p em{color:#0f0;}
（4）“Licensed”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo a{color:#f00;}
4、左边第二行从左向右介绍
这行显示&copy; 2001-2008 Comsenz Inc.
（1）“&copy; 2001-2008 ”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p.smalltext{color:#ff0;}
（2）“Comsenz Inc.”颜色：在templates\default目录下打开css_append.htm，在尾部添加#rightinfo p.smalltext a{color:#0ff;}

网络推手

更改“版主”和版主名字的颜色:
一、平板显示方式
在discuz.htm中找

1. 
   
2. <p >{lang forum_moderators}: $forum[moderators]</p>
   

复制代码

改为：

1. 
   
2. <p class="banzhu">{lang forum_moderators}: $forum[moderators]</p>
   

复制代码

1、“版主”两字颜色：
在本风格的css_append.htm中添加

1. 
   
2. .banzhu{color:#FF0;}
   

复制代码

2、版主名字颜色：
在本风格的css_append.htm中添加

1. .banzhu a{color:#F00;}

复制代码

二、下拉菜单方式

1、“版主”两字颜色：
在本风格的css_append.htm中添加

1. .dropmenu{color:#0FF;}

复制代码

2、版主名字颜色：
在本风格的css_append.htm中添加

1. .moderators a { color:#F00; }

复制代码