模板制作修改 导航上加入搜索条!挺实用的

  [复制链接]
DiscuzUI 发表于 2014-8-28 21:08:16 [模板制作修改] 显示全部楼层 |阅读模式 上一主题 下一主题
discuz使用视频教程
31
31

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
本帖最后由 discuzUI 于 2014-8-28 21:13 编辑

感觉像是模仿Phpwind 9的,先上上图吧!注意:非官方默认模板的修改方法大概一致,请谨慎修改
捕获5.PNG
Step:1  打开template/default/common/common.css,找到以下代码,大概在595~607的位置
  1. #scbar { overflow: hidden; height: 42px; line-height: 42px; border-top: 1px solid #FFF; border-bottom: 1px solid #E9EFF5; background: #E8EFF5; }
  2.                                 .scbar_icon_td { width: 21px; background: url({IMGDIR}/search.png) no-repeat 0 -50px; }
  3.                                 .scbar_txt_td, .scbar_type_td { background: url({IMGDIR}/search.png) repeat-x 0 -93px; }
  4.                                         #scbar_txt { width: 400px; border: 1px solid #FFF; outline: none; }
  5.                                         .scbar_narrow #scbar_txt { width: 260px; }
  6.                                 .scbar_btn_td { width: 38px; background: url({IMGDIR}/search.png) no-repeat 8px -142px; }
  7.                                         #scbar_btn { margin: 0; padding: 0; border: none; background: transparent none; box-shadow: none; }
  8.                                                 #scbar_btn strong { line-height: 84px; }
  9.                                 .scbar_type_td { width: 61px; background: url({IMGDIR}/search.png) no-repeat 0 -193px; }
  10.                                         #scbar_type { display: block; padding-left: 10px; text-align: left; text-decoration: none; }
  11.                                                 #scbar_type_menu { margin-top: -8px; }
  12.                                 #scbar_hot { padding-left: 8px; height: 45px; overflow: hidden; }
  13.                                         #scbar_hot strong, #scbar_hot a { float: left; margin-right: 8px; white-space: nowrap;
复制代码
将其替换为以下代码:
游客,如果您要查看本帖隐藏内容请回复
Step:2  打开template/default/common/header.htm,找到<!--{subtemplate common/pubsearchform}-->,并删除。之后找到<!--{hook/global_nav_extra}-->,替换为
游客,如果您要查看本帖隐藏内容请回复

Step:3  打开template/default/common/pubsearchform.htm,将以下代码,大概在41~75的位置
  1. <table cellspacing="0" cellpadding="0">
  2.                         <tr>
  3.                                 <td class="scbar_icon_td"></td>
  4.                                 <td class="scbar_txt_td"><input type="text" name="srchtxt" id="scbar_txt" value="{lang enter_content}" autocomplete="off" x-webkit-speech speech /></td>
  5.                                 <td class="scbar_type_td"><a href="javascript:;" id="scbar_type" class="xg1" onclick="showMenu(this.id)" hidefocus="true">{lang search}</a></td>
  6.                                 <td class="scbar_btn_td"><button type="submit" name="searchsubmit" id="scbar_btn" sc="1" class="pn pnc" value="true"><strong class="xi2">{lang search}</strong></button></td>
  7.                                 <td class="scbar_hot_td">
  8.                                         <div id="scbar_hot">
  9.                                                 <!--{if $_G['setting']['srchhotkeywords']}-->
  10.                                                         <strong class="xw1">{lang hot_search}: </strong>
  11.                                                         <!--{loop $_G['setting']['srchhotkeywords'] $val}-->
  12.                                                                 <!--{if $val=trim($val)}-->
  13.                                                                         <!--{eval $valenc=rawurlencode($val);}-->
  14.                                                                         <!--{block srchhotkeywords[]}-->
  15.                                                                                 <!--{if !empty($searchparams[url])}-->
  16.                                                                                         <a href="$searchparams[url]?q=$valenc&source=hotsearch{$srchotquery}" target="_blank" class="xi2" sc="1">$val</a>
  17.                                                                                 <!--{else}-->
  18.                                                                                         <a href="search.php?mod=forum&srchtxt=$valenc&formhash={FORMHASH}&searchsubmit=true&source=hotsearch" target="_blank" class="xi2" sc="1">$val</a>
  19.                                                                                 <!--{/if}-->
  20.                                                                         <!--{/block}-->
  21.                                                                 <!--{/if}-->
  22.                                                         <!--{/loop}-->
  23.                                                         <!--{echo implode('', $srchhotkeywords);}-->
  24.                                                 <!--{/if}-->
  25.                                         </div>
  26.                                 </td>
  27.                         </tr>
  28.                 </table>
  29.         </form>
  30. </div>
  31. <ul id="scbar_type_menu" class="p_pop" style="display: none;"><!--{echo implode('', $slist);}--></ul>
  32. <script type="text/javascript">
  33.         initSearchmenu('scbar', '$searchparams[url]');
  34. </script>
  35. <!--{/if}-->
复制代码
替换为:
游客,如果您要查看本帖隐藏内容请回复

Step:4  将图片上传到static/image/common目录下,请不要更改大小写
游客,如果您要查看本帖隐藏内容请回复



参与人数 1元宝 +10 收起 理由
ARCHY + 10 赞一个!

查看全部评分总评分 : 元宝 +10





上一篇:Discuz X3.2 快捷导航美化,挺漂亮的
下一篇:分享自已修改的一个DIY五格

大神点评153

ARCHY明星会员实名认证 发表于 2014-8-29 21:58:45 [模板制作修改] 显示全部楼层
感谢分享
大道信息科技 发表于 2014-8-30 08:58:19 [模板制作修改] 显示全部楼层
前排支持 谢谢分享
滕州网站建设:http://www.dadaoinfo.com
longtaidi 发表于 2014-8-30 09:48:50 [模板制作修改] 显示全部楼层
感谢分享
小小军 发表于 2014-8-30 09:57:42 [模板制作修改] 显示全部楼层
导航上加入搜索条!挺实用的
bluesteng 发表于 2014-8-30 10:58:38 [模板制作修改] 显示全部楼层
很深奥啊
hzsx 发表于 2014-8-30 22:33:41 [模板制作修改] 显示全部楼层
很好!学习下
jingjinxin 发表于 2014-8-31 10:05:10 [模板制作修改] 显示全部楼层
挺实用的!
感谢分享!
青盏一座 发表于 2014-8-31 11:22:02 [模板制作修改] 显示全部楼层
修改死我了
manlw828 发表于 2014-8-31 11:57:50 [模板制作修改] 显示全部楼层
看看太麻烦了
阿汤哥的微笑 发表于 2014-8-31 15:27:32 [模板制作修改] 显示全部楼层
学习一下
paddy 发表于 2014-8-31 15:47:43 [模板制作修改] 显示全部楼层
啦一个 看看  究竟
焦点网 发表于 2014-8-31 22:17:04 [模板制作修改] 显示全部楼层
感谢分享
隆回门户网 发表于 2014-9-1 00:19:11 [模板制作修改] 显示全部楼层
学习下
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

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