javascript - 设置默认 Twitter 小部件的样式问题

Question

我在 WP 网站上工作，在设计 Twitter 的默认小部件时遇到很多问题。可以在此处找到有关此小部件的更多信息:https://dev.twitter.com/web/embedded-timelines

主要问题是，无论我将元素堆叠多深或在使用此小部件时使用“!important”，我的 CSS 样式都会被覆盖。例如，我正在使用以下代码尝试更改外部小部件的边框-半径从 5px 到 0px 但没有任何变化。

.timeline {
   border-radius:0 !important;
   -webkit-border-radius:0 !important;
   -moz-border-radius:0 !important;
}       

<script>
    !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],
        p=/^http:/.test(d.location)?'http':'https';
        if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;
            js.src=p+"://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }
    (document,"script","twitter-wjs");
</script>

<a
   class="twitter-timeline"
   href="https://twitter.com/TadHeigel"
   data-widget-id="588706214483210242">
</a>

当我使用浏览器的编辑器时，上面发布的 CSS 有效地改变了小部件的样式......但当粘贴到我的实际 CSS 文件(设置为最后加载，在所有其他 CSS 之后)时却没有。

这让我相信上面的 twitter 脚本从中提取的 CSS 文件覆盖了我的 CSS。

有谁知道如何实际设计这个小部件的样式？或者更重要的是，有谁知道如何加载“默认”twitter 小部件 CSS 文件，以便我可以直接编辑它？任何帮助将不胜感激!谢谢

带有小部件脚本的页面: http://eldeco.mainstreetwebworx.com/

Answer 1

信息量很大here关于定制(我相信你已经完成了并且实际上不会让你覆盖'border-radius'属性)。或者你可以使用这个方便的小片段来拉入你的 feed，它允许完全定制(我绝不是附属的，但我以前使用过它)

Twitter-Post-Fetcher