Question

我正在开发一个WP网站，并且在设置twitter的默认小部件方面遇到了很多麻烦。有关此小部件的更多信息，请访问：https://dev.twitter.com/web/embedded-timelines

主要问题是我的CSS样式被覆盖，无论我堆叠元素有多深，或者在使用这个小部件时使用“！important”。例如，我使用下面的代码尝试更改外部小部件的边框-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。

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

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

Answer 1

有很多关于自定义的信息here（我确信您已经完成并且已经取得了胜利，并且不允许您覆盖＆＃39;边界 - 半径＆＃39;属性）。或者您可以使用这个方便的小片段来提取您的Feed，这样可以进行完全自定义（我之前没有任何关联，但我以前使用过它）

Twitter-Post-Fetcher

Answer 2

解决了它！

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

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

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

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

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

SECOND：加载此文件。我建议将代码放在标题中，并附上其他脚本。这是一个例子：

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

请记住正确更改目录路径！

THIRD：创建您的Twitter小工具。只需登录Twitter，然后访问此链接：

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>

第五：将以下代码放在您的推特小部件脚本下面。

请记住正确更改目录路径。

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

第六和最终：玩转！只需使用＆＃34;检查元素＆＃34;定位小部件的元素即可。工具，然后将新调整的CSS粘贴到指定的样式表中。

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

设计默认Twitter Widget的问题

2 个答案: