discuz_x3搜索框修改

　　昨天改了2个小时，也不理想，就在快要放弃之时，突然看到友情的清新版，立刻就想到替换，因为清新版搜索框非常漂亮，于是才1分钟，就搞定了，现在说下具体方法。


template\default\common\pubsearchform.htm

//搜索框放大镜

1. <td class="scbar_icon_td"></td>

复制代码

//搜索输入框

1. <td class="scbar_txt_td"><input type="text" name="srchtxt" id="scbar_txt" value="{lang enter_content}" autocomplete="off" x-webkit-speech speech /></td>

复制代码

//搜索框（文章、帖子、圈子、相册、用户等）选项

1. <td class="scbar_type_td"><a href="javascript:;" id="scbar_type" class="showmenu xg1 xs2" onclick="showMenu(this.id)" hidefocus="true">{lang search}</a></td>

复制代码

//搜索2字

1. <td class="scbar_btn_td"><button type="submit" name="searchsubmit" id="scbar_btn" sc="1" class="pn pnc" value="true"><strong class="xi2 xs2">{lang search}</strong></button></td>

复制代码

//热门搜索词设置

1. <!--{if $_G['setting']['srchhotkeywords']}-->
   
2.                                                         <strong class="xw1">{lang hot_search}: </strong>
   
3.                                                         <!--{loop $_G['setting']['srchhotkeywords'] $val}-->
   
4.                                                                 <!--{if $val=trim($val)}-->
   
5.                                                                         <!--{eval $valenc=rawurlencode($val);}-->
   
6.                                                                         <!--{block srchhotkeywords[]}-->
   
7.                                                                                 <!--{if !empty($searchparams[url])}-->
   
8.                                                                                         <a href="$searchparams[url]?q=$valenc&source=hotsearch{$srchotquery}" target="_blank" class="xi2" sc="1">$val</a>
   
9.                                                                                 <!--{else}-->
   
10.                                                                                         <a href="search.php?mod=forum&srchtxt=$valenc&formhash={FORMHASH}&searchsubmit=true&source=hotsearch" target="_blank" class="xi2" sc="1">$val</a>
    
11.                                                                                 <!--{/if}-->
    
12.                                                                         <!--{/block}-->
    
13.                                                                 <!--{/if}-->
    
14.                                                         <!--{/loop}-->
    
15.                                                         <!--{echo implode('', $srchhotkeywords);}-->
    
16.                                                 <!--{/if}-->

复制代码

template\default\common\header.htm

//搜索框

1. <!--{subtemplate common/pubsearchform}-->

复制代码

template\default\common\common.css

//输入框宽度修改

1. #scbar_txt { width: 400px; border: 1px solid #FFF; outline: none; font-size: 14px; }

复制代码

将 width: 400px; 修改成你需要的宽度，比方：width: 100px;

查找

1. #scbar { height: 44px; border: solid {SPECIALBG}; border-width: 0 1px 1px; background: url({IMGDIR}/search.png) repeat-x 0 0; line-height: 44px; overflow: hidden; }
   
2.                                 .scbar_icon_td { width: 50px; background: url({IMGDIR}/search.png) no-repeat 0 -74px; }
   
3.                                 .scbar_txt_td, .scbar_type_td { background: url({IMGDIR}/search.png) repeat-x 0 -222px; }
   
4.                                         #scbar_txt { width: 400px; border: 1px solid #FFF; outline: none; font-size: 14px; }
   
5.                                         .scbar_narrow #scbar_txt { width: 260px; }
   
6.                                 .scbar_btn_td { width: 67px; background: url({IMGDIR}/search.png) no-repeat 0 -296px; text-align: center; }
   
7.                                         #scbar_btn { margin: 0; padding: 0; border: none; background: transparent none; }
   
8.                                 .scbar_type_td { background: url({IMGDIR}/search.png) no-repeat 0 -370px; }
   
9.                                         #scbar_type { display: block; padding-left: 5px; text-align: left; text-decoration: none; }
   
10.                                                 #scbar_type_menu { margin-top: -8px; }
    
11.                                 #scbar_hot { padding-left: 8px; height: 45px; overflow: hidden; }
    
12.                                         #scbar_hot strong, #scbar_hot a { float: left; margin-right: 8px; white-space: nowrap; }

复制代码

在下面添加

1. /* 搜索条 by Pony 1203201332 */
   
2. #scbar { margin-top: 10px; border: 1px solid {COMMONBORDER}; background: #F8F8F8; border-radius: 3px; box-shadow: 0 0 10px #FFF inset; }
   
3.         .scbar_icon_td { width: 10px; background: none; }
   
4.         .scbar_type_td { width: 69px; background: url({STYLEIMGDIR}/search.png) no-repeat 0 -365px; }
   
5.                 #scbar_type { padding-left: 10px; background: url({STYLEIMGDIR}/search.png) no-repeat -20px -449px; }
   
6.         .scbar_txt_td { background: url({STYLEIMGDIR}/search.png) repeat-x 0 -217px; }
   
