标记

Question

请参阅此JSfiddle上正在使用的Trustpilot小部件的复制。

希望能够覆盖小部件的CSS来进行这些调整，但尚未成功找到这样做的方法。

我希望更改的唯一样式是删除边框，将窗口小部件的宽度更改为250px并居中对齐窗口小部件 - 所有这些都是通过iframe加载的类（.tp-box）。

根据上面链接的JSfiddle，正在使用的代码......

标记

<div class="sidebar">
    <div class="block block-tp-reviews">
        <div class="tp_-_box" data-tp-settings="domainId:313478">
            <a href="http://www.trustpilot.co.uk/review/www.showermania.co.uk" rel="nofollow" hidden>Showermania Reviews</a>
        </div>
        <script type="text/javascript">
            (function () { var a = "https:" == document.location.protocol ? "https://ssl.trustpilot.com" : "http://s.trustpilot.com", b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = a + "/tpelements/tp_elements_all.js"; var c = document.getElementsByTagName("script")[0]; c.parentNode.insertBefore(b, c) })();
        </script>
    </div>
</div>

CSS

.sidebar .block-tp-reviews .tp-box {border: none !important; width: 250px !important;}
.sidebar .block-tp-reviews iframe {width: 250px;}

有没有办法可以覆盖这些风格？提前谢谢。

Answer 1

由于多种原因，来自父文档的CSS无法对iframe中加载的任何内容产生任何影响。

任何修改iframe内容样式的尝试都将违反same origin policy。
iframe中的内容与构成iframe的周围HTML实际上不在同一文档（页面）中。

简短回答：不，这些风格无法改写。

Answer 2

检查一下：http://jsfiddle.net/G8CLx/2/ 我更新了添加两种样式的示例：

.tpiframe-wrapper{width:176px;overflow:hidden;}
#tpiframe-box0{margin:-1px 0 0 -1px;}

它只是隐藏了div的边界。

Answer 3

Trustpilot的小部件是使用Bootstrap开发的。就像使用Bootstrap一样，您可以根据自己的喜好选择要更改的div并设置样式。如果您将.tp-box添加到样式表或html底部的标签中，您应该可以根据需要自定义它。

对Trustpilot小部件进行微小的样式调整

标记

CSS

3 个答案: