WooCommerce - 如何删除 DIV 阴影和更改背景颜色答案

【问题标题】：WooCommerce - How to remove DIV shadow and change background colorWooCommerce - 如何删除 DIV 阴影和更改背景颜色
【发布时间】：2017-07-01 05:06:00
【问题描述】：

我有一个产品页面需要更改的网站： http://weardenali.com/product/everyday-messenger

我正在尝试

a) 改变背景颜色

b) 移除阴影框

它适用于 iPad（高度为 768 像素），但一旦网站高度降至 768 像素以下，滑动功能就会停止工作。

我希望有人可以帮助我解决这个问题。

我网站的这张图片是here

【问题讨论】：

标签： html css wordpress image woocommerce

【解决方案1】：

按顺序回答您的问题：

a) 页面背景被指定为元素样式。可能来自 WordPress 样式或任何其他我无法立即确定的原因。根元素的样式由 sf-combined.min CSS 文件中的 .product-main 设置。在这里，您可以按照建议将背景颜色设置为您想要的任何内容：

.product-main {
background-color: #anything;
}

考虑到这可能有效也可能无效，我建议您尝试确定 .product-main 为何具有 #fcfcfc 元素样式。以下是不推荐，但您始终可以设置 .product-main { background-color: #anything !important; } 覆盖任何设置。但这不是最佳做法。

b) 在第 15 行的 sf-combined.min.css 中的 CSS 中（可能不准确，因为它是一个缩小的 CSS 文档）你有以下行：

.product-fw-split div.product div.summary.

从 CSS 中删除框阴影条目：

.product-fw-split div.product div.summary {
padding: 40px;
margin-bottom: 40px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

盒子阴影应该消失了。请检查是否有任何可能影响移动设备上相同内容的响应式查询（我没有检查）。

c) 我无法完全确定您在 c 中的问题。我相信您想知道如何防止在小于 768px 的设备上调整大小时滑动功能停止工作？这可能是 WooThumbs 的预期功能，在这种情况下，我建议您前往 CodeCanyons 支持并尝试直接从他们那里获得答案。 https://codecanyon.net/item/woothumbs-awesome-product-imagery/2867927

希望对您有所帮助。下次可能更容易将您的问题分成多个问题，以便其他人更容易找到答案。

【讨论】：

感谢您的帮助。你所有的建议都奏效了，对于 c) 我会咨询 Woothumbs
很高兴它有帮助！如果您从 WooThumbs 找到答案，您可能需要编辑原始问题以添加您找到的答案，以供将来参考！

【解决方案2】：

以下是您的更改： A) 将product-main clearfix 样式background-color: #fcfcfc; 更改为您想要的颜色。

B) 删除

Remove /* -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1); */
Remove /* box-shadow: 1px 1px 1px rgba(0,0,0,.1);`

来自您的 summary 类或重命名您的 div。

C）我只是在 chrome 版本 55 中测试它......模拟 iphone 5 和 ypur carousel 仍在工作。

【讨论】：