今天要和大家分享是的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 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; }
修改前:
修改后:
此文由 網站目錄_網站網址收錄與提交入口 編輯,未經允許不得轉載!: