- 帖子
- 184
- 积分
- 357
- 体力
- 170 点
- 金币
- 92
- 威望
- 3
- 来自
- 深圳
|
[共享] 默认模板美化搜索框,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 显示正常
IE7 搜索框偏高
FF 搜索框偏高
-
-
用到素材.rar
(2.55 KB)
-
1
评分人数
-
|