ecshop模板制作5-调整首页样式
2013-08-23 00:09
183 查看
保留头,内容,脚,上中下三层结构
1,修改页头
themes\default\library
page_header.lbi
1)修改logo样式
<div class="f_l"><a href="../index.php" name="top"><img src="../images/logo.gif" /></a></div>
->
class="logo"
修改style.css
.f_l{float:left;}
->
.logo{
float:left;
margin-left:50px;
margin-top:30px
}
2)修改登录样式
{insert name='member_info'}
includes/lib_insert.php
$output = $GLOBALS['smarty']->fetch('library/member_info.lbi');
library/member_info.lbi
<a href="user.php"><img src="images/bnt_log.gif" /></a>
<a href="user.php?act=register"><img src="images/bnt_reg.gif" /></a>
->
<a href="user.php">登录</a>
<a href="user.php?act=register">我的帐号</a>
3)修改搜索栏位置
删除
library/page_header.lbi
<!--search start-->
<div id="search" class="clearfix">
</div>
<!--search end-->
添加
library/member_info.lbi
<form id="searchForm" name="searchForm" method="get" action="search.php" onSubmit="return checkSearchForm()" class="f_r" style="_position:relative; top:5px;">
<select name="category" id="category" class="B_input">
<option value="0">{$lang.all_category}</option>
{$category_list}
</select>
<input name="keywords" type="text" id="keyword" value="{$search_keywords|escape}" class="B_input" style="width:110px;"/>
<input name="imageField" type="submit" value="" class="go" style="cursor:pointer;" />
<a href="search.php?act=advanced_search">{$lang.advanced_search}</a>
</form>
4)修改中部导航栏样式
page_header.lbi
<div id="mainNav" class="clearfix">
添加样式
<div id="mainNav" class="clearfix m_nav">
style.css
/*页面主导航*/
.m_nav{
position:absolute;
margin-top:-40px;
margin-left:400px;
}
5)将购物车信息放在页头处(类似淘宝)
index.dwt
<!-- #BeginLibraryItem "/library/cart.lbi" -->
{insert_scripts files='transport.js'}
<div class="cart" id="ECS_CARTINFO">
{insert name='cart_info'}
</div>
<div class="blank5"></div>
<!-- #EndLibraryItem -->
移到
page_header.lbi
下面
隐藏显示
/library/cart.lbi
<div class="cart" id="ECS_CARTINFO">
->
<div class="cart" style="position:absolute;float:left;visibility:hidden;" id="ECS_CARTINFO">
2,修改页脚
themes\default\library\page_fotter.lbi
1)修改底部导航栏样式
themes\default\library\page_fotter.lbi
删除
<div class="f_r">
<a href="#top"><img src="images/bnt_top.gif" /></a> <a href="../index.php"><img src="images/bnt_home.gif" /></a>
</div>
修改
<div class="f_l">
->
<div class="f_r">
2)修改页脚内容
themes\default\library\page_fotter.lbi
1>修改版权标识
可以参考这里
http://www.ecmoban.com/article-1642.html
进一步深入的修改可以参考这里
http://www.ecmoban.com/article-285.html
删除style.css中的图片
/*版权*/
#footer{background:url(images/logo1.gif) no-repeat 5% 50%; padding-left:200px; width:760px; margin:10px auto;}
#footer .text{background:url(images/footerLine.gif) no-repeat left center; padding-left:50px; *padding-bottom:20px;}
修改
/languages/zh_cn/common.php
$_LANG['copyright'] = "© 2005-%s %s 版权所有,并保留所有权利。";
->
2013 XXXX All rights reserved.
2>去掉底部的Powered by ecshop 270
打开 js/common.js
删除第244行:onload = function()【一定要删除这个完整的,不然会页面版权乱飞】
再打开模板文件夹的 library/page_footer.lbi
删除 {foreach from=$lang.p_y item=pv}{$pv}{/foreach}{$licensed}
3>删除查询信息和rss
themes\default\library\page_fotter.lbi
删除
{insert name='query_info'}
<div align="left" id="rss"><a href="{$feed_url}"><img src="../images/xml_rss2.gif" alt="rss" /></a></div>
4>修改备案号样式
themes\default\library\page_fotter.lbi
<!-- ICP 证书{if $icp_number} -->
<span class="f_l" style="margin-top:-35px;margin-left:250px;"> {$lang.icp_number}:<a href="http://www.miibeian.gov.cn/" target="_blank">{$icp_number}</a></span><br />
<!-- 结束ICP 证书{/if} -->
5>添加页底链接
themes\default\library\page_fotter.lbi
<div class="f_r" style="margin-top:-50px;margin-right:-80px;">
<a href="#" target="_blank" >网站地图</a>
-
<a href="#" target="_blank" >法律声明</a>
-
<a href="#" target="_blank" >联系方式</a>
</div>
以下文件是属于index.dwt,但我还是将其归类到页脚
6>删除友情链接
themes\default\index.dwt
<!--友情链接 start-->
<!--友情链接 end-->
7>删除帮助
其实帮助还是蛮有用的,详细设置可以参考这里,但有这里我只能按客户要求删除之
http://www.ecmoban.com/article-1558.html
themes\default\index.dwt
<div class="blank5"></div>
<!--帮助-->
<!--帮助-->
3,修改主内容区
themes\default\index.dwt
1)删除商店公告
<!--站内公告 start-->
<!--站内公告 end-->
2)删除品牌分类
<!--今日特价,品牌 start-->
<div class="clearfix">
<!--特价-->
<!--品牌-->
</div>
5)修改轮播栏
1>修改位置
<div class="f_l" id="focus">
<!-- #BeginLibraryItem "/library/index_ad.lbi" --><!-- #EndLibraryItem -->
</div>
复制到此之上
<div class="block clearfix">
<!--left start-->
2>修改大小
themes\default\library\index_ad.lbi
var swf_width=484;
var swf_height=200;
->
var swf_width=950;
var swf_height=560;
3>修改样式
<div class="f_l" id="focus">
->
<div class="f_l" style="position:absolute;float:left;margin-top:-90px;margin-left:140px;z-index:-99;" id="focus">
3)修改站内快讯样式
1>调至左边
<!--焦点图和站内快讯 START-->
<!--焦点图和站内快讯 END-->
<div id="mallNews" class="f_r">
->
<div id="mallNews" class="f_l">
4)修改精品推荐样式
1>调至右边
<!-- #BeginLibraryItem "/library/recommend_best.lbi" -->
2>调整样式
/library/recommend_best.lbi
删除文字
<p><a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_style_name}</a></p>
<font class="f1">
<!-- {if $goods.promote_price neq ""} -->
{$goods.promote_price}
<!-- {else}-->
{$goods.shop_price}
<!--{/if}-->
</font>
调整more位置
<div class="more"><a href="../search.php?intro=best"><img src="images/more.gif" /></a></div>
->
<div class="itemTit" id="itemBest">
下面
调整宽度
<div class="box" style="width:600px;margin-left:150px;height:160px;">
1,修改页头
themes\default\library
page_header.lbi
1)修改logo样式
<div class="f_l"><a href="../index.php" name="top"><img src="../images/logo.gif" /></a></div>
->
class="logo"
修改style.css
.f_l{float:left;}
->
.logo{
float:left;
margin-left:50px;
margin-top:30px
}
2)修改登录样式
{insert name='member_info'}
includes/lib_insert.php
$output = $GLOBALS['smarty']->fetch('library/member_info.lbi');
library/member_info.lbi
<a href="user.php"><img src="images/bnt_log.gif" /></a>
<a href="user.php?act=register"><img src="images/bnt_reg.gif" /></a>
->
<a href="user.php">登录</a>
<a href="user.php?act=register">我的帐号</a>
3)修改搜索栏位置
删除
library/page_header.lbi
<!--search start-->
<div id="search" class="clearfix">
</div>
<!--search end-->
添加
library/member_info.lbi
<form id="searchForm" name="searchForm" method="get" action="search.php" onSubmit="return checkSearchForm()" class="f_r" style="_position:relative; top:5px;">
<select name="category" id="category" class="B_input">
<option value="0">{$lang.all_category}</option>
{$category_list}
</select>
<input name="keywords" type="text" id="keyword" value="{$search_keywords|escape}" class="B_input" style="width:110px;"/>
<input name="imageField" type="submit" value="" class="go" style="cursor:pointer;" />
<a href="search.php?act=advanced_search">{$lang.advanced_search}</a>
</form>
4)修改中部导航栏样式
page_header.lbi
<div id="mainNav" class="clearfix">
添加样式
<div id="mainNav" class="clearfix m_nav">
style.css
/*页面主导航*/
.m_nav{
position:absolute;
margin-top:-40px;
margin-left:400px;
}
5)将购物车信息放在页头处(类似淘宝)
index.dwt
<!-- #BeginLibraryItem "/library/cart.lbi" -->
{insert_scripts files='transport.js'}
<div class="cart" id="ECS_CARTINFO">
{insert name='cart_info'}
</div>
<div class="blank5"></div>
<!-- #EndLibraryItem -->
移到
page_header.lbi
下面
隐藏显示
/library/cart.lbi
<div class="cart" id="ECS_CARTINFO">
->
<div class="cart" style="position:absolute;float:left;visibility:hidden;" id="ECS_CARTINFO">
2,修改页脚
themes\default\library\page_fotter.lbi
1)修改底部导航栏样式
themes\default\library\page_fotter.lbi
删除
<div class="f_r">
<a href="#top"><img src="images/bnt_top.gif" /></a> <a href="../index.php"><img src="images/bnt_home.gif" /></a>
</div>
修改
<div class="f_l">
->
<div class="f_r">
2)修改页脚内容
themes\default\library\page_fotter.lbi
1>修改版权标识
可以参考这里
http://www.ecmoban.com/article-1642.html
进一步深入的修改可以参考这里
http://www.ecmoban.com/article-285.html
删除style.css中的图片
/*版权*/
#footer{background:url(images/logo1.gif) no-repeat 5% 50%; padding-left:200px; width:760px; margin:10px auto;}
#footer .text{background:url(images/footerLine.gif) no-repeat left center; padding-left:50px; *padding-bottom:20px;}
修改
/languages/zh_cn/common.php
$_LANG['copyright'] = "© 2005-%s %s 版权所有,并保留所有权利。";
->
2013 XXXX All rights reserved.
2>去掉底部的Powered by ecshop 270
打开 js/common.js
删除第244行:onload = function()【一定要删除这个完整的,不然会页面版权乱飞】
再打开模板文件夹的 library/page_footer.lbi
删除 {foreach from=$lang.p_y item=pv}{$pv}{/foreach}{$licensed}
3>删除查询信息和rss
themes\default\library\page_fotter.lbi
删除
{insert name='query_info'}
<div align="left" id="rss"><a href="{$feed_url}"><img src="../images/xml_rss2.gif" alt="rss" /></a></div>
4>修改备案号样式
themes\default\library\page_fotter.lbi
<!-- ICP 证书{if $icp_number} -->
<span class="f_l" style="margin-top:-35px;margin-left:250px;"> {$lang.icp_number}:<a href="http://www.miibeian.gov.cn/" target="_blank">{$icp_number}</a></span><br />
<!-- 结束ICP 证书{/if} -->
5>添加页底链接
themes\default\library\page_fotter.lbi
<div class="f_r" style="margin-top:-50px;margin-right:-80px;">
<a href="#" target="_blank" >网站地图</a>
-
<a href="#" target="_blank" >法律声明</a>
-
<a href="#" target="_blank" >联系方式</a>
</div>
以下文件是属于index.dwt,但我还是将其归类到页脚
6>删除友情链接
themes\default\index.dwt
<!--友情链接 start-->
<!--友情链接 end-->
7>删除帮助
其实帮助还是蛮有用的,详细设置可以参考这里,但有这里我只能按客户要求删除之
http://www.ecmoban.com/article-1558.html
themes\default\index.dwt
<div class="blank5"></div>
<!--帮助-->
<!--帮助-->
3,修改主内容区
themes\default\index.dwt
1)删除商店公告
<!--站内公告 start-->
<!--站内公告 end-->
2)删除品牌分类
<!--今日特价,品牌 start-->
<div class="clearfix">
<!--特价-->
<!--品牌-->
</div>
5)修改轮播栏
1>修改位置
<div class="f_l" id="focus">
<!-- #BeginLibraryItem "/library/index_ad.lbi" --><!-- #EndLibraryItem -->
</div>
复制到此之上
<div class="block clearfix">
<!--left start-->
2>修改大小
themes\default\library\index_ad.lbi
var swf_width=484;
var swf_height=200;
->
var swf_width=950;
var swf_height=560;
3>修改样式
<div class="f_l" id="focus">
->
<div class="f_l" style="position:absolute;float:left;margin-top:-90px;margin-left:140px;z-index:-99;" id="focus">
3)修改站内快讯样式
1>调至左边
<!--焦点图和站内快讯 START-->
<!--焦点图和站内快讯 END-->
<div id="mallNews" class="f_r">
->
<div id="mallNews" class="f_l">
4)修改精品推荐样式
1>调至右边
<!-- #BeginLibraryItem "/library/recommend_best.lbi" -->
2>调整样式
/library/recommend_best.lbi
删除文字
<p><a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_style_name}</a></p>
<font class="f1">
<!-- {if $goods.promote_price neq ""} -->
{$goods.promote_price}
<!-- {else}-->
{$goods.shop_price}
<!--{/if}-->
</font>
调整more位置
<div class="more"><a href="../search.php?intro=best"><img src="images/more.gif" /></a></div>
->
<div class="itemTit" id="itemBest">
下面
调整宽度
<div class="box" style="width:600px;margin-left:150px;height:160px;">
相关文章推荐
- ecshop首页制作模板时,按要求增加折扣,自己写个php函数调用
- DedeCMS实战-----1、制作首页模板
- ecshop怎样在新主页模板里调用首页主广告
- ECshop 模板制作教程(转)
- 8/5 调整ECshop首页显示排名顺序
- ecshop 更新首页flash样式
- ECSHOP通过改变模板路径制作手机站
- ECshop模板制作教程100问
- ecshop怎么制作自己的模板
- ECShop的模板样式文件对应的功能
- ecshop模板制作 中 foreach 循环次数的调用及使用技巧
- ECSHOP模板制作中常见循环的操作方法
- ecshop模板制作1-添加自定义模板
- ecshop怎么制作自己的模板
- ECshop新手入门模板制作教程[转载]
- ECSHOP模板制作教程,ECSHOP标签大全,ECSHOP模板标签
- 模板做好后,制作首页
- ecshop的首页主广告轮播替换为js翻转效果,最模板方法二
- ECshop 模板制作教程
- ecshop模板制作3-自定义布局