7.                 #scbar_txt { padding-left: 5px; font-size: 12px; }
   
8.         .scbar_btn_td { width: 80px; background: url({STYLEIMGDIR}/search.png) no-repeat 0 -291px; }
   
9.                 #scbar_btn { padding-left: 20px; width: 75px; letter-spacing: 5px; text-align: left; color: #FFF; box-shadow: none; }
   
10.                 .ie7 #scbar_btn { padding-left: 25px; }
    
11. #scbar_type_menu { margin-top: -11px; }

复制代码

//精简css

1. #scbar { height: 44px; border: solid {SPECIALBG}; border-width: 0 1px 1px; background: url({IMGDIR}/search.png) repeat-x 0 0; line-height: 44px; overflow: hidden; }
   
2.                                 .scbar_icon_td { width: 50px; background: url({IMGDIR}/search.png) no-repeat 0 -74px; }
   
3.                                 .scbar_txt_td, .scbar_type_td { background: url({IMGDIR}/search.png) repeat-x 0 -222px; }
   
4.                                         #scbar_txt { width: 100px; border: 1px solid #FFF; outline: none; font-size: 14px; }
   
5.                                         .scbar_narrow #scbar_txt { width: 260px; }
   
6.                                         #scbar_btn { margin: 0; padding: 0; border: none; background: transparent none; }
   
7.                                 .scbar_type_td { background: url({IMGDIR}/search.png) no-repeat 0 -370px; }
   
8.                                         #scbar_type { display: block; padding-left: 5px; text-align: left; text-decoration: none; }
   
9.                                 #scbar_hot { padding-left: 8px; height: 45px; overflow: hidden; }
   
10.                                         #scbar_hot strong, #scbar_hot a { float: left; margin-right: 8px; white-space: nowrap; }
    
11. /* 搜索条 by Pony 1203201332 */
    
12. #scbar { margin-top: 10px; border: 1px solid {COMMONBORDER}; background: #F8F8F8; border-radius: 3px; box-shadow: 0 0 10px #FFF inset; }
    
13.         .scbar_icon_td { width: 10px; background: none; }
    
14.         .scbar_type_td { width: 69px; background: url({STYLEIMGDIR}/search.png) no-repeat 0 -365px; }
    
15.                 #scbar_type { padding-left: 10px; background: url({STYLEIMGDIR}/search.png) no-repeat -20px -449px; }
    
16.         .scbar_txt_td { background: url({STYLEIMGDIR}/search.png) repeat-x 0 -217px; }
    
17.                 #scbar_txt { padding-left: 5px; font-size: 12px; }
    
18.         .scbar_btn_td { width: 80px; background: url({STYLEIMGDIR}/search.png) no-repeat 0 -291px; text-align: center; }
    
19.                 #scbar_btn { padding-left: 20px; width: 75px; letter-spacing: 5px; text-align: left; color: #FFF; box-shadow: none; }
    
20.                 .ie7 #scbar_btn { padding-left: 25px; }
    
21. #scbar_type_menu { margin-top: -11px; }

复制代码

修改前：


修改后：




搜索框附件包：
discuz_x3搜索框修改.rar (55.51 KB, 下载次数: 3582)

2013-5-15 22:05 上传

点击文件名下载附件

前排支持！！！很不错 ~~~。

为前排支持~~~~~~~~成都厂房网www.028cf.net。。。。不错！~~~~~~~~~

挺好的           

  前面的代码需要替换吗？

敖志 发表于 2013-3-12 19:45
前面的代码需要替换吗？

不用哦，前面是具体代码，如果自己想改其它的样式，就需要改这部分。

关注了, 支持一下 ~~~



++++++++++++++++++++签名档+++++++++++++++++++++++++
深蓝应用Discuz!6大盈利插件:交友,团购,订餐,房产,招聘,二手分类信息系统.
深蓝所有系统开发目的均以无人值守, 全自动盈利为核心. 社区6大盈利系统. 解放站长双手, 让您的网站24小时不停为您赚钱!!
此信息来自深蓝应用:www.discuzcms.com
+++++++++++++++++++++++++++++++++++++++++++++++++

关注了, 支持一下 ~~~



++++++++++++++++++++签名档+++++++++++++++++++++++++
中国的互联网时代才刚刚起步, 所有的站长同事们, 加油!
大家放心过一百年网络也不会垮, 一个城市最少一半的网民, 未来网民会越来越多.
您开门面店顶多覆盖一个街道, 那是已经过时的东西, 运营网络就能接全市的单子.
深蓝助力大家成为中国互联网时代的佼佼者, 时刻把握时代的命脉.
此信息来自深蓝应用:www.discuzcms.com
+++++++++++++++++++++++++++++++++++++++++++++++++

正好需要，谢谢了

关注了, 支持一下 ~~~



++++++++++++++++++++签名档+++++++++++++++++++++++++
应用中心在线购买自动安装.
一次购买, 终身免费售后, 永久免费升级
此信息来自深蓝应用:www.discuzcms.com
+++++++++++++++++++++++++++++++++++++++++++++++++