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

cha

我正在尝试针对特定类别自定义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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

Magento类别自定义设计页面布局未更改

来自分类Dev

所有类别页面magento的自定义布局

来自分类Dev

自定义布局magento

来自分类Dev

如何在magento的自定义类别属性中显示编辑器?

来自分类Dev

Magento,自定义模块的默认布局

来自分类Dev

如何在Magento 2中编辑自定义CSS或更少的CSS?

来自分类Dev

在发票网格中添加自定义列 - Magento 1

来自分类Dev

Magento-使用布局更新为一个类别设置自定义排序方式和顺序方向

来自分类Dev

magento中的客户注册表格编辑(编辑时自定义字段不会更新)

来自分类Dev

Magento-获取类别自定义属性值

来自分类Dev

python自定义排序列表1/2/3 /../ 9/10

来自分类Dev

python自定义排序列表1/2/3 /../ 9/10

来自分类Dev

Magento上catalog_category_view的自定义布局

来自分类Dev

Magento-为模块添加自定义布局更新

来自分类Dev

jqGrid-自定义表单布局(编辑,添加,删除)

来自分类Dev

Magento管理员编辑表单字段-自定义模型字段

来自分类Dev

Magento,在管理员中创建/编辑产品时预完成自定义选项

来自分类Dev

Magento自定义表单在“编辑”操作中删除文件所需的验证

来自分类Dev

如何在magento 2的产品编辑表单的“可自定义选项”中添加新字段?

来自分类Dev

如何在magento的自定义脚本中获取产品的多个类别和子类别

来自分类Dev

Magento 1.9.2-保存自定义管理表单产品新的&编辑页面(“自定义”标签)

来自分类Dev

如何使用IE9在自定义文本编辑器中查看HTML源代码?

来自分类Dev

如何在magento中编辑类别导航设计

来自分类Dev

Magento 2自定义主题CSS未显示

来自分类Dev

Magento 2 自定义 css 文件包括

来自分类Dev

我正在尝试在自定义类别页面(magento 1.9)上显示可配置的色板

来自分类Dev

如何在Magento中为一个类别创建自定义模板?

来自分类Dev

如何在Magento Fishpig中的自定义模板上显示类别帖子?

Related 相关文章

  1. 1

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

  2. 2

    Magento类别自定义设计页面布局未更改

  3. 3

    所有类别页面magento的自定义布局

  4. 4

    自定义布局magento

  5. 5

    如何在magento的自定义类别属性中显示编辑器?

  6. 6

    Magento,自定义模块的默认布局

  7. 7

    如何在Magento 2中编辑自定义CSS或更少的CSS?

  8. 8

    在发票网格中添加自定义列 - Magento 1

  9. 9

    Magento-使用布局更新为一个类别设置自定义排序方式和顺序方向

  10. 10

    magento中的客户注册表格编辑(编辑时自定义字段不会更新)

  11. 11

    Magento-获取类别自定义属性值

  12. 12

    python自定义排序列表1/2/3 /../ 9/10

  13. 13

    python自定义排序列表1/2/3 /../ 9/10

  14. 14

    Magento上catalog_category_view的自定义布局

  15. 15

    Magento-为模块添加自定义布局更新

  16. 16

    jqGrid-自定义表单布局(编辑,添加,删除)

  17. 17

    Magento管理员编辑表单字段-自定义模型字段

  18. 18

    Magento,在管理员中创建/编辑产品时预完成自定义选项

  19. 19

    Magento自定义表单在“编辑”操作中删除文件所需的验证

  20. 20

    如何在magento 2的产品编辑表单的“可自定义选项”中添加新字段?

  21. 21

    如何在magento的自定义脚本中获取产品的多个类别和子类别

  22. 22

    Magento 1.9.2-保存自定义管理表单产品新的&编辑页面(“自定义”标签)

  23. 23

    如何使用IE9在自定义文本编辑器中查看HTML源代码?

  24. 24

    如何在magento中编辑类别导航设计

  25. 25

    Magento 2自定义主题CSS未显示

  26. 26

    Magento 2 自定义 css 文件包括

  27. 27

    我正在尝试在自定义类别页面(magento 1.9)上显示可配置的色板

  28. 28

    如何在Magento中为一个类别创建自定义模板?

  29. 29

    如何在Magento Fishpig中的自定义模板上显示类别帖子?

热门标签

归档