我正在尝试针对特定类别自定义magento的list.phtml页面。
我拿走了产品图片以及产品说明,现在我想将产品名称推到图片所在的左侧。我尝试在处理文本的css文件中为margin-left使用负值,但似乎某些内容浮在文本前面(即文本滑到空白后面)。有什么想法吗?也许这是另一种解决方法?
谢谢 !
前:
http://i.stack.imgur.com/mtlZX.jpg
后:
http://i.stack.imgur.com/OQpCW.jpg
我也尝试过在styles.css中修改这些值:
.product-view .product-shop {
width: 50%;
float: left;
}
.product-img-box {
width: 50%;
float: right;
}
将图像删除到CSS文件后,尝试添加此文件。
.products-list .product-shop {
float: right;
padding-left: 20px;
width: 100%;
}
这将使产品div占据整个宽度。但是您应该先删除图像,
要删除图像,请转到您的Magento安装(1.9.1),然后转到 app/design/frontend/YOURMAGENTOTHEME/default/template/catalog/product/list.phtml
默认情况下,YOURMAGENTOTHEME在1.9及更高版本中为rwd
现在,您需要删除第50行和第63行(1.9.1)之间的内容
<?php // Product Image ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<?php /* Based on the native RWD styling, product images are displayed at a max of ~400px wide when viewed on a
one column page layout with four product columns from a 1280px viewport. For bandwidth reasons,
we are going to serve a 300px image, as it will look fine at 400px and most of the times, the image
will be displayed at a smaller size (eg, if two column are being used or viewport is smaller than 1280px).
This $_imgSize value could even be decreased further, based on the page layout
(one column, two column, three column) and number of product columns. */ ?>
<?php $_imgSize = 300; ?>
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
<?php // Product description ?>
这是更正确的方法,也可以将其添加到CSS中以隐藏图像:
.product-image > img{
display:none;
}
但是,这是不正确的。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句