Board logo

标题: [共享] 默认模板美化搜索框,2.70和2.71都能用 [打印本页]

作者: wangjw302    时间: 2009-11-28 21:20     标题: 默认模板美化搜索框,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 (2009-11-28 21:20, 16.74 KB) / 下载次数 272
http://bbs.ecshop.com/attachment.php?aid=30872&k=53167f4fa3c3ce68b834072e457dbf83&t=1632288866&sid=8pPTnt



图片附件: [IE7 搜索框偏高] IE7.jpg (2009-11-28 21:20, 15.72 KB) / 下载次数 264
http://bbs.ecshop.com/attachment.php?aid=30873&k=8f61e5e561df150efa5307877e7e9d2e&t=1632288866&sid=8pPTnt



图片附件: [FF 搜索框偏高] FF.jpg (2009-11-28 21:20, 17.5 KB) / 下载次数 267
http://bbs.ecshop.com/attachment.php?aid=30874&k=f684dbb3b9c17356bc77543faae01711&t=1632288866&sid=8pPTnt



附件: 用到素材.rar (2009-11-28 21:20, 2.55 KB) / 下载次数 457
http://bbs.ecshop.com/attachment.php?aid=30875&k=02a0898dd828d6650cf1465518d65797&t=1632288866&sid=8pPTnt
作者: doubar    时间: 2009-11-28 23:16

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

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

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

记得用完清楚浮动
作者: flyhome    时间: 2009-11-29 12:04

支持楼主!费心了!
作者: Yaxis    时间: 2009-11-29 13:53

喜欢看到这样的帖子 呵呵
作者: 晓天    时间: 2009-11-30 14:37

楼主辛苦了
作者: flyhome    时间: 2009-12-13 20:35

现在用的方法:

我的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;
}




欢迎光临 ECShop电商系统交流论坛 (http://bbs.ecshop.com/) Powered by Discuz! 7.2