文理人

 找回密码
 快速注册
文理人 首页 资源共享 查看内容

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

2013-5-19 01:25| 发布者: 眼镜蛇| 查看: 2789| 评论: 21|原作者: 眼镜蛇

摘要: 鉴于很多站长要求我分享现在网站使用的导航栏,其实只是再当初的“仿果粒橙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-11-20 22:36

    引用

  • 谷泉2011 :
    哈哈 非常感谢大哥   请问这模版可以设置默认为宽屏不?

    2011-11-21 08:30

    引用

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

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

    2011-11-21 08:41

    引用

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

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

    2011-11-21 10:41

    引用

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

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

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

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

    2011-11-21 11:33

    引用

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

    未命名.jpg

    我安装了 是这个样子的?

    2011-11-21 12:44

    引用

  • 眼镜蛇 :
    谷泉2011 发表于 2011-11-21 12:44
    我安装了 是这个样子的?

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

    QQ截图20111121130722.jpg

    2011-11-21 13:10

    引用

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

    [attach]19735[/attach]




    未命名.jpg





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

    2011-11-21 14:48

    引用

  • 谷泉2011 :
    谷泉2011 发表于 2011-11-21 14:48
    已经按大哥的方式设置 可是左边还有一点白色的。        hualuobo.com 这是我的站 ...

    未命名.jpg   这左边还有点白色的 ~~~

    2011-11-21 14:49

    引用

  • 眼镜蛇 :
    谷泉2011 发表于 2011-11-21 14:48
    已经按大哥的方式设置 可是左边还有一点白色的。        hualuobo.com 这是我的站 ...

    你的网站打不开 我晚上回去看·······

    请确认CSS文件也修改过了?

    2011-11-21 15:10

    引用

  • 谷泉2011 :
    眼镜蛇 发表于 2011-11-21 15:10
    你的网站打不开 我晚上回去看·······

    请确认CSS文件也修改过了?

    css我都修改  了      我的网站打得开啊   你的站不准我发链接  所以 我分开发的域名

    2011-11-21 15:13

    引用

  • 谷泉2011 :
    谷泉2011 发表于 2011-11-21 14:48
    已经按大哥的方式设置 可是左边还有一点白色的。        hualuobo.com 这是我的站 ...

    未命名.jpg


    大哥救命啊啊  怎么我的导航现在是白色的  了   

    是不是哪个代码有误??


    我按你的方法一步一步来的 ,

    2011-11-21 15:54

    引用

  • 眼镜蛇 :
    谷泉2011 发表于 2011-11-21 15:54
    大哥救命啊啊  怎么我的导航现在是白色的  了   

    是不是哪个代码有误??

    我回家了
    刚看你的站没用我的风格

    不知道问题解决了没
    还要不要解决

    需要再联系吧

    2011-11-21 21:37

    引用

  • 眼镜蛇 :
    谷泉2011 发表于 2011-11-21 15:54
    大哥救命啊啊  怎么我的导航现在是白色的  了   

    是不是哪个代码有误??

    我已经在我的本地站试了一次了
    按我写的步骤来操作没有问题
    还需要使用这个导航的话请自己对照看看设置是否正确

    2011-11-21 22:00

    引用

  • 谷泉2011 :
    眼镜蛇 发表于 2011-11-21 22:00
    我已经在我的本地站试了一次了
    按我写的步骤来操作没有问题
    还需要使用这个导航的话请自己对照看看设置 ...

    大哥  昨晚导航搞不了  所以暂时换个模版 先用下 。 现在我换上你的模版了  而且按照你最新的修改方法修改了一遍  怎么还有白色的? 你现在去看下咯     实在不行你给我那两个修改过的源文件。我覆盖就可以了 多谢了~~

    2011-11-22 08:24

    引用

  • 眼镜蛇 :
    谷泉2011 发表于 2011-11-22 08:24
    大哥  昨晚导航搞不了  所以暂时换个模版 先用下 。 现在我换上你的模版了  而且按照你最新的修改方法修改 ...

    后台编辑风格:
    菜单高亮背景 {MENUHOVERBGCOLOR},{MENUHOVERBGCODE}:nv_a.gif

    不是你现在填的nv_bg.gif


    照着我的说明你都能填错!!!




    2011-11-22 08:32

    引用

  • 眼镜蛇 :
    9楼10楼对比见真相!

    2011-11-22 08:39

    引用

  • 谷泉2011 :
    眼镜蛇 发表于 2011-11-22 08:39
    9楼10楼对比见真相!

    未命名.jpg 哈哈  把那个改了  解决的差不多了  ~~~~


    为什么鼠标放上面会出现这个?

    2011-11-22 09:14

    引用

简洁版|文理人 ( 京ICP备19054389号-3 )

GMT+8, 2024-3-29 10:06 , Processed in 0.045592 second(s), 23 queries .

Powered by Discuz! X3.4

© 2008-2013 WenLiRen

返回顶部