discuz X3搜索修改美化教程

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

方案一：

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

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

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

直接刷新首页后，会看到搜索框直接变成了如下图的效果：

3、我们从template/shuyangweb/common/header.htm中找到代码修改为刷新预览下就能看到效果。

注：如果你觉得搜索框的位置不好的话，可以将任意的放到其他的为止，最好前后加个DIV块，这样方便控制搜索框。

方案二：

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

templatedefaultcommonpubsearchform.htm

//搜索框放大镜

//搜索输入框

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

{lang search}

//搜索2字

{lang search}

//热门搜索词设置

{lang hot_search}:

$val

$val

templatedefaultcommonheader.htm

//搜索框

templatedefaultcommoncommon.css

//输入框宽度修改

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

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

查找

#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; }

.scbar_icon_td { width: 50px; background: url({IMGDIR}/search.png) no-repeat 0 -74px; }

.scbar_txt_td, .scbar_type_td { background: url({IMGDIR}/search.png) repeat-x 0 -222px; }

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

.scbar_narrow #scbar_txt { width: 260px; }

.scbar_btn_td { width: 67px; background: url({IMGDIR}/search.png) no-repeat 0 -296px; text-align: center; }

#scbar_btn { margin: 0; padding: 0; border: none; background: transparent none; }

.scbar_type_td { background: url({IMGDIR}/search.png) no-repeat 0 -370px; }

#scbar_type { display: block; padding-left: 5px; text-align: left; text-decoration: none; }

#scbar_type_menu { margin-top: -8px; }

#scbar_hot { padding-left: 8px; height: 45px; overflow: hidden; }

#scbar_hot strong, #scbar_hot a { float: left; margin-right: 8px; white-space: nowrap; }

在下面添加

/* 搜索条 by Pony 1203201332 */

#scbar { margin-top: 10px; border: 1px solid {COMMONBORDER}; background: #F8F8F8; border-radius: 3px; box-shadow: 0 0 10px #FFF inset; }

.scbar_icon_td { width: 10px; background: none; }

.scbar_type_td { width: 69px; background: url({STYLEIMGDIR}/search.png) no-repeat 0 -365px; }

#scbar_type { padding-left: 10px; background: url({STYLEIMGDIR}/search.png) no-repeat -20px -449px; }

.scbar_txt_td { background: url({STYLEIMGDIR}/search.png) repeat-x 0 -217px; }

#scbar_txt { padding-left: 5px; font-size: 12px; }

.scbar_btn_td { width: 80px; background: url({STYLEIMGDIR}/search.png) no-repeat 0 -291px; }

#scbar_btn { padding-left: 20px; width: 75px; letter-spacing: 5px; text-align: left; color: #FFF; box-shadow: none; }

.ie7 #scbar_btn { padding-left: 25px; }

#scbar_type_menu { margin-top: -11px; }

//精简css

#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; }

.scbar_icon_td { width: 50px; background: url({IMGDIR}/search.png) no-repeat 0 -74px; }

.scbar_txt_td, .scbar_type_td { background: url({IMGDIR}/search.png) repeat-x 0 -222px; }

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

.scbar_narrow #scbar_txt { width: 260px; }

#scbar_btn { margin: 0; padding: 0; border: none; background: transparent none; }

.scbar_type_td { background: url({IMGDIR}/search.png) no-repeat 0 -370px; }

#scbar_type { display: block; padding-left: 5px; text-align: left; text-decoration: none; }

#scbar_hot { padding-left: 8px; height: 45px; overflow: hidden; }

#scbar_hot strong, #scbar_hot a { float: left; margin-right: 8px; white-space: nowrap; }

/* 搜索条 by Pony 1203201332 */

#scbar { margin-top: 10px; border: 1px solid {COMMONBORDER}; background: #F8F8F8; border-radius: 3px; box-shadow: 0 0 10px #FFF inset; }

.scbar_icon_td { width: 10px; background: none; }

.scbar_type_td { width: 69px; background: url({STYLEIMGDIR}/search.png) no-repeat 0 -365px; }

#scbar_type { padding-left: 10px; background: url({STYLEIMGDIR}/search.png) no-repeat -20px -449px; }

.scbar_txt_td { background: url({STYLEIMGDIR}/search.png) repeat-x 0 -217px; }

#scbar_txt { padding-left: 5px; font-size: 12px; }

.scbar_btn_td { width: 80px; background: url({STYLEIMGDIR}/search.png) no-repeat 0 -291px; text-align: center; }

#scbar_btn { padding-left: 20px; width: 75px; letter-spacing: 5px; text-align: left; color: #FFF; box-shadow: none; }

.ie7 #scbar_btn { padding-left: 25px; }

#scbar_type_menu { margin-top: -11px; }

修改前：

修改后：