0

このJSfiddleで使用されている Trustpilot ウィジェットの複製を参照してください。

これらの微調整を行うためにウィジェットの CSS をオーバーライドできることを望んでいましたが、今のところそうする方法を見つけることに成功していません。

私が変更したい唯一のスタイルは、境界線を削除し、ウィジェットの幅を 250px に変更し、ウィジェットを中央揃えにすることです。すべて.tp-boxiframe を介してロードされるクラス ( ) にあります。

上記にリンクされている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/ 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 を選択し、好みに合わせてスタイルを設定できます。スタイル シートまたは html の下部にあるタグに .tp-box を追加すると、必要に応じてカスタマイズできるはずです。

于 2015-04-10T17:25:51.630 に答える