发新帖
  2. 建站技术
  3. discuz X3搜索修改美化教程

discuz X3搜索修改美化教程 [复制链接]

moqu8 2017-10-1
5 0
今天要和大家分享是的discuz X3 搜索框修改教程，我们提供两种修改方案，希望能够帮助到discuz的应用者们。

方案一：
1、首先大家要了解discuz的搜索的源文件在哪里：./Template/default/common/pubsearchform.htm

找到这个文件后，复制该文件到你所在的论坛模板风格的common文件夹下，我的风格文件夹为template/shuyangweb，建议大家重新命名该文件pubsearchform_cls.htm，那么放入后为：template/shuyangweb/pubsearchform_cls.htm

2、直接将12~70行的代码修改为如下的代码

  1. <div id="search" class="{if $_G['setting']['srchhotkeywords'] && count($_G['setting']['srchhotkeywords']) > 5}scbar_narrow {/if}cl">
  2.     <form id="scbar_form" method="{if $_G[fid] && !empty($searchparams[url])}get{else}post{/if}" autocomplete="off" onsubmit="searchFocus($('scbar_txt'))" action="{if $_G[fid] && !empty($searchparams[url])}$searchparams[url]{else}search.php?searchsubmit=yes{/if}" target="_blank">
  3.         <input type="hidden" name="mod" id="scbar_mod" value="search" />
  4.         <input type="hidden" name="formhash" value="{FORMHASH}" />
  5.         <input type="hidden" name="srchtype" value="title" />
  6.         <input type="hidden" name="srhfid" value="$_G[fid]" />
  7.         <input type="hidden" name="srhlocality" value="$_G['basescript']::{CURMODULE}" />
  8.         <!--{if !empty($searchparams[params])}-->
  9.             <!--{loop $searchparams[params] $key $value}-->
  10.             <!--{eval $srchotquery .= '&' . $key . '=' . rawurlencode($value);}-->
  11.             <input type="hidden" name="$key" value="$value" />
  12.             <!--{/loop}-->
  13.             <input type="hidden" name="source" value="discuz" />
  14.             <input type="hidden" name="fId" id="srchFId" value="$_G[fid]" />
  15.             <input type="hidden" name="q" id="cloudsearchquery" value="" />
  16.             <div style="display: none; position: absolute; top:37px; left:44px;" id="sg">
  17.                 <div id="st_box" cellpadding="2" cellspacing="0"></div>
  18.             </div>
  19.         <!--{/if}-->
  20.         <table cellspacing="0" cellpadding="0">
  21.             <tr>
  22.                 <td class="search_icon_td"></td>
  23.                 <td class="search_txt_td"><input type="text" name="srchtxt" id="search_txt" value="{lang enter_content}" autocomplete="off" x-webkit-speech speech /></td>
  24.                 <td class="search_btn_td"><button type="submit" name="searchsubmit" id="search_btn" sc="1" class="search_pn" value="true"><strong class="xi2">{lang search}</strong></button></td>
  25.             </tr>
  26.         </table>
  27.     </form>
  28. </div>
直接刷新首页后，会看到搜索框直接变成了如下图的效果：

3、我们从template/shuyangweb/common/header.htm中找到代码<!--{subtemplate common/pubsearchform}-->修改为<!--{subtemplate common/pubsearchform_cls}-->刷新预览下就能看到效果。
注：如果你觉得搜索框的位置不好的话，可以将<!--{subtemplate common/pubsearchform_cls}-->任意的放到其他的为止，最好前后加个DIV块，这样方便控制搜索框。

方案二：
清新版搜索框非常漂亮，现在说下具体修改方法。

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







最新回复 (0)
返回
版块热门：
支持中心
邮箱：winkill2012@qqcom
新站优化中！部分功能尚未完善，敬请谅解！
支持中心