ECShop H5微商城
ECShop APP商城
ECshop4.0商业授权
ECShop源码全能套餐
ECMall全能套餐(含主机)
ECMall3.0功能定制
ECShop商城小程序
ECShop二开定制
ECShop授权套餐
ECShop装修市场
ECMall基础套餐(PC+H5)
ECMall3.0商业授权
返回列表 发帖

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

本帖最后由 wangjw302 于 2009-11-28 21:33 编辑

开始是在爱网商城(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;" />
   <a  style="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 显示正常

IE6.jpg

IE7 搜索框偏高

IE7.jpg

FF 搜索框偏高

FF.jpg

用到素材.rar (2.55 KB)

1

评分人数

  • 晓天

ECShop下载                             ECShop4.0商业授权

现在用的方法:

我的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"> <a  style="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;
}

TOP

楼主辛苦了
ECShop下载                             ECShop4.0商业授权

TOP

喜欢看到这样的帖子 呵呵

TOP

支持楼主!费心了!

TOP

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

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

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

记得用完清楚浮动
ECShop下载                             ECShop4.0商业授权

TOP

返回列表