修改Magento se105模版 Latest Product等模塊的默認圖片及外框大小

作者博客viewmode=contentshttp://blog.csdn.net/tanmaoxian

http://blog.csdn.net/tanmaoxian/article/details/8858279

se105模版,默認的圖片大小是155*120.看多了以後,就覺得有視覺疲勞了。最近做了一個服裝網站,如果還是按照155*120這個比例的話,衣服擺放就不好看了。所以就考慮改動外框和圖片的大小。改動以後。效果立刻明顯。先看下效果圖

20130427115351133

undefined

這樣改成了width:height=3:4的比例後。網站立刻美觀了不少。原來se105模版也是適合服裝網站的,哈哈。

下面說下修改方法:找到app/design/frontend/default/se105/template/bmproducts/product/latest.phtml,然後把代碼中的155*120全部改成168*224.有兩處地方需要改動的。


改動好以後,你會發現圖片長度被拉長了,產品標題,產品價格,還有什麼加入購物車,rating等會被往下擠,一句話,CSS被破壞了。其實個人認爲,這個展示頁面,評論等級,addtocart,addtowish都沒什麼用。所以在剛纔那個文件下面。刪掉了代碼

<?phpecho$this->getReviewsSummaryHtml($_product,'short',true)?>

<?php$categories=$_product->getCategoryIds();?>
<span>In</span>
<?php$i=1;foreach($categoriesas$k=>$_category_id):?>
<?phpif($i>1){break;}?>
<?php$_category=Mage::getModel('catalog/category')->load($_category_id)?>
<aclass="in-category"href="<?phpecho$_category->getUrl()?>"><?phpecho$_category->getName()?></a>
<?php$i++;endforeach;?>

把這段代碼刪掉以後。上面的那些就不存在了。但是你們看到和我上圖展示的效果還是不一樣。那是因爲文字和產品價格沒有居中顯示,產品的價格也沒有變成紅色。

那是因爲還有一個地方需要改動的,就是CSS文件。找到skin\frontend\default\se105\css\styles.css第1957行左右的代碼。width=168px,height=312px.這裏高度改成312而不是224.是因爲這個高度包括了產品標題和價格的高度。1960行左右的代碼,改爲height=224px,width=168px。1961行的代碼也要改成166,224.我的產品標題設置成了居中。是1972行左右代碼,添加text-align:center;在這行代碼裏,我還改動了一個地方,把max-height改成了35px,這樣如果標題很長的話,它就只會顯示其中兩行,哈哈,效果很不錯。產品價格居中,顏色變爲紅色。在1110行,把顏色改成red,在1104行。添加text-align:center;不過這裏改成了center以後,產品頁面的產品價格也會居中顯示。先不管這個了,刷新緩存,去首頁看效果吧!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章