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

Question

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

主要问题是，无论我将元素堆叠多深或在使用此小部件时使用“!important”，我的 CSS 样式都会被覆盖。例如，我正在使用以下代码尝试并将外部小部件的 border-radius 从 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。

有谁知道如何实际设计此小部件的样式？或者更重要的是，有谁知道如何加载 "default" 推特小部件 CSS 文件，以便我可以直接编辑它？任何帮助将不胜感激！谢谢

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

Answer 1

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

Twitter-Post-Fetcher

Answer 2

解决了！

所以基本上你需要告诉 Twitter 在加载所有其他样式后从你的 CSS 文件中提取，然后你就可以完全控制你的 Twitter Widget。虽然我发现围绕这个主题有很多困惑，但实际上有一种非常简单的方法可以调整所有 Twitter 元素。

这是从开始到结束的详细过程。

首先： 下载此 JS 文件并将其适当地上传到您的文件结构中。我会把它放在你的 JS 文件夹中。如果您没有JS文件夹，您可以创建一个。

只需确保正确更改您的目录路径。您可以从 Github 此处获取文件：

https://github.com/kevinburke/customize-twitter-1.1/blob/master/customize-twitter-1.1.min.js

第二步：加载此文件。我建议将代码与其他脚本一起放在 header 中。这是一个例子：

<script src="/wp-content/themes/reverie/js/customize-twitter-1.1.min.js" type="text/javascript"></script>

记得正确更改你的目录路径！

第三： 创建您的 Twitter 小工具。只需登录 Twitter，然后访问此 link:

https://twitter.com/settings/widgets

第四： 将您新创建的代码粘贴到您的网页中...像这样：

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

<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>

第五： 将以下代码放在您的 Twitter 小部件脚本下方。

记得正确更改目录路径。

<script>
    var options = {
        "url": "/wp-content/themes/reverie/css/app.css"
    };
    CustomizeTwitterWidget(options);
</script>

第六场也是最后一场：玩转！只需使用 "inspect element" 工具定位小部件的元素，然后将调整后的新 CSS 粘贴到您指定的样式表中。

希望这有助于解决很多关于如何调整这些 Twitter 小部件的困惑。享受吧。

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

Issues styling the default Twitter Widget

html

javascript

css

twitter

wordpress