Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[展示] DZ7.0颜色修改教程之一:页头文字、导航菜单颜色和尾部颜色

[复制链接]
hblongqiang 发表于 2009-3-11 13:20:53 | 显示全部楼层 |阅读模式
友情提示
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中找  代码:
#header { margin-bottom: 8px; width: 100%; border-bottom: {HEADERBORDER} solid
{HEADERBORDERCOLOR}; {HEADERBGCODE}; }

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

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

找到
代码:
#umenu, #umenu a, #umenu .pipe { color: {HEADERTEXT}; }
修改{HEADERTEXT}为你需要的颜色代码,如#FFFFFF;其中#umenu .pipe是定义了竖线分割线颜色
(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种颜色可供选择!注意在此选择了颜色等操作上面介绍的高亮等特性就没了!

尾部颜色待续!
杀星 发表于 2011-2-10 13:25:21 | 显示全部楼层
我是想问文字内容的修改,不是颜色
回复

使用道具 举报

染年 发表于 2011-12-3 22:35:39 | 显示全部楼层
这个帖子好。
不知道有木有X2的方法
回复

使用道具 举报

yipinguo 发表于 2011-12-4 13:47:46 | 显示全部楼层
帖子蛮不错的
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-29 22:42 , Processed in 0.030724 second(s), 7 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表