1、主导航栏修改为通栏的方法
只要修改模板的header.htm和对应的CSS文件就可以实现,CSS文件每个模板命名不同,所以得自己找一下。
以下为个人摸索出来的经验,适合新手,大神请飘过。
1、首先准备好导航条的背景图片,一般为nv.png,有些模板的图片的名称和后缀可能不一样,你就按照模板的图片的名称和后缀用PS或CDR去做就行了,图片的宽度一般用1px,高度要和模板原来的导航背景图片保持一致。要是你不需要图片也可以,到后台设置颜色就行,后面的步骤有说到的。
2、登录后台,选择“界面”—“风格管理”,找到你在用的模板,点击编辑,如下图:
(1) 需要使用背景图片的
页面往下
2、拉找到“菜单”,修改导航条背景图片名称,一般为:nv.png,有些模板可能会不一样,按实际名称修改即可,属性:repeat-x 0 0
如下图:
完成输入后,页面拉到最后,点击“提交”后就已经设置好,未提交的话设置无效。
(2) 不需要使用背景图片的
页面往下拉找到“菜单”,如(1)的图,图片背景的话就是设置第二、三两个方框,而背景颜色的话只需设置第一个方框,可以在PS/CDR或网络查找你需要的颜色代码(16进制),粘贴到第一个方框,点击“提交”后就可以完成设置了。
3、后台已经设置好,现在就要修改你正在使用的模板中的header.htm文件,一般在模板中的common文件夹
3、中,找到后用记事本或DW打开,在118行左右找到以下代码:
//这个CSS就是定义页面宽度的
$_G[setting][menunavs]
需要在上面的代码加入三个DIV,并需要增加CSS样式。
修改为:
//此处删除class="wp"
//此处加入第一个DIV,样式为class="wp"
//此处为第一个DIV结束
//此处加入第二个DIV,样式为class="wpdh"
//此处为第二个DIV结束
15、 //此处加入第三个DIV,样式为class="wpdh"
$_G[setting][menunavs]
18、
//此处为第三个DIV结束
4、增加CSS样式
在你使用的模板中找到CSS文件,一般也是在common文件夹中的,在适当位置加入以下代码:
/* 定义导航条宽度 */
.wpdh { margin: 0 auto; width: 960px; } #wpdh .wpdh { width: auto; }
以上步骤完成后,把修改后文件上传,覆盖原来的两个文件,到后台更新缓存即可看到导航条已经变成了通栏导航了,如下图:
至此已经完成了通栏导航的修改。