文理人BBS自用仿绿色果粒模板导航栏修改方法[version:lcl_guoli_dx2.0]

鉴于很多站长要求我分享现在网站使用的导航栏，其实只是再当初的“仿果粒橙DX2.0”模板上稍作修改，
现将修改方法总结如下：
-----------------------------------------------------------------------------------


1.解压下载得到的nv_upload.rar文件，将对应的upload中的文件上传到网站目录；（下载地址：http://www.discuz.net/thread-2238172-1-1.html）
2.打开./template/lcl_guoli_dx2.0/common/header.htm，
查找：

1. <div id="nv">
   
2.                                         <a href="javascript:;" id="qmenu" onmouseover="showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});">{lang my_nav}</a>
   
3.                                         <ul>
   
4.                                                 <!--{loop $_G['setting']['navs'] $nav}-->
   
5.                                                         <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
   
6.                                                 <!--{/loop}-->
   
7.                                         </ul>
   
8.                                 </div>

复制代码

替换为：

1. <div id="nv_left">
   
2.                                 <div id="nv_right">
   
3.                                 <div id="nv">
   
4.                                         <a href="javascript:;" id="qmenu" onmouseover="showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});">{lang my_nav}</a>
   
5.                                         <ul>
   
6.                                                 <!--{loop $_G['setting']['navs'] $nav}-->
   
7.                                                         <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
   
8.                                                 <!--{/loop}-->
   
9.                                         </ul>
   
10.                                 </div>
    
11.                                                         </div>
    
12.                                                         </div>

复制代码

3.打开./template/lcl_guoli_dx2.0/common/extend_common.css，
查找：

1. /* 重定义全站导航 --> nv */
   
2. #nv {
   
3. height: 36px;
   
4. }
   
5. #nv li.a {
   
6. background: url("lcl/guoli/nv_a.png") no-repeat right -36px;
   
7. line-height: 36px;
   
8. margin-left: 2px;
   
9. margin-right: 2px;
   
10. }
    
11. #nv li {
    
12. float: left;
    
13. height: 36px;
    
14. line-height: 36px;
    
15. font-weight: 700;
    
16. font-size: 14px;
    
17. }
    
18. #nv li a {
    
19. padding-top: 0px;
    
20. padding-right: 15px;
    
21. padding-bottom: 0px;
    
22. padding-left: 15px;
    
23. height: 36px;
    
24. margin-left: 1px;
    
25. margin-right: 1px;
    
26. }
    
27. #nv li.a a {
    
28. color: #360;
    
29. }
    
30. #nv li a:hover {
    
31. background: url({IMGDIR}/nv_a.png) no-repeat right -36px;
    
32. color: #360;
    
33. }

复制代码

替换为：

1. /* 重定义全站导航 --> nv */
   
2. #nv { height: 45px; }
   
3.         
   
4.         #nv_left { background: url("lcl/guoli/nv_left.gif") no-repeat 0 0; height: 45px; padding-left: 4px; }
   
5.         #nv_right { background: url("lcl/guoli/nv_right.gif") no-repeat right top; padding-right: 4px; }
   
6.         #nv li { background: url("lcl/guoli/nv_line.gif") no-repeat 100% 30%; height: 43px; line-height: 40px; }
   
7.                 .ie_all #nv li { line-height: 40px; }
   
8.                 #nv li a { height: 43px; }
   
9.                         #nv li.a a { background: url("lcl/guoli/nv_aright.gif") no-repeat 0 0; }
   
10.                         #nv li a:hover { background: url("lcl/guoli/nv_aright.gif") no-repeat 0 0; color: #360; text-decoration: none; }
    
11.                         .ie6 #nv li a:hover { background:none; }
    
12.                                                 #nv li:hover { background: url("lcl/guoli/nv_a.gif") no-repeat 100% 0; }

复制代码

4.进入网站后台，进入风格编辑界面：

菜单背景颜色 {MENUBGCOLOR},{MENUBGCODE}:第一行留空，第二行设为nv_bg.jpg，第三行设为repeat-x 0 0；
菜单高亮背景 {MENUHOVERBGCOLOR},{MENUHOVERBGCODE}:第一行留空，第二行设为nv_a.gif，第三行设为no-repeat 100% 0；
菜单高亮文字颜色 {MENUHOVERTEXT}:#360;


更新缓存即可。


-------------------------------------

整理仓促，如有问题，请在发布帖或者本贴留言提问，谢谢！

-------------------------------------

因为有站长反应修改不成功，所以我有在本地按照说明的步骤尝试了一次 ，成功修改！

【操作中可能会出错的地方】
1.查找和替换代码的时候操作不当，或者复制粘贴后格式（换行）有错乱
--->自行稍作排版就可以了，比如“/* 重定义全站导航 --> nv */”这个是注释，如果中间换行可能影响代码作用，请检查确认它是单独的一行，或者可以将本行删去。

2.不要忘了后台对风格选项需要编辑的几个参数设置
--->步骤4中仅橙色的内容为需要填的参数，注意不要填写多余的符号，诸如“、”或者“；”，否则会导致代码解析错误，样式控制不生效。

@谷泉2011@拉莫斯

@谷泉2011，你懂不？我不懂

哈哈 非常感谢大哥   请问这模版可以设置默认为宽屏不？

谷泉2011 发表于 2011-11-21 08:30
哈哈 非常感谢大哥   请问这模版可以设置默认为宽屏不？

不可以
因为门户无法宽屏我需要整体保持一致
请后台关闭宽屏切换功能

眼镜蛇 发表于 2011-11-21 08:41
不可以
因为门户无法宽屏我需要整体保持一致
请后台关闭宽屏切换功能

哦 可是我没安装门户 因为大哥没共享出门户出来》

谷泉2011 发表于 2011-11-21 10:41
哦 可是我没安装门户 因为大哥没共享出门户出来》

这个其实主要是受页面主体背景所限，跟门户关系不大，你要设置宽屏的话就得把现在的圆角页面背景去掉，并且删除页面增加的div标签。

否则开启了宽屏也不会成功

一定要改的话就自己研究研究吧
宽屏不是我设计的方向这里暂不细讲

眼镜蛇 发表于 2011-11-21 11:33
这个其实主要是受页面主体背景所限，跟门户关系不大，你要设置宽屏的话就得把现在的圆角页面背景去掉，并 ...

我安装了 是这个样子的？

谷泉2011 发表于 2011-11-21 12:44
我安装了 是这个样子的？

后台编辑风格，这里如图设置下看看

眼镜蛇 发表于 2011-11-21 13:10
后台编辑风格，这里如图设置下看看

已经按大哥的方式设置 可是左边还有一点白色的。        hualuobo.com 这是我的站 马上大哥帮忙看下