opencart经验分享,简单几步修改自制模板

大家都知道,opencart的模板,每个版本都不一样,我用的1.5.3,的版本,网上搜索了一圈,一个模板兼容的模板也没找到,好不容易看到个喜欢的,四处不兼容,于是我只能手动搬运咯!

准备工具:谷歌浏览器 + Macromedia Dreamweaver 8编辑器

基础:用过编辑器,略懂HTML+CSS

首先,找到你要的模板和演示站,我找到的模板有个演示站,我下载下来,然后打开演示站点,右键-查看元素,这里先定位要修改的地方的源码!

根据谷歌浏览器查看元素定位到“<div id="header-top">”开始是我要模仿的地方,于是我打开自己的站点,然后看到”<div id="header">“开始是我要修改的地方

然后我们打开文件“/catalog/view/theme/default/template/common/header.tpl

这里看出,两个的结束地方都是“<?php if ($categories) { ?>”前面

好了,确认下来要修改的地方范围后,我们可以利用编辑器折叠功能把其他不相关的代码折叠起来即可!

这个时候,我们可以看看模板文件的演示站【地址:http://www.santoshsetty.com/tf/opencart-templates/sancart-v15/

可以看出<div  class="links"></div>这里是最顶端左侧的,上面分别是“首页,商品备忘簿 (0),会员中心,结帐”,然后我看回原模板有如下相应代码:

<div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist_total"><?php echo $text_wishlist; ?></a><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a><a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
</div>

但是,这段代码有一个是没有的,也就是“<a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a>”这个,因为这个是“购物车”的,是放另外一个地方的,这里我们可以把模板代码这个地方删掉,然后根据前面的模板DIV架构编写【PS:我干嘛不直接复制?因为每个版本都不一样,如果照搬,还不如直接用模板,这就是我为什么还要动手修改的原因!】

然后根据上面方法以此类推,从演示站定位,从演示站获取代码,从原站模板获取相应代码组织过去,但是,有两个地方要注意:

在模仿中,我遇到一个地方是如下一句话:

<?php echo $cart; ?>

可是,实际上,查看元素的时候,这里并不是这样形式的,而是有div架构的,因为我不了解opencart的模板架构,不清楚这个函数从哪里引用,我这人也懒,没去研究,直接看看这里是什么的,这个地方是上面那句删除掉的”购物车“的代码,于是我把上面那句删掉的代码”<a href="<?php echo $cart; ?>"><?php echo $text_cart; ?></a>"复制下来,根据查看元素的提示,写成如下形式:

<div id="cart">
<div class="heading clearfix">
<h4><a href="<?php echo $cart; ?>"><font><font><?php echo $text_cart; ?></font></font></a></h4>
<a><span id="cart_total"><font><font class><?php echo $text_items; ?></font></font></span></a></div>
<div class="content"></div>
</div>

OK,这里举例第二个了,然后下面还有类似的情况的,大家自己根据四个东西判断:原网站,演示站,源代码,谷歌定位元素来切换判断哪个对哪个!

最后,我们把相对应的CSS复制过来你这边的样式表即可,这里我一开始也没复制的那么全,也是一个个搬运过来,这需要现场情况说话了,呵呵,根据你修改的代码中引用到的CSS来搬运

最后,【其实我也忘了,后来才知道】把搬运的CSS种提到的图片复制过去,这样才有最佳效果!额,另外那个建议用非谷歌浏览器来看效果,也就是准备两个浏览器,谷歌的缓存太久了,我刷新半天没变化,用另外一个早就变样了!

OK,下面上个图,就是我修改的前后左右四张图!

opencart经验分享,简单几步修改自制模板

我网站 www.yijubh.com 其实我也不懂PHP的说,我CSS很差的说,我HTML都没经验的说,这很简单,只是繁琐了点...

改天传两个我修改前后文件对比给大家看下

补充:样式文件在:/catalog/view/theme/default/stylesheet/stylesheet.css

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情