0

请参阅此 JSfiddle 中使用的 Trustpilot 小部件的复制。

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

我希望更改的唯一样式是删除边框，将小部件的宽度更改为 250 像素并居中对齐小部件 - 全部在.tp-box通过 iframe 加载的类 ( ) 上。

根据上面链接的 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;}

有没有办法完全覆盖这些样式？提前致谢。

4

3 回答 3

3

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

  1. 任何在 iframe 中修改内容样式的尝试都将违反同源策略。
  2. iframe 中的内容在物理上与构成 iframe 的周围 HTML 不在同一个文档（页面）中。

简短的回答：不，这些样式不能被覆盖。

于 2013-08-20T08:37:09.917 回答
0

检查这个： http: //jsfiddle.net/G8CLx/2/ 我更新了你的例子，添加了两种样式：

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

它只是将边框隐藏到 div 中。

于 2013-08-20T09:02:34.013 回答
-2

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

于 2015-04-10T17:25:51.630 回答