我正在尝试为特定类别自定义magento上的list.phtml页面。
我拿走了产品图片和产品描述,现在我想将产品名称推到图片所在的左侧。我尝试在我的 css 文件中对左边距使用负值来处理文本,但似乎有什么东西漂浮在文本前面(即文本在空白后面滑动。有什么想法吗?也许是另一种方法?
谢谢!
以前:
https://i.stack.imgur.com/mtlZX.jpg
后:
https://i.stack.imgur.com/OQpCW.jpg
我还尝试在样式中修改这些值.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;
}
但是,这是不正确的。