默认模板美化搜索框,2.70和2.71都能用

2016-07-07 16:16 来源：www.chinab4c.com 作者：ecshop专家



开始是在爱网商城(www.5i5net.cn) 看到的感觉不错，请教了一下flyhome 不过他也记不清了，呵呵！就直接分析一下代码把它提取出来了，拿出来分享一下希望有需要的朋友能用上。
大家齐心协力多多分享让ECSHOP 更完美 呵呵！

其实很简单修改三个地方：
用到的素材在压缩包里，解压放在模板图片文件夹themes\default\images里就行了

1：修改模板文件： themes\default\library\page_header.lbi

找到：
<!--search start-->
中间省略................
<!--search end-->

替换成：
<!--search start-->
<!--wangjw003 美化搜索框-->
<div id="Search">
<span class="left"></span><span class="right"></span>
{if $searchkeywords}
{$lang.hot_search} ：
{foreach from=$searchkeywords item=val}
<a href="search.php?keywords={$val|escape:url}">{$val}</a>
{/foreach}
{/if}
<div class="clearfix FormBox">
<form id="searchForm" name="searchForm" method="get" action="search.php" class="f_l">
<input name="keywords" type="text" id="keyword" value="{if $search_keywords|escape}{$search_keywords|escape}{else}请输入您要购买的型号！{/if}" class="searchBorder"/>
<input name="imageField" type="image" src="themes/default/images/search_submit.gif" style="position:relative;top:11px;_top:4px;" />
<astyle="color:#484848"href="search.php?act=advanced_search">高级搜索</a>
</form>
<div class="tcart f_r" id="ECS_CARTINFO">
{insert name='cart_info'}
</div>
</div>
</div>
<!--end wangjw003-->
<!--search end-->

2：修改CSS样式：themes\default\style.css

找到：
/*搜索*/

中间省略...................

/* ====================
模块
==================== */

替换为：

/* wangjw003 修改搜索栏布局以及当前位置样式*/
/*搜索*/
#Search{
width:916px; height:72px; padding:8px 15px 0 25px;
background:url(images/searchBgh.gif) repeat-x;
position:relative; color:#fff; margin-bottom:6px;
}
#Search .left,#Search .right{
width:4px; height:72px; display:block;
}
#Search .left{
background:url(images/slrbj.gif) no-repeat 0 0;
position:absolute; left:-2px; top:0px;
}
#Search .right{
background:url(images/slrbj.gif) no-repeat -3px 0;
position:absolute; right:-2px; top:0px;
}
#Search a{
color:#fff; text-decoration:none;
}
#Search a:hover{
color:#fff; text-decoration:underline;
}
#Search .FormBox{
margin-top:4px;_margin-top:10px;
}
/*购物车*/
#Search .tcart a,#Search .tcart a:hover{
color:#a0410a; text-decoration:none;
}
.tcart{
background:url(images/cartBg.gif)no-repeat;
height:23px; line-height:28px; position:relative;
padding:0 15px 0 35px; margin-top:12px;_margin-top:4px;
}
#Search .tcart .left,#Search .tcart .right{
width:0px; height:23px;
}

/*搜索框样式*/
.searchBorder{
border:1px solid #93BEFF;
width:310px;
background:#fff;
height:18px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
}

/*当前位置*/
#ur_here{
height:26px;
line-height:26px;
padding:0 12px;
background-color: #FFF;
}
#ur_here a{color:#006cce; text-decoration:none;}
/*end wangjw003*/
/* ====================
模块
==================== */

3. 注释掉 网站原当前位置的 填充线

我是用DW查找范围：整个当前本地站点

查找内容：
<!--当前位置 end-->
<div class="blank"></div>

全部替换为：
<!--当前位置 end-->
<!--<div class="blank"></div>-->


另外这浏览器之间的兼容 还存在问题！希望高手支招，完善一下。

IE6.jpg (16.74 KB)

IE6 显示正常

IE6.jpg

IE7.jpg (15.72 KB)

IE7 搜索框偏高

IE7.jpg

FF.jpg (17.5 KB)

FF 搜索框偏高

FF.jpg

用到素材.rar (2.55 KB)


回答：
至于各浏览器之间的对齐解决办法

我平时的做法是给每一个元素加一个浮动

即：float:left;这样就不会产生上下不对称了。

记得用完清楚浮动

支持楼主!费心了!

喜欢看到这样的帖子 呵呵

楼主辛苦了

现在用的方法：

我的360模板search_form.lbi部分，请对照添加！

<div class="clearfix FormBox">
<table cellpadding="0px" cellspacing="0"><tr><form id="searchForm" name="searchForm" method="get" action="search.php" class="f_l">

<td align="right"> <input name="keywords" type="text" id="keyword" value="{$search_keywords|escape}" class="searchBorder"/></td><td align="left" ><input name="imageField" type="image" src="../images/search_submit.gif"/></td>
<td align="right" width="55px"> <astyle="color:#484848"href="search.php?act=advanced_search">{$lang.advanced_search}</a></td>
</form></tr></table>
<div class="cart f_r" id="ECS_CARTINFO">

{insert_scripts files='transport.js'}
{insert name='cart_info'}
</div>
</div>
利用表格！对齐！兼容各浏览器！
css部分修改了：
#Search .FormBox{
margin-top:15px;_margin-top:12px;
}
和
.cart{
background:url(images/red/cartBg.gif)no-repeat;
height:23px; line-height:23px; position:relative;
padding:0 15px 0 35px; margin-top:-25px;_margin-top:-25px;
}