编辑Magento 1.9 CSS以自定义类别布局


Editing Magento 1.9 CSS to customize category layout

我正在尝试为特定类别自定义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;    
}

但是,这是不正确的。