2011年5月1日星期日

Discuz! X1.5自己修改头部模板实例1

自己修改头部背景,菜单,演示效果见: www.tefee.net

一.首先上传网站标志 logo.png   头部背景图片 header-bg.gif   菜单背景图片 menu-tab.gif  菜单鼠标盘旋背景图片 menu-tabHover.gif 到目录

* 网站标志logo.png要求高度为200px 宽度可适当自定

二.直接修改/template/default/common/common.css文件,不去后台再设置了。

1.打开/template/default/common/common.css文件

2.修改头部背景,找到302行 #hd { margin-bottom: 10px; border-bottom: {HEADERBORDER} solid {SPECIALBORDER}; {HEADERBGCODE} }

把{HEADERBGCODE}替换成自己的背景代码如:BACKGROUND: url({IMGDIR}/header-bg.gif) #84c2f2 repeat-x center top;

3.修改菜单,找到328行

#nv li { float: left; padding-right: 1px; height: 33px; line-height: 33px; background: url({IMGDIR}/nv_a.png) no-repeat 100% 0; font-weight: 700; font-size: 14px; }

替换成自己的菜单背景如:

#nv li {float: left; padding-right: 1px; height: 33px; line-height: 33px; BACKGROUND: url({IMGDIR}/menu-tab.gif) #83b9e4 no-repeat left -15px;  font-weight: 700; font-size: 14px; }   

然后在此行后面增加新内容使鼠标移过菜单变色:

#nv li :hover{float: left; padding-right: 1px; height: 33px; line-height: 33px; BACKGROUND: url({IMGDIR}/menu-tabHover.gif) #83b9e4 no-repeat left -15px;  font-weight: 700; font-size: 14px; }   

4.修改菜单文字在333行 #nv a { color: {MENUTEXT}; } 后面增加

#nv a :hover{ color:#303030; }

三,进入后台管理,界面-风格管理-编辑 清空所有关于菜单栏目的值,

最好,在后台管理 工具 更新缓存 演示:tefee.net